/* ==========================================================================
   boards_clean.css — direction « table sobre et lisible »
   --------------------------------------------------------------------------
   Principe : le plateau doit se lire, pas se contempler.
     - fonds pleins, aucun verre dépoli dans la partie ;
     - une seule bordure fine pour séparer les zones ;
     - le contraste porte la hiérarchie, pas les ombres ;
     - le tour actif se signale par un liseré franc, pas par une lueur ;
     - espacement généreux, texte jamais plus petit que 12 px.

   Palette : celle du site (nuit #12131f, panneaux #1b1d2b, teal #00d4aa,
   or #ffd700, rouge #e94560). Aucune couleur nouvelle n'est introduite.

   Ce fichier est chargé en dernier : il habille, il ne déplace rien. Les
   dimensions validées (coque, zones, défilements) restent celles de
   game_shell.css / dice_board.css / boards_mobile.css.
   ========================================================================== */

body.in-game {
    --tbl-bg: #12131f;
    --tbl-panel: #1b1d2b;
    --tbl-panel-2: #232636;
    --tbl-line: rgba(255, 255, 255, 0.08);
    --tbl-line-strong: rgba(255, 255, 255, 0.16);
    --tbl-ink: #f2f4f8;
    --tbl-ink-soft: #a9b0c2;
    --tbl-accent: #00d4aa;
    --tbl-gold: #ffd700;
    --tbl-danger: #e94560;
    --tbl-radius: 12px;
    --tbl-gap: 10px;
}

/* --------------------------------------------------------------------------
   1. Fond de table : plein, sans dégradé ni flou
   -------------------------------------------------------------------------- */
body.in-game #view-game,
body.in-game .president-game,
body.in-game .palace-game,
body.in-game .traitres-board,
body.in-game #game-area {
    background-color: var(--tbl-bg);
    background-image: none;
}

/* Le verre dépoli est réservé au site, pas au plateau : il brouille les
   valeurs des cartes et coûte des images par seconde sur téléphone. */
body.in-game #view-game *,
body.in-game #view-game *::before,
body.in-game #view-game *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --------------------------------------------------------------------------
   2. Panneaux : un fond, une bordure, un rayon. Rien d'autre.
   -------------------------------------------------------------------------- */
body.in-game .glass-panel,
body.in-game .president-game > .game-header,
body.in-game .play-area,
body.in-game .my-hand-area,
body.in-game .variants-block,
body.in-game #dice-container.dice-container,
body.in-game .palace-opponents,
body.in-game .palace-center,
body.in-game .traitres-stats-bar,
body.in-game .traitres-players-row,
body.in-game .traitres-hand-zone {
    background: var(--tbl-panel) !important;
    background-image: none !important;
    border: 1px solid var(--tbl-line) !important;
    border-radius: var(--tbl-radius) !important;
    box-shadow: none !important;
    color: var(--tbl-ink);
}

/* La table de jeu se distingue des panneaux : un ton au-dessus, liseré net. */
body.in-game .play-area,
body.in-game .palace-table,
body.in-game .palace-center {
    background: var(--tbl-panel-2) !important;
    border: 1px solid var(--tbl-line-strong) !important;
}

/* --------------------------------------------------------------------------
   3. Adversaires : sobres, le tour actif se lit au liseré
   -------------------------------------------------------------------------- */
body.in-game .other-player,
body.in-game .palace-opponent,
body.in-game .traitres-player {
    background: var(--tbl-panel-2) !important;
    background-image: none !important;
    border: 1px solid var(--tbl-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body.in-game .other-player.current-turn,
body.in-game .palace-opponent.active-turn,
body.in-game .traitres-player.active-turn {
    border-color: var(--tbl-accent) !important;
    box-shadow: inset 0 0 0 1px var(--tbl-accent) !important;
}

/* Nom du joueur : lisible, jamais tronqué à l'excès */
body.in-game .other-player .player-name,
body.in-game .other-player .opponent-name {
    color: var(--tbl-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Boutons : aplats francs, hiérarchie claire
   -------------------------------------------------------------------------- */
body.in-game .action-buttons {
    background: var(--tbl-panel) !important;
    border: 1px solid var(--tbl-line-strong) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    border-radius: 14px !important;
}

body.in-game .action-buttons .btn {
    border-radius: 10px !important;
    font-weight: 650;
    letter-spacing: 0.1px;
}

body.in-game .btn-primary {
    background: var(--tbl-accent) !important;
    border: 1px solid var(--tbl-accent) !important;
    color: #07221c !important;
}

body.in-game .btn-secondary {
    background: var(--tbl-panel-2) !important;
    border: 1px solid var(--tbl-line-strong) !important;
    color: var(--tbl-ink) !important;
}

body.in-game .btn-danger {
    background: var(--tbl-danger) !important;
    border: 1px solid var(--tbl-danger) !important;
    color: #fff !important;
}

body.in-game .btn:disabled {
    opacity: 0.45;
    filter: none;
}

/* --------------------------------------------------------------------------
   5. Cartes : nettes, ombre minimale, liseré de sélection franc
   -------------------------------------------------------------------------- */
body.in-game .cardv {
    border-radius: 8px !important;
    border: 1px solid #d7dbe2 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

body.in-game .cardv.selected,
body.in-game .hand-card.selected .cardv {
    border-color: var(--tbl-accent) !important;
    box-shadow: 0 0 0 2px var(--tbl-accent) !important;
    transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   6. Tableau de score des dés
   -------------------------------------------------------------------------- */
body.in-game .score-sheet {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

body.in-game .score-sheet td,
body.in-game .score-sheet th {
    border: 1px solid var(--tbl-line) !important;
}

body.in-game .score-sheet th {
    background: #262a3c !important;
    color: var(--tbl-ink-soft);
    font-weight: 700;
}

body.in-game .score-sheet td:first-child,
body.in-game .score-sheet th:first-child {
    background: #1e2130 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--tbl-line-strong) !important;
    color: var(--tbl-ink);
    text-align: left;
    padding-left: 8px;
}

body.in-game .score-sheet tr.total-row td,
body.in-game .score-sheet tr:last-child td {
    background: #262a3c !important;
    font-weight: 700;
    color: var(--tbl-gold);
}

/* Tour actif dans le tableau : colonne teintée discrètement */
body.in-game .score-sheet th.current-col,
body.in-game .score-sheet td.current-col {
    background: rgba(0, 212, 170, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 212, 170, 0.45) !important;
}

/* --------------------------------------------------------------------------
   7. Typographie : une seule échelle dans toute la partie
   -------------------------------------------------------------------------- */
body.in-game {
    color: var(--tbl-ink);
}

body.in-game #view-game {
    font-size: 14px;
    line-height: 1.35;
}

body.in-game .hand-label,
body.in-game .variants-title,
body.in-game .round-info,
body.in-game .pile-info {
    color: var(--tbl-ink-soft);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.2px;
}

/* --------------------------------------------------------------------------
   8. Traîtres : le fond image reste, mais le voile s'éclaircit pour la lecture
   -------------------------------------------------------------------------- */
body.in-game .traitres-board::before {
    background: rgba(10, 11, 18, 0.55) !important;
}

/* --------------------------------------------------------------------------
   9. Respect des préférences d'accessibilité
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.in-game .cardv,
    body.in-game .other-player {
        transition: none !important;
    }
}