/* Turn highlight override: full border + text accent */
.seat.turn .name-chips{
  box-shadow: 0 16px 28px rgba(0,0,0,.85),
    0 0 0 2px color-mix(in oklab, var(--turn-hot) 85%, #fff),
    0 0 18px color-mix(in oklab, var(--turn-color) 70%, transparent),
    0 0 40px color-mix(in oklab, var(--turn-deep) 55%, transparent),
    inset 0 0 0 2px color-mix(in oklab, var(--turn-hot) 92%, #fff),
    inset 0 0 18px color-mix(in oklab, var(--turn-color) 65%, transparent),
    0 0 0 var(--cb-thk) var(--_glowA) inset,
    0 0 22px var(--_glowB) inset !important;
}

.seat.turn .name-chips .player-name,
.seat.turn .name-chips .chips,
.seat.turn .name-chips .stack{
  color: color-mix(in oklab, var(--turn-hot) 70%, #fff) !important;
  font-family: "Montserrat", "Roboto", sans-serif !important;
  letter-spacing: 0.8px;
  text-shadow:
    0 0 6px color-mix(in oklab, var(--turn-color) 75%, transparent),
    0 2px 0 rgba(0,0,0,.6) !important;
}

@keyframes turnBorderSweep{
  to { background-position: 200% 0; }
}

.seat.turn .name-chips::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  padding: 2px !important;
  background:
    linear-gradient(90deg,
      transparent 0 40%,
      color-mix(in oklab, var(--turn-hot) 95%, #fff) 46%,
      color-mix(in oklab, var(--turn-color) 85%, #fff) 52%,
      transparent 58% 100%) !important;
  background-size: 300% 100% !important;
  background-position: 0 0 !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  filter:
    drop-shadow(0 0 6px color-mix(in oklab, var(--turn-color) 80%, transparent))
    drop-shadow(0 0 14px color-mix(in oklab, var(--turn-hot) 70%, transparent)) !important;
  animation: turnBorderSweep 1.4s linear infinite !important;
}

html {
    font-family: sans-serif;
}

  .poker-table {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    width: 820px;
    height: 452px;
  background-image: url("/static/images/poker_table.png"); /* <--- chemin ABSOLU */
      background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* ou 'cover' selon l'effet désiré */
    border: none !important;
    box-shadow: none !important; /* au cas où c’est un ombrage */
  }

  .table-container,
.poker-table-wrapper {
  border: none !important;
  box-shadow: none !important;
}

/* remplace "#poker_table .deck" par le sélecteur réel utilisé dans ton DOM :
   inspecte avec les outils devtools pour trouver l’élément à masquer */
   #poker_table .deck,
   #poker_table #deck {
     display: none !important;
   }   
  
.seat {
    height: 120px;
    position: absolute;
    width: 120px;
}

/* Inactive seats (not used for this table) */
.seat.inactive-seat {
  pointer-events: none;
}
.seat.inactive-seat .name-chips{
  background: linear-gradient(135deg, #0c1a24, #081018);
  border: 2px solid rgba(25, 231, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(25, 231, 255, 0.25),
    0 0 12px rgba(25, 231, 255, 0.18),
    inset 0 0 16px rgba(0, 0, 0, 0.65);
}
.seat.inactive-seat .name-chips::before,
.seat.inactive-seat .name-chips::after{
  content: none !important;
}
.seat.inactive-seat .player-name,
.seat.inactive-seat .chips,
.seat.inactive-seat .bet,
.seat.inactive-seat .holecards,
.seat.inactive-seat .holecards .card{
  opacity: 0;
}

.name-chips1 {
  background-color: gray;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  height: 50px;
  position: absolute;
  text-align: center;
  top: 65px;
  width: 100px;
}

.name-chips {
  background: linear-gradient(135deg, #555, #222);
  border-radius: 10px;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 33px;   /* Pour centrer le texte verticalement */
  letter-spacing: 0.5px;
  height: 120px;
  position: absolute;
  text-align: center;
  top: 65px;
  width: 123px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 1;            /* Au-dessus des placeholders */
}

.player-name {
    width: 100%;
}

/* ==== SEATS: nom + stack sur une ligne, mise en blanc en dessous ==== */

/* On garde EXACTEMENT la même taille du panneau */
/* Taille identique pour tous les panneaux siège */
/* Panneau commun à tous les sièges */
.poker-table .seat .name-chips,
#poker_table .seat .name-chips{
  width: 123px;
  height: 155px;
  padding: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* --- 5 SIÈGES DU HAUT (on laisse comme tu aimes) --- */
.poker-table .seat:nth-child(-n+5) .name-chips,
#poker_table .seat:nth-child(-n+5) .name-chips{
  top: -10px;   /* garde ta valeur actuelle */
}

/* --- 5 SIÈGES DU BAS (on les descend) --- */
.poker-table .seat:nth-child(n+6) .name-chips,
#poker_table .seat:nth-child(n+6) .name-chips{
  top: 80px;    /* ↓ monte/descend toute la rangée du bas */
}

/* Sièges du haut : garde la position actuelle */
.seat.seat-0 .name-chips,
.seat.seat-1 .name-chips,
.seat.seat-2 .name-chips,
.seat.seat-3 .name-chips,
.seat.seat-4 .name-chips{
  top: -70px !important;   /* ta valeur actuelle qui te plaît */
}

/* Sièges du bas : on les descend plus bas */
.seat.seat-5 .name-chips,
.seat.seat-6 .name-chips,
.seat.seat-7 .name-chips,
.seat.seat-8 .name-chips,
.seat.seat-9 .name-chips{
  top: 30px !important;   /* à ajuster : 30, 50, etc. selon ce que tu veux */
}

/* Le panneau du siège */
.seat .name-chips{
  position: relative;      /* référence pour le top/left des enfants */
  width: 123px;            /* tes valeurs actuelles */
  height: 200px;
}

/* NOM — hauteur modifiable ici */
.seat .name-chips .player-name{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;               /* ⇦ TU MODIFIES CETTE VALEUR */
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  color: #eaf9ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}

/* STACK — hauteur modifiable ici */
.seat .name-chips .chips{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;               /* ⇦ TU MODIFIES CETTE VALEUR */
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}

/* === Rangée du bas (seats 5–9) : nom en bas, stack au-dessus, mise en haut === */
#seat5 .name-chips .player-name,
#seat6 .name-chips .player-name,
#seat7 .name-chips .player-name,
#seat8 .name-chips .player-name,
#seat9 .name-chips .player-name{
  top: auto !important;
  bottom: 10px !important;
}

#seat5 .name-chips .chips,
#seat6 .name-chips .chips,
#seat7 .name-chips .chips,
#seat8 .name-chips .chips,
#seat9 .name-chips .chips{
  top: auto !important;
  bottom: 50px !important;
}

#seat5 .bet,
#seat6 .bet,
#seat7 .bet,
#seat8 .bet,
#seat9 .bet{
  top: 150px !important;
}

/* === BET centré et TOUJOURS au-dessus des cartes === */
/* Position manuelle de la mise dans le siège */
.seat .bet{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;  /* on ne bouge plus en Y */

  top: 85px !important;  /* hauteur par défaut (sièges du haut) */

  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900;
  text-shadow:
    0 0 2px #000,
    -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000,
    0 0 10px rgba(0,0,0,.35);
}

/* Assure que les cartes restent en dessous du bet, même pendant le flip */
.seat .holecards,
.seat .holecards .card,
.seat .holecards .card::after{
  position: relative;
  z-index: 3 !important;
}

/* === FOLD : tout griser, y compris la mise === */
.seat.status-fold :is(
  .holecard1,.holecard2,.card,.player-cards,
  .bet,.bet-chip,.dealer-btn,.dealer,.action-chip
){
  filter: grayscale(1) opacity(.45) !important;
}

.card {
    width: 70px;
    height: 100px;
    background-size: 100%;
    border-radius: 4px;
    z-index: 2;            /* Au-dessus des placeholders */
    /* ... */
  }  

.holecards {
    float: left;
    position: absolute;
    top: 50px;
    z-index: 3;            /* Au-dessus des placeholders */
}

.holecard1 {
  position: absolute;
  left: 0px;
  top: -25px;    /* Position initiale */
  z-index: 3;            /* Au-dessus des placeholders */
  width: 80px;
  height: 115px;
}

.holecard2 {
  position: absolute;
  left: 0px;   /* Même position horizontale */
  top: 90px;   /* Décalage vertical pour qu'elles soient l'une sous l'autre */
  z-index: 3;            /* Au-dessus des placeholders */
  width: 80px;
  height: 115px;
}



.bet {
    color: rgb(255, 170, 100);
    font-size: 12px;
    left: 5px;
    position: absolute;
    z-index: 2;            /* Au-dessus des placeholders */
    top: 100px;
    bottom: 100px;   text-shadow: -1px 0     black, 0 1px     black, 1px 0     black, 0 -1px     black;
    text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
}

/* ---------------------- */
/* 5 joueurs sur la rangée du haut : seats 0 à 4 */
/* ---------------------- */
/* ---------------------- */
/* 5 joueurs sur la rangée du haut : seats 0 à 4 */
/* ---------------------- */
/* 5 joueurs sur la rangée du haut : seats 0 à 4 */
#seat0 {
    left: 59px;
    top: -50px;
    overflow: visible;
  }
  .seat0-button {
    left: 110px; /* anciennement 80 => 80 + 72 = 152 */
    top: 270px;
  }
  #seat0 .bet {
    top: 100px;
  }
  
  #seat1 {
    left: 185px; /* 120 + 72 */
    top: -50px;
  }
  .seat1-button {
    left: 235px; /* 200 + 72 */
    top: 270px;
  }
  #seat1 .bet {
    top: 100px;
  }
  
  #seat2 {
    left: 311px; /* 240 + 72 */
    top: -50px;
  }
  .seat2-button {
    left: 362px; /* 320 + 72 */
    top: 270px;
  }
  #seat2 .bet {
    top: 100px;
  }
  
  #seat3 {
    left: 437px; /* 360 + 72 */
    top: -50px;
  }
  .seat3-button {
    left: 490px; /* 440 + 72 */
    top: 270px;
  }
  #seat3 .bet {
    top: 100px;
  }
  
  #seat4 {
    left: 563px; /* 480 + 72 */
    top: -50px;
  }
  .seat4-button {
    left: 615px; /* 560 + 72 */
    top: 270px;
  }
  #seat4 .bet {
    top: 100px;
  }
  
  /* 5 joueurs sur la rangée du bas : seats 5 à 9 */
  #seat9 {
    left: 59px;
    top: 225px;
  }
  .seat9-button {
    left: 95px;
    top: 575px !important;
  }
  #seat9 .bet {
    top: 40px !important;
  }
  
  #seat8 {
    left: 185px;
    top: 225px;
  }
  .seat8-button {
    left: 221px;
    top: 575px !important;
  }
  #seat8 .bet {
    top: 40px !important;
  }
  
  #seat7 {
    left: 311px;
    top: 225px;
  }
  .seat7-button {
    left: 347px;
    top: 525px;
  }
  #seat7 .bet {
    top: 40px !important;
  }
  
  #seat6 {
    left: 437px;
    top: 225px;
  }
  .seat6-button {
    left: 474px;
    top: 525px;
  }
  #seat6 .bet {
    top: 40px !important;
  }
  
  #seat5 {
    left: 563px;
    top: 225px;
  }
  .seat5-button {
    left: 600px;
    top: 525px;
  }
  #seat5 .bet {
    top: 40px !important;
  }   

/* Holecards « normales » dans chaque siège */
/* ─────────────────────────────────────────────
   1) Cartes autour de la table (seat1→seat9)
   ───────────────────────────────────────────── */
/* ── Perspective & préparation 3D ── */
.seat .holecards {
  perspective: 800px;
}
.seat .holecards .card {
  opacity: 0;
  transition: opacity 1.5s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  position: relative;
  z-index: 1 !important;
}

/* fade-in du back */
.seat .holecards .card.visible {
  opacity: 1;
}

/* front face, initialement derrière */
.seat .holecards .card::after {
  content: "";
  position: absolute; top:0; left:0;
  width:100%; height:100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: rotateY(-180deg);
  transition: transform 0.6s ease, opacity 0.6s ease;
  backface-visibility: hidden;
  z-index: 1 !important;
}

/* au reveal, on tourne la face devant */
.seat .holecards .card.revealed::after {
  opacity: 1;
  transform: rotateY(0deg);
  z-index: 1 !important;
}
  
  /* positionnement des deux cartes dans chaque siège */
  .seat .holecards .holecard1 {
    position: absolute;
    top: -20px;
    left: 0px;
    width: 80px;
    height: 95px !important;
      z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
  }
  .seat .holecards .holecard2 {
    position: absolute;
    top: 75px;
    left: 0px;
    width: 80px;
    height: 96px !important;
          z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
  }
  
  /* ─────────────────────────────────────────────
     2) Zone bottom-left (ton propre siège)
     ───────────────────────────────────────────── */
  /* Assigne la class .my-seat à ton <div id="seatX"> */
  .seat.my-seat .holecards {
    position: fixed !important;
    left: 120px !important;
    top: 470px !important;
    width: 500px !important;
    height: 300px !important;
  }
  
  /* dos de carte personnalisé en bottom-left */
  .seat.my-seat .holecards .holecard1 .card {
    background-image: url('static/images/custom_I.png') !important;
    z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
  }
  .seat.my-seat .holecards .holecard2 .card {
    background-image: url('static/images/custom_M.png') !important;
    z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
  }
  
  /* ajustements de position/taille pour ton affichage bottom-left */
  .seat.my-seat .holecards .holecard1 {
    top: 60px !important;
    left: -63px !important;
    width: 118px !important;
    height: 142px !important;
          z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */

  }
  .seat.my-seat .holecards .holecard2 {
    top: 60px !important;
    left: 65px !important;
    width: 118px !important;
    height: 142px !important;
          z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */

  }
  

#board {
    left: 800px;
    position: relative;
    top:  -170px;
    width: 600px;
    height: 170px;
    left: 50%;
    transform: translateX(-60%);
    z-index: 2;            /* Au-dessus des placeholders */
}

/* Emplacement de carte : le placeholder */
.board1-slot {
  position: relative;
  width: 100px;          /* Ajustez selon la taille désirée */
  height: 140px;         /* Ajustez selon la taille désirée */
  background-image: url('/static/images/placeholder.png'); /* Photo ou design de l'emplacement */
  background-size: cover;
  background-position: center;
  border: 2px dashed #aaa; /* Indique un emplacement vide */
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  /* Optionnel : une transition pour le placeholder */
  transition: background-color 0.3s ease;
}

/* === RAIL DES CARTES RÉELLES (aligne sur les placeholders) ========== */
#board{
  position: absolute !important;
  top: -184px !important;         /* même hauteur que #board-placeholders */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 630px !important;        /* même largeur que #board-placeholders */
  height: 150px !important;
  display: flex !important;
  justify-content: space-around !important;  /* ou: justify-content:center; gap:16px; */
  align-items: center !important;
  z-index: 3 !important;          /* au-dessus des placeholders (z-index:1) */
}

/* Normalise CHAQUE carte du board (plus d’absolu ni d’offsets) */
#flop1, #flop2, #flop3, #turn, #river,
.boardcard, .card.boardcard{
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  margin: 0 !important;
  width: 120px !important;
  height: 147px !important;
  flex: 0 0 120px !important;     /* largeur fixe dans le flex */
  border-radius: 14px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Supprime l’écartement parasite */
#board .card{ margin-right: 0 !important; }

/* Si tu utilises <img> à l’intérieur d’une div .boardcard */
#flop1 img, #flop2 img, #flop3 img, #turn img, #river img,
#board .boardcard img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:14px;
}


/* === BOARD PLACEHOLDER — même design que .name-chips (sièges) === */
/* dimensions & fadeIn restent les tiens */
.board-placeholder{
  position: relative;
  width: 120px;
  height: 147px;
  background-position: center;
  background-size: cover;

  /* verre fumé identique aux sièges */
  background:
    radial-gradient(160% 140% at 50% 50%, transparent 60%, rgba(0,0,0,.25) 86%),
    radial-gradient(90% 70%  at 50% 45%, var(--center-glow, rgba(0,210,255,.22)), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,calc(var(--panel-alpha,.60)*.85)),
                           rgba(0,0,0,var(--panel-alpha,.60))) !important;

  border-radius: 15px;            /* tu gardes ton rayon */
  border: 1px solid transparent;  /* le cadre néon arrive via ::after */
  box-shadow: none;
  isolation: isolate;
  overflow: hidden;

  opacity: 0;                     /* ton fondu d’origine */
  animation: fadeIn 1.5s ease forwards;
}


/* scanlines verticales lentes + grain doux (mêmes que sièges) */
.board-placeholder::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,var(--scan-alpha,.06)) 0 1px,
                                         transparent 1px var(--scan-gap,4px)),
    radial-gradient(100% 70% at 50% 45%, rgba(255,255,255,.04), transparent 60%);
  opacity:.28;
  mix-blend-mode: screen;
  animation: seatScanY var(--scan-speed,14s) linear infinite;
}

/* cadre néon turquoise fin + léger pulse (identique sièges) */
.board-placeholder::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding: 2px; /* épaisseur du trait */
  background: linear-gradient(90deg, var(--seat-neon,#19e7ff), #0bd0ff, var(--seat-neon,#19e7ff));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: neonPulse 2.4s ease-in-out infinite;
}

/* Place le rail, on garde tes dimensions */
#board-placeholders{
  position:absolute;
  top:-184px;
  left:50%;
  transform:translateX(-50%);
  width:630px;
  height:150px;
  display:flex;
  justify-content:space-around; /* ou gap:16px; justify-content:center; */
  align-items:center;
  z-index:1;
}

/* aligne les cartes comme les placeholders */
#flop1,#flop2,#flop3,#turn,#river{
  position:static !important;
  left:auto !important;
  width:120px !important;
  height:147px !important;
  flex:0 0 120px;
}

/* si ce sont des <img> dans ces divs */
#flop1 img,#flop2 img,#flop3 img,#turn img,#river img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:14px;
}

/* --- Board placeholders thème ORANGE NÉON --- */
#board-placeholders.board-orange{
  --ora-base: #fe833c;                                   /* orange principal (néon) */
  --ora-hot:  color-mix(in oklab, var(--ora-base) 92%, #fff);
  --ora-deep: color-mix(in oklab, var(--ora-base) 88%, #000);
}

/* fond “glass” + halo chaud lisible */
#board-placeholders.board-orange .board-placeholder{
  background:
    /* halo central chaud (donne du relief sans cramer) */
    radial-gradient(120% 90% at 50% 45%,
      color-mix(in oklab, var(--ora-hot) 22%, #e8aaaa 6%) 0%,
      transparent 62%),
    /* vignette douce pour garder le contraste des bords */
    radial-gradient(160% 140% at 50% 50%, transparent 64%, rgba(0,0,0,.18) 86%),
    /* voile sombre modéré (évite le “trop sombre”) */
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.7)) !important;
}

/* scanlines subtiles + reflets internes orange */
#board-placeholders.board-orange .board-placeholder::before{
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    radial-gradient(100% 70% at 50% 45%, color-mix(in oklab, var(--ora-hot) 18%, transparent), transparent 60%);
  opacity:.32;
}

/* cadre néon orange + glow propre */
#board-placeholders.board-orange .board-placeholder::after{
  background: linear-gradient(90deg, #ed9645, var(--ora-base), #FFD2A8);
  box-shadow:
    0 0 18px color-mix(in oklab, var(--ora-base) 78%, transparent),
    0 0 34px color-mix(in oklab, var(--ora-deep) 50%, transparent);
}



/* L'overlay qui affichera la carte réelle */
.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;                   /* Caché par défaut */
  transition: opacity 0.3s ease; /* Fade-in */
  background-size: cover;
  background-position: center;
  border-radius: 8px;           /* Pour s'aligner sur le parent */
}


#board .card {
  margin-right: 50px;  /* Ajuste la valeur selon l'espacement désiré */
}

#board .card:not(:last-child) {
  margin-right: 50px;
}

#pot {
  position: absolute;
  left: 50%;
  transform: translateX(-60%);
  top: 180px;
  color: white;
  font-size: 35px;
  text-transform: uppercase;
  font-family: "Bangers", "Montserrat", sans-serif;
  letter-spacing: 1px;
  text-align: center;
  width: auto;
  z-index: 1250;
}

#pot.pot-hidden {
  visibility: hidden;
}

#pot.pot-left {
  left: 50%;
}

.boardcard {
    height: 90px;
    left: 0px;
    background-repeat: no-repeat;
    position: absolute;
    top: -10px;
    width: 50px;
}

.card.boardcard {
  width: 100px;
  height: 145px;
  background-size: cover; /* Ou contain */
  border-radius: 4px;
  right: 400px;
}

#burn1 {
    left: 600px;
    rotate: -18deg;
    display: none !important;
    visibility: hidden !important;
}
#burn2 {
    left: 610px;
    display: none !important;
    visibility: hidden !important;
}
#burn3 {
    left: 620px;
    rotate: 15deg;
    display: none !important;
    visibility: hidden !important;
}

#game-container {
    position: relative;   /* Les positions absolues des enfants seront relatives à ce conteneur */
    width: 800px;         /* Largeur fixe à adapter selon ton design */
    margin: 0 auto;       /* Centre horizontalement */
    height: 600px;        /* Hauteur fixe, à ajuster selon ton design */
  }

#poker-game-wrapper{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px calc(var(--rail-w) + var(--rail-gap)) 40px;
  z-index: 2;
}

#ad-layer{
  /* Desktop rails stretch to game edge */
  --game-width: 800px;
  --rail-gap: 12px;
  --rail-max-w: 700px;
  --rail-w: clamp(260px, calc((100vw - var(--game-width)) / 2 - var(--rail-gap)), var(--rail-max-w));
  --rail-top: 40px;
  --rail-bottom: 40px;
}

#ad-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.ad-rail,
.ad-banner{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}
.ad-rail{
  top: var(--rail-top);
  width: var(--rail-w);
  height: calc(100vh - var(--rail-top) - var(--rail-bottom));
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.3);
  background: rgba(8,12,20,.75);
  box-shadow: inset 0 0 24px rgba(0,0,0,.55), 0 12px 24px rgba(0,0,0,.45);
  display: block;
}
.ad-rail-left{ left: var(--rail-gap); }
.ad-rail-right{ right: var(--rail-gap); }

.ad-banner{
  left: var(--rail-gap);
  right: var(--rail-gap);
  height: 84px;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.3);
  background: rgba(8,12,20,.75);
  box-shadow: inset 0 0 24px rgba(0,0,0,.55), 0 12px 24px rgba(0,0,0,.45);
  display: none;
}
.ad-banner-top{ top: 10px; }
.ad-banner-bottom{ bottom: 10px; }

.ad-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ad-track{
  display: grid;
  gap: 12px;
  padding: 12px;
  color: #f6f7ff;
  font: 800 14px/1.2 "Fredoka", "Trebuchet MS", sans-serif;
  text-transform: uppercase;
}
.ad-track-vertical{
  animation: adScrollY 16s linear infinite;
}
.ad-track-horizontal{
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: adScrollX 12s linear infinite;
}

.ad-item{
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  text-align: center;
  letter-spacing: .8px;
}
.ad-item span{
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #b8d9ff;
}
.ad-item.alt{
  background: linear-gradient(135deg, rgba(95,255,190,.12), rgba(255,170,70,.08));
  color: #eafcff;
}

@keyframes adScrollY{
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes adScrollX{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 900px){
  #poker-game-wrapper{
    padding: 70px 10px 130px; /* extra space for bottom ad banner */
  }
  .ad-rail{ display: none; }
  .ad-banner{ display: block; }
  .ad-banner-bottom{ bottom: 16px; } /* add breathing room vs game */

  /* Mobile: keep bottom cards + buttons above the ad banner */
  :is(#poker_table, .poker-table){
    --my-cards-bottom: 120px;
  }
  .seat.my-seat .holecards{
    bottom: var(--my-cards-bottom) !important;
    top: auto !important;
  }
  .my-hole-cards{
    bottom: var(--my-cards-bottom) !important;
  }

  /* Mobile: tweak button offsets */
  :root{
    --mobile-ui-shift-left: 80px;   /* %, T, 30, Pause, ?, SOS */
    --mobile-action-shift-right: 80px !important; /* DROP / CHECK / RAISE */
  }
  #odds-help-btn{ left: calc(86px - var(--mobile-ui-shift-left)) !important; }
  #btn-time     { left: calc(146px - var(--mobile-ui-shift-left)) !important; }
  #btn-add30    { left: calc(206px - var(--mobile-ui-shift-left)) !important; }
  #rules-help-btn{ left: calc(600px - var(--mobile-ui-shift-left)) !important; }
  #sos-help-btn { left: calc(660px - var(--mobile-ui-shift-left)) !important; }
  #action-options #break-btn{ left: calc(50% - var(--mobile-ui-shift-left)) !important; }

  #fold-button { right: calc(116px - var(--mobile-action-shift-right)) !important; }
  #call-button { right: calc(167px - var(--mobile-action-shift-right)) !important; }
  #custom-raise{ left: calc(140px + var(--mobile-action-shift-right)) !important; }
  #raise-button{ right: calc(116px - var(--mobile-action-shift-right)) !important; }
}

#game-container{ z-index: 2; }

#action-options {
    position: absolute;
    bottom: 20px;            /* 20px du bas du conteneur */
    right: 20px;             /* 20px du côté droit */
    display: flex;
    flex-direction: row;
    gap: 10px;
    opacity: 1 !important;
    transition: opacity 1.5s ease;
  }  

#rules-help-btn{
  position: absolute;
  left: 610px;
  top: 256px;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #35c7ff;
  background: radial-gradient(circle at 30% 30%, #fff2c4, #ffb347 60%, #ff7a5c 100%);
  color: #1f2a3a;
  font: 800 18px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 16px rgba(53,199,255,.45);
}
#rules-help-btn:hover{ filter: brightness(1.1); }
#rules-help-btn:active{ transform: translateX(-50%) scale(.96); }

#sos-help-btn{
  position: absolute;
  left: 660px;
  top: 256px;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,120,120,.9);
  background: linear-gradient(180deg, #ff8a8a, #ff4f6b 70%, #c9304f 100%);
  color: #1a0f16;
  font: 900 28px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 0 16px rgba(255,120,120,.45);
  letter-spacing: .5px;
}
#sos-help-btn:hover{ filter: brightness(1.06); }
#sos-help-btn:active{ transform: translateX(-50%) scale(.96); }

@media (min-width: 901px){
  #rules-help-btn{ left: auto !important; right: 78px !important; }
  #sos-help-btn{ left: auto !important; right: 16px !important; }
}

#time-rules-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}
#time-rules-modal.open{ display: flex; }
#rules-modal,
#add30-rules-modal,
#add30-confirm-modal,
#hide-rules-modal,
#show-rules-modal,
#sos-modal,
#sos-chat-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}
#rules-modal.open,
#add30-rules-modal.open,
#add30-confirm-modal.open,
#hide-rules-modal.open,
#show-rules-modal.open,
#sos-modal.open,
#sos-chat-modal.open{ display: flex; }
#rules-modal .rules-backdrop,
#time-rules-modal .rules-backdrop,
#add30-rules-modal .rules-backdrop,
#add30-confirm-modal .rules-backdrop,
#hide-rules-modal .rules-backdrop,
#show-rules-modal .rules-backdrop,
#sos-modal .rules-backdrop,
#sos-chat-modal .rules-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(46,240,255,.25), transparent 55%),
    radial-gradient(120% 90% at 90% 0%, rgba(255,179,71,.25), transparent 55%),
    rgba(4,8,16,.78);
  backdrop-filter: blur(2px);
}
#rules-modal .rules-card,
#time-rules-modal .rules-card,
#add30-rules-modal .rules-card,
#add30-confirm-modal .rules-card,
#hide-rules-modal .rules-card,
#show-rules-modal .rules-card,
#sos-modal .rules-card,
#sos-chat-modal .rules-card{
  position: relative;
  width: min(620px, 92vw);
  max-height: 78vh;
  overflow: auto;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(53,199,255,.12), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(255,179,71,.12), transparent 55%),
    linear-gradient(180deg, #0b1220, #0a0f1a 60%, #0b0f18 100%);
  border: 2px solid rgba(53,199,255,.7);
  color: #e9f4ff;
  box-shadow: 0 22px 60px rgba(0,0,0,.65), 0 0 0 6px rgba(53,199,255,.08);
  font-size: 15px;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
}
#rules-modal.open .rules-card,
#time-rules-modal.open .rules-card,
#add30-rules-modal.open .rules-card,
#add30-confirm-modal.open .rules-card,
#hide-rules-modal.open .rules-card,
#show-rules-modal.open .rules-card,
#sos-modal.open .rules-card,
#sos-chat-modal.open .rules-card{
  animation: rulesPop .24s ease-out;
}
#rules-modal .rules-close,
#time-rules-modal .rules-close,
#add30-rules-modal .rules-close,
#add30-confirm-modal .rules-close,
#hide-rules-modal .rules-close,
#show-rules-modal .rules-close,
#sos-modal .rules-close,
#sos-chat-modal .rules-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 2px solid #ff93b2;
  background: linear-gradient(180deg, #ff5b88, #ff2f6f);
  color: #fff;
  font: 800 14px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
#rules-modal .rules-agent-toggle{
  position: absolute;
  top: 10px;
  right: 50px;
  border: 2px solid rgba(255,210,122,.7);
  border-radius: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #2b1b08, #1b1208);
  color: #ffe0a8;
  font: 800 12px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
#rules-modal h2,
#time-rules-modal h2,
#add30-rules-modal h2,
#add30-confirm-modal h2,
#hide-rules-modal h2,
#show-rules-modal h2{
  margin: 0 0 6px 0;
  font: 800 22px/1.2 "Fredoka", "Trebuchet MS", sans-serif;
  color: #eaf7ff;
  letter-spacing: .2px;
}
#rules-modal .rules-sub,
#time-rules-modal .rules-sub,
#add30-rules-modal .rules-sub,
#add30-confirm-modal .rules-sub,
#hide-rules-modal .rules-sub,
#show-rules-modal .rules-sub{
  margin: 0 0 14px 0;
  color: #b9cde6;
  font-size: 15px;
}
#rules-modal .rules-steps,
#time-rules-modal .rules-steps,
#add30-rules-modal .rules-steps,
#add30-confirm-modal .rules-steps,
#hide-rules-modal .rules-steps,
#show-rules-modal .rules-steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  counter-reset: rules-step;
}
#rules-modal .rules-step,
#time-rules-modal .rules-step,
#add30-rules-modal .rules-step,
#add30-confirm-modal .rules-step,
#hide-rules-modal .rules-step,
#show-rules-modal .rules-step{
  position: relative;
  border: 1px solid rgba(53,199,255,.25);
  border-radius: 14px;
  padding: 12px 12px 12px 44px;
  background: linear-gradient(180deg, rgba(8,14,26,.9), rgba(8,12,20,.9));
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
#rules-modal .rules-step::before,
#time-rules-modal .rules-step::before,
#add30-rules-modal .rules-step::before,
#add30-confirm-modal .rules-step::before,
#hide-rules-modal .rules-step::before,
#show-rules-modal .rules-step::before{
  counter-increment: rules-step;
  content: counter(rules-step);
  position: absolute;
  left: 12px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 13px/1 "Fredoka", "Trebuchet MS", sans-serif;
  color: #07121f;
  background: linear-gradient(180deg, #8af5ff, #35c7ff);
  box-shadow: 0 6px 14px rgba(53,199,255,.45);
}
#rules-modal .step-title,
#time-rules-modal .step-title,
#add30-rules-modal .step-title,
#add30-confirm-modal .step-title,
#hide-rules-modal .step-title,
#show-rules-modal .step-title,
#sos-modal .step-title{
  font: 800 12px/1.2 "Fredoka", "Trebuchet MS", sans-serif;
  color: #7fe7ff;
  margin-bottom: 4px;
}
#rules-modal .step-text,
#time-rules-modal .step-text,
#add30-rules-modal .step-text,
#add30-confirm-modal .step-text,
#hide-rules-modal .step-text,
#show-rules-modal .step-text,
#sos-modal .step-text{
  font-size: 13px;
  color: #d4e5f7;
}

/* TIME modal: slightly bigger + more breathing room for readability */
#time-rules-modal .rules-card{
  font-size: 16px;
}
#time-rules-modal .rules-sub{
  font-size: 16px;
  line-height: 1.4;
}
#time-rules-modal .rules-steps{
  gap: 12px;
}
#time-rules-modal .step-title{
  font-size: 13px;
}
#time-rules-modal .step-text{
  font-size: 14px;
  line-height: 1.45;
}
#time-rules-modal .time-rules-diagram{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #c7dcf5;
}

/* Allow clicking the disabled +30s button (to open its rules) */
#btn-add30.is-disabled{
  pointer-events: auto;
  cursor: pointer;
}
#reveal-hide-btn.is-disabled,
#reveal-show-btn.is-disabled{
  pointer-events: auto;
  cursor: pointer;
}

/* Add30 confirm modal buttons */
.add30-confirm-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.add30-confirm-btn{
  flex: 1;
  border-radius: 12px;
  border: 2px solid rgba(53,199,255,.6);
  background: linear-gradient(180deg, #0f182a, #0b1220);
  color: #e9f4ff;
  font: 800 14px/1 "Fredoka", "Trebuchet MS", sans-serif;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.add30-confirm-btn.yes{
  border-color: rgba(90,255,170,.7);
  box-shadow: 0 6px 16px rgba(58,200,120,.25);
}
.add30-confirm-btn.no{
  border-color: rgba(255,140,140,.7);
  box-shadow: 0 6px 16px rgba(255,110,110,.25);
}
.add30-confirm-btn:hover{ filter: brightness(1.06); }
.add30-confirm-btn:active{ transform: scale(.98); }

/* SOS modal actions */
.sos-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.sos-send,
.sos-cancel{
  flex: 1;
  border-radius: 12px;
  border: 2px solid rgba(53,199,255,.5);
  background: linear-gradient(180deg, #0f182a, #0b1220);
  color: #e9f4ff;
  font: 800 14px/1 "Fredoka", "Trebuchet MS", sans-serif;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.sos-send{
  border-color: rgba(255,140,140,.7);
  box-shadow: 0 6px 16px rgba(255,110,110,.25);
}
.sos-send:hover,
.sos-cancel:hover{ filter: brightness(1.06); }
.sos-send:active,
.sos-cancel:active{ transform: scale(.98); }

/* SOS chat modal */
.sos-chat-messages{
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(8,12,20,.75);
  border: 1px solid rgba(53,199,255,.2);
  max-height: 260px;
  overflow: auto;
  margin-top: 8px;
}
.sos-chat-msg{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
}
.sos-chat-msg.me{
  background: rgba(53,199,255,.18);
  border: 1px solid rgba(53,199,255,.35);
}
.sos-chat-msg.admin{
  background: rgba(255,179,71,.18);
  border: 1px solid rgba(255,179,71,.35);
}
.sos-chat-input{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}
.sos-chat-input input{
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(53,199,255,.35);
  background: #0b1220;
  color: #e9f4ff;
  padding: 0 10px;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
}
.sos-chat-input button{
  border-radius: 10px;
  border: 2px solid rgba(90,255,170,.7);
  background: linear-gradient(180deg, #0f182a, #0b1220);
  color: #e9f4ff;
  font: 800 13px/1 "Fredoka", "Trebuchet MS", sans-serif;
  padding: 8px 12px;
  cursor: pointer;
}
.sos-chat-input button:hover{ filter: brightness(1.06); }
.sos-chat-input button:active{ transform: scale(.98); }

/* Hover hint for clickable disabled buttons */
@keyframes disabledPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(53,199,255,.0); }
  50%      { transform: scale(1.05); box-shadow: 0 0 14px rgba(53,199,255,.6); }
}
#btn-add30.is-disabled:hover,
#reveal-hide-btn.is-disabled:hover,
#reveal-show-btn.is-disabled:hover,
#btn-time.is-disabled:hover{
  filter: brightness(1.05);
  animation: disabledPulse .9s ease-in-out infinite;
}
#rules-modal .rules-actions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
#rules-modal .rules-agent-panel{
  margin: 12px 0 16px;
  border: 1px solid rgba(46,240,255,.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8,14,26,.9), rgba(8,12,20,.9));
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  padding: 10px;
  display: none;
}
#rules-modal.show-agent .rules-agent-panel{ display: block; }
#rules-modal.show-agent .rules-section{ display: none; }
#rules-modal .rules-agent-messages{
  max-height: 200px;
  overflow: auto;
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
#rules-modal .rules-agent-msg{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.3;
}
#rules-modal .rules-agent-msg.user{
  background: rgba(46,240,255,.12);
  color: #eaf7ff;
  border: 1px solid rgba(46,240,255,.25);
  justify-self: end;
}
#rules-modal .rules-agent-msg.bot{
  background: rgba(255,179,71,.12);
  color: #ffe0a8;
  border: 1px solid rgba(255,179,71,.25);
  justify-self: start;
}
#rules-modal .rules-agent-input{
  display: flex;
  gap: 8px;
  align-items: center;
}
#rules-modal .rules-agent-input input{
  flex: 1 1 auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.04);
  color: #e9f4ff;
  font: 700 13px/1.2 "Fredoka", "Trebuchet MS", sans-serif;
}
#rules-modal .rules-agent-input input::placeholder{ color: #b9cde6; }
#rules-modal .rules-agent-input button{
  border: 2px solid rgba(255,210,122,.7);
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #2b1b08, #1b1208);
  color: #ffe0a8;
  font: 800 13px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
}
#rules-modal .action-chip{
  border: 1px solid rgba(255,179,71,.35);
  border-radius: 12px;
  padding: 9px 10px;
  background: linear-gradient(180deg, rgba(25,18,8,.6), rgba(15,12,8,.7));
  font-size: 13px;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
#rules-modal .action-chip span{
  display: inline-block;
  min-width: 60px;
  margin-right: 6px;
  color: #0b1c2a;
  font-weight: 800;
  background: linear-gradient(180deg, #ffd27a, #ffb347);
  padding: 2px 6px;
  border-radius: 999px;
}
#rules-modal .rules-bullets{
  margin: 6px 0 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: #d4e5f7;
}
#rules-modal .rules-bullets li{ margin: 4px 0; }
#rules-modal .rules-section{
  margin: 16px 0;
}
#rules-modal .rules-section h3{
  margin: 0 0 8px 0;
  font: 800 16px/1.2 "Fredoka", "Trebuchet MS", sans-serif;
  color: #7fe7ff;
}
#rules-modal ol{
  margin: 0 0 0 18px;
  padding: 0;
  font-size: 14px;
  color: #d4e5f7;
}
#rules-modal .hand-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
#rules-modal .hand-card{
  border: 1px solid rgba(53,199,255,.25);
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(8,14,26,.9), rgba(8,12,20,.9));
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
#rules-modal .hand-name{
  font: 800 13px/1.2 "Fredoka", "Trebuchet MS", sans-serif;
  margin-bottom: 6px;
  color: #eaf7ff;
}
#rules-modal .hand-cards{
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
#rules-modal .hand-cards img{
  width: 48px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  background: #0b1220;
  box-shadow: 0 8px 16px rgba(0,0,0,.35);
}
#rules-modal .rank-list{
  display: grid;
  gap: 8px;
}
#rules-modal .rank-item{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px 10px;
  align-items: center;
  border: 1px solid rgba(53,199,255,.25);
  border-radius: 12px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(8,14,26,.9), rgba(8,12,20,.9));
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
#rules-modal .rank-num{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 13px/1 "Fredoka", "Trebuchet MS", sans-serif;
  color: #07121f;
  background: linear-gradient(180deg,#8af5ff,#35c7ff);
  box-shadow: 0 6px 14px rgba(53,199,255,.45);
}
#rules-modal .rank-name{
  font-weight: 800;
}
#rules-modal .rank-desc{
  grid-column: 2;
  font-size: 12px;
  color: #b9cde6;
}

/* === Coach probabilites (bouton + modal) === */
#odds-help-btn{
  position: absolute;
  left: -300px;
  top: 256px;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #35c7ff;
  background: radial-gradient(circle at 30% 30%, #fff2c4, #ffb347 60%, #ff7a5c 100%);
  color: #1f2a3a;
  font: 800 18px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 16px rgba(53,199,255,.45);
}
#odds-help-btn:hover{ filter: brightness(1.1); }
#odds-help-btn:active{ transform: translateX(-50%) scale(.96); }

#odds-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}
#odds-modal.open{ display: flex; }
#odds-modal .odds-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(107,255,138,.2), transparent 55%),
    radial-gradient(120% 90% at 85% 0%, rgba(46,240,255,.2), transparent 55%),
    rgba(4,8,16,.82);
  backdrop-filter: blur(2px);
}
#odds-modal .odds-card{
  position: relative;
  width: min(520px, 92vw);
  max-height: 74vh;
  overflow: auto;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(46,240,255,.12), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(255,179,71,.12), transparent 55%),
    linear-gradient(180deg, #0b1220, #0a0f1a 60%, #0b0f18 100%);
  border: 2px solid rgba(46,240,255,.7);
  color: #e9f4ff;
  box-shadow: 0 22px 60px rgba(0,0,0,.65), 0 0 0 6px rgba(46,240,255,.08);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
}
#odds-modal .odds-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 2px solid #8af5ff;
  background: linear-gradient(180deg, #2ef0ff, #18bfe0);
  color: #04111d;
  font: 800 14px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
#odds-modal h2{
  margin: 0 0 6px 0;
  font: 800 20px/1.2 "Fredoka", "Trebuchet MS", sans-serif;
  color: #eaf7ff;
}
#odds-modal .odds-sub{
  margin: 0 0 12px 0;
  color: #b9cde6;
  font-size: 14px;
}
#odds-modal .odds-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
#odds-modal .odds-stat{
  border-radius: 14px;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(8,14,26,.9), rgba(8,12,20,.9));
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  text-align: center;
  border: 1px solid rgba(46,240,255,.25);
}
#odds-modal .odds-stat span{
  display: block;
  font-size: 11px;
  letter-spacing: .6px;
  color: #9fc5e8;
}
#odds-modal .odds-stat strong{
  display: block;
  font-size: 20px;
  color: #eaf7ff;
}
#odds-modal .odds-stat.win{ border-color: rgba(107,255,138,.35); }
#odds-modal .odds-stat.win strong{ color: #b9ffd1; }
#odds-modal .odds-stat.tie{ border-color: rgba(255,210,122,.35); }
#odds-modal .odds-stat.tie strong{ color: #ffe0a8; }
#odds-modal .odds-stat.lose{ border-color: rgba(255,120,120,.35); }
#odds-modal .odds-stat.lose strong{ color: #ffb3b3; }

#odds-modal .odds-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
#odds-modal .odds-pill{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.04);
  font-size: 12px;
  color: #d4e5f7;
}
#odds-modal .odds-note{
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #9fc5e8;
}
#odds-modal .odds-actions{
  display: flex;
  justify-content: flex-end;
}
#odds-modal .odds-recalc{
  border: 2px solid rgba(107,255,138,.7);
  border-radius: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #0f2a1a, #0b1d12);
  color: #b9ffd1;
  font: 800 13px/1 "Fredoka", "Trebuchet MS", sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.2);
}

@keyframes rulesPop{
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 560px){
  #rules-help-btn{ left: 220px; top: 256px; }
  #sos-help-btn{ left: 268px; top: 256px; }
  #odds-help-btn{ left: 40px; top: 256px; }
  #rules-modal .hand-cards img{ width: 36px; height: 52px; }
  #rules-modal .rank-item{ grid-template-columns: 30px 1fr; }
}

.action-button {
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 18px;
    height: 30px;
    padding: 10px 5px 0 5px;
    position: relative; /* Change absolute en relative */
    margin: 10px; /* Ajoute de l'espace autour de chaque bouton */
    transition: opacity 1.5s ease; /* Durée et easing du fondu */
    opacity: 1;
    display: block !important;
    right: 50px;
}

/* Animation fadeIn */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Classe pour l'effet fade-in initial */
.initial-fade {
  animation: fadeIn 1s forwards;
}

.action-button.fade-in {
  opacity: 1;
}

#action-options.visible {
  opacity: 1;
}

/* Quand on ne doit pas pouvoir cliquer : grisé + pas de pointer-events */
.action-button.disabled {
  opacity: 0.5;
  pointer-events: none;
}


#setup-options {
    height: 400px;
    left: 900px;
    position: absolute;
    top: 400px;
    width: 200px;
}

.setup-button {
    background-color: silver;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 18px;
    height: 30px;
    left: 0px;
    padding: 10px 5px 0px 5px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 160px;
}
.setup-button:hover {
    box-shadow: 3px 3px 4px #000000;
}

#speed-button {
    cursor: default;
    top: 50px;
}

select {
    background-color: silver;
    background: silver;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 3em;
}

#mode-button {
    top: 100px;
}

#help-button {
    top: 150px;
}

#check-button {
    top: 200px;
}

#game-response {
    border: none;
    color: black;
    font-size: 12px;
    height: 300px;
    left: 900px;
    position: absolute;
    text-align: center;
    top: 5px;
    width: 600px;
}

#production-code {
    color: black;
    font-size: 10px;
    height: 20px;
    left: 900px;
    position: absolute;
    text-align: right;
    top: 310px;
    width: 600px;
}

.response-normal {
    background-color: transparent;
}


.response-warning {
    background-color: #FF0000;
}

#quick-raises {
    background-color: transparent;
    border-radius: 4px;
    font-size: 18px;
    height: 75px;
    left: 25px;
    position: absolute;
    text-align: center;
    z-index: 9999;
    top: 600px;
    width: 350px;
}
#quick-raises a:link {
    color: white;
    text-decoration: none;
}
#quick-raises a:hover {
    color: white;
    text-shadow: 3px 3px 4px #000000;
}

#modal-box a:link {
    color: white;
    text-decoration: none;
}
#modal-box a:hover {
    color: white;
    text-shadow: 3px 3px 4px #000000;
}

#user-bar {
    position: absolute; 
    bottom: 20px;        /* Ajuste la hauteur selon ton interface */
    left: 50px;          /* Ajuste selon la largeur de ta table */
    width: 600px;        /* Ajuste à la largeur voulue */
    height: 120px;       /* Ajuste la hauteur voulue */
  }
  
  .user-card {
    float: left;
    width: 80px;         /* Largeur d’une “carte” */
    height: 120px;       /* Hauteur d’une “carte” */
    margin-right: 10px;
    background-size: cover; 
    cursor: pointer;
  }  
  
  #fold-button {
    display: block;
    width: 118px;
    height: 142px;
    margin: 10px;
  background-image: url("/static/images/custom_D.png"); /* <--- chemin ABSOLU */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    top: 530px;
    z-index: 3;
    right: 116px;
    border-radius: 10px !important;
  }

  #custom-raise {
    display: none;
    width: 118px;
    height: 142px;
    margin: 10px;
  background-image: url("/static/images/custom_X.png"); /* <--- chemin ABSOLU */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    left: 140px !important;
    top: 530px;
    z-index: 3;
    position: absolute;
    border-radius: 10px !important;
  }


  #fold-button:hover {
    opacity: 0.8; /* Réduit légèrement l'opacité au survol */
    /* Autres styles au survol */
  }
  
  #fold-button:active {
    transform: scale(0.95); /* Réduit légèrement la taille au clic */
    /* Autres styles au clic */
  }
  
  #call-button {
    display: block;
    width: 118px;
    height: 142px;
    margin: 10px;
  background-image: url("/static/images/custom_C.png"); /* <--- chemin ABSOLU */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    right: 167px;
    top: 530px;
    bottom: 50px;
    z-index: 3;
    border-radius: 10px !important;
  }

  @keyframes fadeInCustomRaise {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  

  #call-button:hover {
    opacity: 0.8; /* Réduit légèrement l'opacité au survol */
    /* Autres styles au survol */
  }
  
  #call-button:active {
    transform: scale(0.95); /* Réduit légèrement la taille au clic */
    /* Autres styles au clic */
  }
  
/* Conteneur modal */
/* La modal box toujours en bas, fond noir, etc. */
/* === MODALE RAISE — OVERLAY CENTRÉ === */
/* === OVERLAY + FENÊTRE === */
/* —— Arcade / Cartoon theme for Raise Modal —— */
/* (optionnel) Police pixel : fonctionne si Google Fonts est chargé dans ta page
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); */

/* =========================
   OVERLAY (toujours actif)
   ========================= */
/* Overlay */
/* ===================== OVERLAY ===================== */
#modal-box{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(60% 50% at 50% 40%, rgba(0,0,0,.18), rgba(0,0,0,.30)), rgba(0,0,0,.10);
  padding: min(4vw, 28px); z-index: 10000;
}
#modal-box *{ box-sizing: border-box; }
@media (max-height:560px){ #modal-box{ align-items:flex-start; } }

/* Thème arcade (overlay un poil plus sombre) */
#modal-box.arcade{
  background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.22), rgba(0,0,0,.34)), rgba(0,0,0,.08);
}

/* ===================== FENÊTRE — WIDE & LOW ===================== */
  #modal-box.arcade .raise-window{
    position: relative;
    width: 820px;               /* ← moins large par défaut (ajuste 780–900 si besoin) */
    max-width: 96vw;
    max-height: 54vh;           /* plus haut pour voir le bouton +30s */
  overflow: hidden;           /* garde le radius propre */
  border-radius: 18px;
  border: 5px solid rgba(46,240,255,.85);
  background: rgba(11,15,26,.50);
  backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%);
  box-shadow: 0 10px 0 0 #08101c, 0 0 32px 8px rgba(46,240,255,.30);
  animation: fy-pop .16s ease-out;
  cursor: grab;               /* drag */
}
#modal-box.arcade .raise-window:active{ cursor: grabbing; }
#modal-box.arcade .raise-window::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
  mix-blend-mode: soft-light; opacity:.10;
}

/* ===================== HEADER ===================== */
#modal-box.arcade .raise-head{
  position: relative;
  display:flex; align-items:center; gap:10px;
  padding:16px 64px 16px 12px; /* header plus haut */
  min-height: 60px;
  background: linear-gradient(180deg,#121a2b,#0d1322 60%, #0a0f1a);
  box-shadow: 0 3px 0 0 #07101c inset, 0 1px 0 rgba(255,255,255,.06);
  touch-action: none;
}
#modal-box.arcade .calc-head-meta{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
}
#modal-box.arcade .raise-window.calc-pro .calc-head-meta{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
#modal-box.arcade .raise-title{
  margin:0; font:700 18px/1.1 "Press Start 2P", system-ui, sans-serif;
  letter-spacing:.08em; color:#2ef0ff; text-shadow:0 0 8px rgba(46,240,255,.6);
}
#modal-box.arcade .calc-credits{
  font:700 18px/1 "Press Start 2P", system-ui, sans-serif;
  color:#9be7ff;
  letter-spacing:.06em;
  margin-left:0;
}
  #modal-box.arcade .calc-timer{
    font:700 18px/1 "Press Start 2P", system-ui, sans-serif;
    color:#7dffb3;
    letter-spacing:.06em;
    margin-left:0;
  }
  #modal-box.arcade .calc-move{
    position: relative;
    width: 70px;
    height: 70px;
    margin-left: 0;
    display: grid;
    place-items: center;
  }
  #modal-box.arcade .raise-window.calc-pro .calc-move{
    margin-left: 12px;
  }
  #modal-box.arcade .calc-move-btn{
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #3bd6ff;
    background: radial-gradient(circle at 35% 30%, #e8fbff, #6bdcff 55%, #2aa6d9 100%);
    color: #0b1a2a;
    font: 900 13px/1 "Press Start 2P", system-ui, sans-serif;
    box-shadow: 0 2px 0 #0d4a66, 0 0 10px rgba(59,214,255,.35);
    cursor: pointer;
    padding: 0;
  }
  #modal-box.arcade .calc-move-btn.up{ top: 0; left: 50%; transform: translateX(-50%); }
  #modal-box.arcade .calc-move-btn.down{ bottom: 0; left: 50%; transform: translateX(-50%); }
  #modal-box.arcade .calc-move-btn.left{ left: 0; top: 50%; transform: translateY(-50%); }
  #modal-box.arcade .calc-move-btn.right{ right: 0; top: 50%; transform: translateY(-50%); }
  #modal-box.arcade .calc-move-btn:active{ transform: translateY(1px); }
  #modal-box.arcade .calc-move-btn.up:active{ transform: translateX(-50%) translateY(1px); }
  #modal-box.arcade .calc-move-btn.down:active{ transform: translateX(-50%) translateY(1px); }
  #modal-box.arcade .calc-move-btn.left:active{ transform: translateY(-50%) translateY(1px); }
  #modal-box.arcade .calc-move-btn.right:active{ transform: translateY(-50%) translateY(1px); }
  #modal-box.arcade .calc-head-actions{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
  }
  #modal-box.arcade .calc-notice{
    display: none; /* pas d'espace quand vide */
    margin-left: auto;
    margin-right: 128px; /* leave room for +30s and % buttons */
  }
  #modal-box.arcade .calc-notice:not(:empty){
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(46,240,255,.55);
    background: rgba(8,14,26,.75);
    color: #f0c35a;
    font: 700 12px/1 "Press Start 2P", system-ui, sans-serif;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(0,0,0,.65);
    white-space: nowrap;
    box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 0 10px rgba(46,240,255,.18);
  }
  #modal-box.arcade .calc-add30-btn{
    position: static;
    transform: none;
    margin-left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #35c7ff;
    background: radial-gradient(circle at 30% 30%, #e8fbff, #7fe7ff 55%, #2bb9e8 100%);
    color: #0a1c2b;
    font: 800 25px/1 "Fredoka", "Trebuchet MS", sans-serif;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 16px rgba(53,199,255,.45);
  }
  #modal-box.arcade .calc-add30-btn:hover{ filter: brightness(1.08); }
  #modal-box.arcade .calc-add30-btn:active{ transform: scale(.96); }
#modal-box.arcade .calc-display-line{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  width:100%;
}
#modal-box.arcade .calc-display-left{
  background: rgba(2,6,15,.56);
  border: 2px solid #36507f; border-radius:12px;
  color:#9be7ff; font:700 26px/1.2 "Press Start 2P", monospace;
  padding:10px 12px; text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #0b213f inset, 0 0 12px rgba(155,231,255,.16);
}
#modal-box.arcade .calc-btn-x{
  margin-left:auto; width:30px; height:30px; border-radius:10px;
  background:#ff3f7a; border:3px solid #ffe0ea; color:#fff;
  box-shadow:0 3px 0 #be2d57,0 0 10px rgba(255,63,122,.35);
  font:700 16px/1 "Press Start 2P", system-ui, sans-serif; cursor:pointer;
}

/* ===================== CONTENU ===================== */
  #modal-box.arcade .raise-body{
    padding:10px 12px 0;
    max-height: calc(48vh - 46px);  /* réserve la place de Close */
    overflow:auto;
  }

/* grille horizontale: display | actions | presets | digits */
#modal-box.arcade .calc-horizontal-layout{
  display:grid; gap:10px;
  grid-template-columns: 1.05fr 0.95fr 1.10fr 1.20fr;
}

/* cartes (colonnes) */
#modal-box.arcade .calc-col{
  background: linear-gradient(180deg, rgba(14,21,38,.74), rgba(10,15,26,.64));
  border: 2px solid #2a3b55; border-radius:14px; padding:10px; gap:10px;
  box-shadow: 0 4px 0 #050a12, 0 0 0 2px #0a1a2e inset;
}

/* titres de section + display */
#modal-box.arcade .calc-title{
  font:700 10px/1 "Press Start 2P", system-ui, sans-serif;
  letter-spacing:.14em; color:#a9bbff; margin:0 0 6px;
  text-shadow: 0 0 6px rgba(144,164,255,.45);
}
#modal-box.arcade .calc-display{
  background: rgba(2,6,15,.56);
  border: 2px solid #36507f; border-radius:12px;
  color:#7CFF8A; font:700 34px/1.2 "Press Start 2P", monospace;
  padding:10px 12px; text-align:center;
  box-shadow: 0 0 0 2px #0b213f inset, 0 0 12px rgba(124,255,138,.16);
}

/* ===================== BOUTONS ===================== */
#modal-box.arcade .calc-btn{
  border-radius:12px; border:2px solid #ffd3bf;
  background: linear-gradient(180deg,#ff8247 0%, #ff6b2d 70%, #e3541c 100%);
  color:#fff; font:700 12px/1 "Press Start 2P", system-ui, sans-serif;
  padding:9px 11px; text-shadow:0 2px 0 rgba(0,0,0,.25);
  box-shadow:0 4px 0 #b44924, 0 0 12px rgba(255,107,45,.22);
  min-height:36px;
}
#modal-box.arcade .calc-btn.calc-add30-btn{
  border: 3px solid #35c7ff;
  background: radial-gradient(circle at 30% 30%, #fff2c4, #ffb347 60%, #ff7a5c 100%);
  color: #1f2a3a;
  font: 800 28px/1 "Fredoka", "Trebuchet MS", sans-serif;
  box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 16px rgba(53,199,255,.45);
  text-shadow: none;
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 0;
}
#modal-box.arcade .calc-digit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
#modal-box.arcade .calc-digit-grid .calc-btn{ min-height:36px; }
#modal-box.arcade .calc-col-actions .calc-btn,
#modal-box.arcade .calc-col-presets .calc-btn{ min-height:40px; }
#modal-box.arcade .calc-col-actions .calc-btn{
  background: linear-gradient(180deg,#48d2ff 0%, #2ebfff 70%, #1799d8 100%);
  border-color:#c8f2ff; box-shadow:0 4px 0 #106a8f, 0 0 12px rgba(46,191,255,.28);
}
#modal-box.arcade .calc-col-actions .calc-allin-btn{
  background: linear-gradient(180deg,#ff6b6b 0%, #ff3b3b 70%, #d62222 100%) !important;
  border-color: #ffb3b3 !important;
  box-shadow: 0 4px 0 #8f1a1a, 0 0 12px rgba(255,90,90,.35) !important;
  color: #fff !important;
}
#modal-box.arcade .calc-allin-btn,
#modal-box.arcade .raise-window.calc-pro .calc-allin-big{
  background: linear-gradient(180deg,#ff6b6b 0%, #ff3b3b 70%, #d62222 100%);
  border-color: #7bd7ff;
  box-shadow: 0 4px 0 #106a8f, 0 0 12px rgba(46,191,255,.28);
  color: #fff;
}
#modal-box.arcade .raise-window.calc-standard .calc-allin-big{
  background: linear-gradient(180deg,#5dff8a 0%, #2ee06f 70%, #18b458 100%);
  border-color: #b9ffd0;
  box-shadow: 0 4px 0 #0f7a3e, 0 0 12px rgba(46,224,111,.35);
  color: #fff;
}
#modal-box.arcade .raise-window.calc-standard .calc-btn{
  font-size: 24px !important;
  line-height: 1.05 !important;
}
#modal-box.arcade .raise-window.calc-standard .calc-allin-big{
  font-size: 24px !important;
}
#modal-box.arcade .raise-window.calc-pro .calc-btn{
  font-size: 20px !important;
  line-height: 1.05 !important;
}
#modal-box.arcade .raise-window.calc-pro .calc-allin-big{
  font-size: 20px !important;
}
#modal-box.arcade .calc-display{
  font-size: 26px !important;
  line-height: 1.2 !important;
}
#modal-box.arcade .calc-display.calc-display--notice{
  color:#ffb347 !important;
  background: rgba(18,10,2,.72) !important;
  border-color: #ffcc7a !important;
  box-shadow: 0 0 0 2px rgba(255,173,83,.25) inset, 0 0 12px rgba(255,173,83,.25) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
}
#modal-box.arcade .raise-title{
  font-size: 20px !important;
  line-height: 1.1 !important;
}
#modal-box.arcade .calc-col-presets .calc-btn{
  background: linear-gradient(180deg,#ffd447 0%, #ffbe2d 70%, #e39d1a 100%);
  border-color:#fff0c5; box-shadow:0 4px 0 #b57b18, 0 0 12px rgba(255,190,45,.28);
}

/* ===================== CLOSE ===================== */
#modal-box.arcade .calc-row-close{
  position: sticky; bottom: 0; z-index: 1;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(11,15,26,.001), rgba(11,15,26,.16));
  backdrop-filter: blur(2px);
}
#modal-box.arcade .calc-close-btn{
  width:100%;
  background: linear-gradient(180deg,#7e59ff 0%, #6a48ff 70%, #4e38cc 100%);
  border-color:#e4dbff; box-shadow:0 4px 0 #3b2a9d, 0 0 12px rgba(106,72,255,.28);
  padding:10px 12px; border-radius:12px; color:#fff; font:700 12px/1 "Press Start 2P", system-ui, sans-serif;
}

/* ===================== JETONS (presets) ===================== */
#modal-box.arcade .chip-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px; align-content: start;
}
#modal-box.arcade .chip{
  position: relative; display: grid; place-items: center;
  width: 84px; aspect-ratio: 1/1; border-radius: 50%;
  border: 6px solid #0a0f1a;
  isolation: isolate;
  box-shadow:
    0 10px 0 #050a12,
    0 0 0 2px rgba(255,255,255,.22) inset,
    0 -6px 10px rgba(0,0,0,.35) inset,
    0 12px 20px rgba(0,0,0,.38),
    0 0 22px rgba(0,0,0,.35),
    0 0 14px var(--chip-glow, rgba(255,255,255,.18)),
    0 0 30px var(--chip-glow-weak, rgba(255,255,255,.12));
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
#modal-box.arcade .chip:hover{ filter: brightness(1.06); }
#modal-box.arcade .chip:active{ transform: translateY(1px) scale(.98); }
#modal-box.arcade .chip::before{
  content:""; position:absolute; inset: 6px; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.85) 0 10deg, transparent 10deg 20deg),
    conic-gradient(from 5deg, rgba(0,0,0,.35) 0 10deg, transparent 10deg 20deg),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.45) 56% 66%, transparent 66%);
  opacity: .42; mix-blend-mode: overlay; pointer-events: none;
}
#modal-box.arcade .chip span{
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 60%; aspect-ratio: 1/1; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.18) 35%, rgba(0,0,0,.25) 70%),
    radial-gradient(circle at 50% 60%, rgba(0,0,0,.18), rgba(0,0,0,.45) 75%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.45) inset,
    0 0 0 6px rgba(0,0,0,.22) inset,
    0 -6px 10px rgba(0,0,0,.35) inset,
    0 2px 0 rgba(0,0,0,.35);
  color:#fff; font: 800 17px/1 "Press Start 2P", system-ui, sans-serif; text-shadow: 0 2px 0 rgba(0,0,0,.65);
}
/* couleurs par valeur + halo */
#modal-box.arcade .chip-50   { --chip-glow: rgba(43,211,138,.62); --chip-glow-weak: rgba(43,211,138,.35); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%), linear-gradient(180deg,#2bd38a,#1fb56f 70%,#15945a);   box-shadow: 0 6px 0 #050a12,0 0 0 3px rgba(255,255,255,.08) inset,0 0 18px var(--chip-glow-weak),0 0 36px var(--chip-glow); }
#modal-box.arcade .chip-100  { --chip-glow: rgba(72,210,255,.62); --chip-glow-weak: rgba(72,210,255,.35); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%), linear-gradient(180deg,#48d2ff,#2ebfff 70%,#1799d8);   box-shadow: 0 6px 0 #050a12,0 0 0 3px rgba(255,255,255,.08) inset,0 0 18px var(--chip-glow-weak),0 0 36px var(--chip-glow); }
#modal-box.arcade .chip-500  { --chip-glow: rgba(162,104,255,.62); --chip-glow-weak: rgba(162,104,255,.35); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%), linear-gradient(180deg,#a268ff,#8a54ff 70%,#6a3ddb);   box-shadow: 0 6px 0 #050a12,0 0 0 3px rgba(255,255,255,.08) inset,0 0 18px var(--chip-glow-weak),0 0 36px var(--chip-glow); }
#modal-box.arcade .chip-1000 { --chip-glow: rgba(255,110,91,.62); --chip-glow-weak: rgba(255,110,91,.35); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%), linear-gradient(180deg,#ff6e5b,#ff553e 70%,#e04632); box-shadow: 0 6px 0 #050a12,0 0 0 3px rgba(255,255,255,.08) inset,0 0 18px var(--chip-glow-weak),0 0 36px var(--chip-glow); }

/* Responsive jetons */
@media (max-width: 720px){
  #modal-box.arcade .chip{ width: 80px; }
  #modal-box.arcade .chip span{ font-size: 16px; }
}

/* ===================== Poignée de redimensionnement (largeur) ===================== */
#modal-box.arcade .resize-handle-x{
  position: absolute; top: 0; right: -8px; width: 16px; height: 100%;
  cursor: ew-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
#modal-box.arcade .resize-handle-x::after{
  content: ""; width: 4px; height: 48px; border-radius: 3px;
  background: rgba(46,240,255,.6); box-shadow: 0 0 12px rgba(46,240,255,.35); opacity: .7;
}
#modal-box.arcade .raise-window.resizing{ transition: none; }

/* ===================== Anim ===================== */
@keyframes fy-pop{
  from{ transform: translateY(6px) scale(.985); opacity:0; }
  to{   transform: translateY(0)   scale(1);     opacity:1; }
}

/* Presets: 3 rangées x 2 colonnes + jetons plus petits */
#modal-box.arcade .chip-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;               /* plus d'espace entre les jetons */
  place-items: center;
}

#modal-box.arcade .chip{
  width: 60px;             /* jetons plus petits */
  border-width: 4px;       /* tranche un peu plus fine */
  box-shadow:
    0 5px 0 #050a12,
    0 0 0 2px rgba(255,255,255,.18) inset,
    0 -5px 8px rgba(0,0,0,.32) inset,
    0 8px 14px rgba(0,0,0,.28),
    0 0 18px rgba(255,255,255,.10),
    0 0 12px var(--chip-glow, rgba(255,255,255,.16)),
    0 0 26px var(--chip-glow-weak, rgba(255,255,255,.10));
}
#modal-box.arcade .chip::before{ inset: 5px; } /* anneau adapté */

#modal-box.arcade .chip span{
  width: 64%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;         /* chiffres plus lisibles */
  line-height: 1;
  text-align: center;
  letter-spacing: 0.3px;
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(0,0,0,.85),
    0 2px 0 rgba(0,0,0,.75),
    0 0 14px rgba(255,255,255,.25);
}

#modal-box.arcade .chip::after{
  content:"";
  position:absolute;
  inset: 10% 12% auto 12%;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity: .7;
  pointer-events: none;
}

/* Standard calculator: bigger chips + centered in column */
.raise-window.calc-standard .calc-col-presets .chip-grid{
  place-items: center;
}
.raise-window.calc-standard .chip{
  width: 76px;
  border-width: 6px;
}
.raise-window.calc-standard .chip span{
  font-size: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  text-align: center;
  width: 65%;
  height: 65%;
  padding: 0;
  box-sizing: border-box;
}

/* PRO calculator: center chips better in their column + slightly larger */
.raise-window.calc-pro .calc-col-presets .chip-grid{
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 4px 2px;
}
.raise-window.calc-pro .chip{
  width: 74px;
  border-width: 5px;
}
.raise-window.calc-pro .chip span{
  font-size: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  text-align: center;
  width: 65%;
  height: 65%;
  padding: 0;
  box-sizing: border-box;
}

/* Couleur et halo du nouveau jeton 5000 (rouge profond) */
#modal-box.arcade .chip-5000{
  --chip-glow: rgba(255,77,77,.62);
  --chip-glow-weak: rgba(255,77,77,.35);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(180deg, #ff4d4d, #e83a3a 70%, #c82b2b);
  box-shadow:
    0 5px 0 #050a12,
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 0 18px var(--chip-glow-weak),
    0 0 36px var(--chip-glow);
}

/* Jeton 10000 (doré) */
#modal-box.arcade .chip-10000{
  --chip-glow: rgba(255,212,71,.62);
  --chip-glow-weak: rgba(255,212,71,.35);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(180deg, #ffd447, #ffbe2d 70%, #e39d1a);
  box-shadow:
    0 5px 0 #050a12,
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 0 18px var(--chip-glow-weak),
    0 0 36px var(--chip-glow);
}

/* Les boutons (dont les chips) réagissent direct au tap */
#modal-box.arcade button,
#modal-box.arcade .chip { touch-action: manipulation; }

/* avant (à supprimer ou écraser) */
/* #modal-box.arcade .raise-window { cursor: grab; }
#modal-box.arcade .raise-window:active { cursor: grabbing; } */

/* après */
#modal-box.arcade .raise-head { cursor: grab; }
#modal-box.arcade .raise-head:active { cursor: grabbing; }

/* au cas où : assure que les jetons capturent bien les taps/clics partout */
#modal-box.arcade .chip,
#modal-box.arcade .chip span { pointer-events: auto; touch-action: manipulation; }

/* Option: si ça déborde encore, descends un cran :
#modal-box.arcade .chip{ width: 64px; }
#modal-box.arcade .chip span{ font-size: 13px; }
*/
#modal-box.arcade .calc-btn-x{
  pointer-events: auto;
  z-index: 3;            /* au-dessus de tout dans le header */
}

/* Sélection désactivée (drag agréable) */
#modal-box.arcade, #modal-box.arcade *{ user-select: none; -webkit-user-select: none; }

/* CHECK vert cyan */
#modal-box.arcade .btn-check{
  background: linear-gradient(180deg,#1fe2b9 0%, #16caa3 70%, #10a386 100%);
  border-color:#baf6ec;
  box-shadow: 0 4px 0 #0b7d69, 0 0 12px rgba(31,226,185,.28);
}

/* FOLD rouge */
#modal-box.arcade .btn-fold{
  background: linear-gradient(180deg,#ff6b6b 0%, #ff4e4e 70%, #e23939 100%);
  border-color:#ffd6d6;
  box-shadow: 0 4px 0 #a62f2f, 0 0 12px rgba(255,75,75,.28);
}

/* Assure une bonne hauteur sur toute la colonne actions */
#modal-box.arcade .calc-col-actions .calc-btn{ min-height: 40px; }

#modal-box.arcade .calc-btn:disabled{
  opacity: .55;
  filter: grayscale(.15);
  cursor: not-allowed;
  box-shadow: none;
}

/* Titre */
.calc-title {
  margin: 2px 0 4px 0;
  font-size: 12px;
  color: #fff;
  text-align: center;
}

/* Affichage du montant */
.calc-display {
  background: #222;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px;
  font-size: 14px;
  min-height: 24px;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
}

/* Bouton générique */
.calc-btn {
  background: linear-gradient(to bottom, #e66d35, #e66d35);
  border: 1px solid #aa5425;
  color: #fff;
  border-radius: 4px;
  padding: 3px;
  font-size: 12px;
  margin: 2px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  text-align: center;
}

/* Force bigger symbols for calculator 30 / % buttons */
#modal-box .calc-head-actions #calc-add30-btn,
#modal-box .calc-head-actions #calc-proba-btn {
  font-size: 22px !important;
  font-family: "Fredoka", "Trebuchet MS", sans-serif !important;
  line-height: 1 !important;
}

/* Survol */
.calc-btn:hover {
  background: linear-gradient(to bottom, #d85c27, #c54d19);
}

/* 
   Pour la colonne ALL-IN / CALL : 
   on veut 2 boutons qui occupent chacun 50% de la hauteur. 
   On peut imposer un "flex: 1" sur chaque bouton
*/
.calc-col-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calc-col-actions .half-btn {
  flex: 1; /* Chaque bouton occupe la moitié du container */
}

/* Pour la colonne PRESETS (50, 100, 200) : 3 boutons à 1/3 de la hauteur chacun */
.calc-col-presets {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calc-col-presets .third-btn {
  flex: 1; /* Chaque bouton occupe 1/3 du container */
}

/* Pavé numérique en grille */
.calc-col-digits {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.calc-digit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px;
  flex: 1; /* Remplit verticalement */
}

/* Bouton close */
.calc-row-close {
  width: 100%;
  text-align: center;
  margin-top: 5px;
  box-sizing: border-box;
}

.calc-close-btn {
  width: 90%;
  background: #e66d35;
  border: 1px solid #e66d35;
}

/* Animation click */
.calc-btn:active {
  transform: scale(0.97);
}
  
  @keyframes fadeInCustomRaise {
    from { opacity: 0; }
    to   { opacity: 1; }
  }


  #raise-button.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
  }  
  
  
#common-cards {
        position: absolute;      /* ou fixed si vous voulez qu'il reste en haut lors du scroll */
        top: 20px;               /* Distance du haut de la page */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;              /* Ou une largeur fixe, par exemple 800px */
        display: flex;
        flex-direction: row;
        justify-content: center; /* Centre les cartes horizontalement */
        align-items: center;
        gap: 20px;               /* Espacement entre le deck et les cartes communes */
      }


/* Décalage du contenu principal vers le bas */
#game-container {
  margin-top: 90px !important;
}

/* Zone centrale (pot + messages) */
/* Ajuste ces variables si tu veux caler parfaitement dans l'ovale blanc */
:root {
  --center-zone-top: 150px;
  --center-zone-width: 390px;
  --center-zone-height: 100px;
}

#center-message-zone {
  position: absolute;
  left: 50%;
  top: var(--center-zone-top);
  transform: translateX(-50%);
  width: var(--center-zone-width);
  height: var(--center-zone-height);
  border-radius: 60px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1200;
  background: rgba(0, 0, 0, 0);
  opacity: 1;
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

#center-message-zone.active {
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.25), inset 0 0 24px rgba(0, 0, 0, 0.45);
}

#center-message-zone.turn {
  background: linear-gradient(135deg, rgba(0, 198, 255, 0.55), rgba(0, 119, 255, 0.55));
}

#center-message-zone.winner {
  background: linear-gradient(135deg, rgba(255, 74, 155, 0.6), rgba(255, 120, 175, 0.55));
}
#center-message-zone.winner-final {
  background: linear-gradient(135deg, rgba(255, 211, 102, 0.85), rgba(255, 169, 45, 0.8));
}
#center-message-zone.lose {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(10, 10, 10, 0.85));
  z-index: 1;
}

/* Hide dealer button + blinds when the game is finalized (grand winner) */
body.final-end-ui .seat.dealer-seat #button{
  display: none !important;
}
body.final-end-ui .seat.has-sb::after,
body.final-end-ui .seat.has-bb::after{
  opacity: 0 !important;
  box-shadow: none !important;
}

#center-message-zone.pulse #center-message-text {
  animation: center-glow 1.4s ease-in-out infinite;
}

#center-message-text {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  padding: 0 20px;
  line-height: 1.2;
}

@keyframes center-glow {
  0%   { opacity: 0.6; text-shadow: 0 0 6px rgba(255,255,255,0.4); }
  50%  { opacity: 1;   text-shadow: 0 0 18px rgba(255,255,255,0.9); }
  100% { opacity: 0.6; text-shadow: 0 0 6px rgba(255,255,255,0.4); }
}

/* Modal de fin de partie */
#end-game-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,1);
  z-index: 10000;
  display: none; /* Caché par défaut */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* Conteneur du contenu du modal */
.end-game-content {
  background: #333;
  padding: 20px;
  border-radius: 10px;
  width: 400px;
}
/* Le message de fin */
.end-game-text {
  font-size: 5rem;
  margin-bottom: 20px;
  color: white;
}

/* Bouton OK amélioré */
.end-game-ok-btn {
  padding: 10px 20px;
  background-color: #ffa600;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: block;  /* Pour occuper une ligne complète */
  margin: 0 auto;  /* Centrer horizontalement */
}

.end-game-ok-btn:hover {
  background-color: #0056b3;
}

/* S'applique aux cartes dans tout siège qui a la classe "winning-hand" */

#seat0.winning-hand .holecards .card {
  border: none !important;
  box-shadow: none !important;
}

/* Dans ton CSS principal, ou dans poker-app/style.css, ajoute : */
#deck,
.deck {
  display: none !important;
  visibility: hidden !important;
  perspective: 800px; /* ou une valeur qui te convient */
}

/* ============================================= */
/* Override du flip sur le reveal : on n’anime que l’opacité */
/* ============================================= */

/* ──────────────── */
/* 1) Flip 3D au DEAL seulement */
/* ──────────────── */
/* On définit ici la position initiale (dos) */
.seat .holecards .card.deal-flip::after {
  transform: rotateY(-180deg);
  opacity: 0;
  backface-visibility: hidden;
}

/* Quand on ajoute .revealed ET .deal-flip, on joue la rotation */
.seat .holecards .card.deal-flip.revealed::after {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: rotateY(0deg);
  opacity: 1;
}

/* ─────────────────────────── */
/* 2) Fade-in / reveal “simple” */
/* ─────────────────────────── */
/* Par défaut on n’anime que l’opacité du back */
.seat .holecards .card {
  opacity: 0;
  transition: opacity 0.6s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* fade-in du back et du front en reveal phase */
.seat .holecards .card.visible {
  opacity: 1;
}

/* On écrase toute animation 3D si on n’a PAS la classe .deal-flip */
.seat .holecards .card.revealed:not(.deal-flip)::after {
  /* passe direct face sans mouvement */
  transform: rotateY(0deg) !important;
  transition: opacity 0.6s ease !important;
  opacity: 1 !important;
}

/* ── Overlay Victoire ── */
#victory-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  z-index: 10000;
}
#victory-overlay.show {
  opacity: 1;
}

#victory-text {
  color: #fff;
  font-size: 4rem;
  text-transform: uppercase;
  text-shadow: 0 0 8px gold, 0 0 16px orange;
  animation: pop 1s cubic-bezier(.5,1.5,.5,1) forwards,
             glow 2s ease-in-out infinite alternate;
}

/* Pop initial */
@keyframes pop {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}

/* Lueur continue */
@keyframes glow {
  from { text-shadow: 0 0 8px gold, 0 0 16px orange; }
  to   { text-shadow: 0 0 24px gold, 0 0 32px orange; }
}

/* Overlay défaite (losing) */
#losing-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 2;
  pointer-events: none;
}
#losing-overlay.show {
  opacity: 1;
}

/* Boîte de texte centrale */
#losing-text {
  text-align: center;
  font-family: 'Montserrat', sans-serif !important;
}
#losing-text p {
  margin: 0;
}

/* Optionnel : pour garantir la taille */
#losing-text p:first-child {
  font-size: 3rem !important;
  color: #ff9100 !important;
  font-weight: 700;   /* gras */
  margin: 0.5em 0;
}
#losing-text p:last-child {
  font-size: 2rem !important;
  color: #fff !important;
  margin-top: 3rem !important;
  font-weight: 400;
}

/* ── Glow autour des cartes de la main gagnante ── */

.mode-selector {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.mode-option {
  position: relative;
  padding: 8px 12px;
  border: 2px solid #ccc;
  border-radius: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
  font-size: 0.9rem;
}
.mode-option small {
  display: block;
  font-size: 0.7rem;
  color: #666;
}
.mode-option input {
  position: absolute;
  opacity: 0;
}
.mode-option:hover {
  border-color: #888;
}
.mode-option.selected {
  background: #1976d2;
  border-color: #1976d2;
  color: #fff;
}
.mode-option.selected small {
  color: #e0e0e0;
}

/* Tableau des joueurs plus aéré */
#players-list {
  width: 100%;
  border-collapse: separate;     /* IMPORTANT pour border-spacing */
  border-spacing: 0 12px;        /* 12px d’écart vertical entre les lignes */
}
#players-list td {
  padding: 16px 12px;            /* plus de padding haut/bas */
  border-bottom: none;           /* on peut virer la ligne si on veut */
}
#players-list tr {
  background: #2e2e44;           /* couleur de fond pour chaque ligne */
  border-radius: 6px;
}
#players-list input {
  width: 100%;
  padding: 14px;                 /* champ bien épais */
  font-size: 1rem;
  border: 1px solid #555;
  border-radius: 4px;
  background: #1e1e2f;
  color: #e0e0e0;
}

.copy-feedback {
  margin-left: 8px;
  font-size: 0.9em;
  color: #2a9d8f;
  opacity: 0;
  animation: fadeinout 2s ease forwards;
}

@keyframes fadeinout {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Highlight animation pour une nouvelle ligne */
@keyframes highlightNew {
  from { background-color: #3f8ed8; }
  to   { background-color: transparent; }
}
.new-row {
  animation: highlightNew 2s ease-out;
}

/* Conteneur de l’historique */
.history-details .history-container {
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 12px;
  margin-top: 8px;
}

/* Liste sans puces */
.history-details .history-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chaque entrée */
.history-details .history-container li {
  display: flex;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

/* Supprimer la bordure sur le dernier élément */
.history-details .history-container li:last-child {
  border-bottom: none;
}

/* Date à gauche, monospace, gris pâle */
.history-details .history-date {
  font-family: monospace;
  font-size: 0.85em;
  color: #888;
  margin-right: 12px;
  flex-shrink: 0;
  width: 140px;
}

/* Texte de l’action, plus visible */
.history-details .history-action {
  font-size: 0.95em;
  color: #333;
  line-height: 1.4;
}

/* ======================= */
/* Pastilles “Status”      */
/* ======================= */
.status-cell {
  /* centre verticalement la pastille */
  text-align: center;
}
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: auto; /* centre dans la cellule */
}
.status-active   { background-color: #4CAF50; }  /* vert */
.status-inactive { background-color: #F44336; }  /* rouge */


#timer-circle-container {
  position: absolute;
  bottom: -75px;
  right: 80px;
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 500;
}

#timer-circle {
  /* circonférence = 2π·45 ≃ 283 */
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.5s;
}

#timer-text {
  user-select: none;
}

/* Exemple de style : placer #my-cards en bas à gauche */
#my-cards {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 100px;   /* ou ce qui correspond à deux cartes côte à côte */
  height: 60px;   /* hauteur de carte */
  pointer-events: none; /* pour que ça ne gêne pas les clics */
  display: flex;
  gap: 5px;
}
.my-cards-container .card {
  width: 50px;  /* largeur d’une carte */
  height: 60px; /* hauteur d’une carte */
}

/* overlay plein écran */
#warning-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* boîte blanche centrée */
#warning-modal .warning-content {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* message */
#warning-modal .warning-content p {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 1.5rem;
  font-weight: bold;
}

/* bouton OK */
#warning-modal .warning-content button {
  padding: 0.75rem 1.5rem;
  font-size: 1.2rem;
  background: #ff9100;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}
#warning-modal .warning-content button:hover {
  background: #e08100;
}

/* === WAITING ROOM — SKIN ARCADE (aucun changement JS requis) ========== */
/* Le seul prérequis : avoir un élément <div id="waiting-count"></div> dans ta page. */

#waiting-count{
  /* on convertit cet élément en "overlay + carte" arcade */
  position: fixed;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 12000;

  /* carte glass */
  min-width: min(420px, 92vw);
  max-width: 92vw;
  padding: 20px 24px;
  border-radius: 18px;
  border: 5px solid rgba(46,240,255,.85);
  background: rgba(11,15,26,.72);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  box-shadow: 0 12px 0 #07101c, 0 0 36px rgba(46,240,255,.35);

  /* typo arcade */
  font: 700 14px/1.3 "Press Start 2P", system-ui, sans-serif;
  letter-spacing: .04em;
  color: #a9bbff;
  text-align: center;
  text-shadow: 0 0 6px rgba(169,187,255,.35);
}

/* Overlay sombre + grille néon (pas besoin d’autres éléments) */
#waiting-count::before{
  content: "";
  position: fixed; inset: 0;         /* couvre tout l’écran */
  z-index: -1;                       /* derrière la carte mais au-dessus du jeu */
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.40), rgba(0,0,0,.85)),
    linear-gradient(180deg,#0a0f1a,#0b0f1a 60%, #070b13);
}
#waiting-count::after{
  /* grille animée légère */
  content: "";
  position: fixed; inset: 0; z-index: -1; opacity: .22;
  background:
    linear-gradient(transparent 31px, rgba(46,240,255,.25) 32px),
    linear-gradient(90deg, transparent 31px, rgba(46,240,255,.25) 32px);
  background-size: 32px 32px;
  animation: waiting-scan 14s linear infinite;
}

/* ligne de progression animée, décorative (option) */
#waiting-count{
  --bar-h: 12px;
  background-image:
    linear-gradient(90deg,#48d2ff,#7e59ff);           /* barre */
  background-repeat: no-repeat;
  background-size: 0% var(--bar-h);                   /* rempli en JS si tu veux, sinon animé */
  background-position: left calc(100% - 10px);
}
@keyframes waiting-scan{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: 0 256px, 256px 0; }
}

/* petit pouls sur le texte pour le côté “arcade vivant” */
@media (prefers-reduced-motion: no-preference){
  #waiting-count{ animation: waiting-pop .18s ease-out; }
  @keyframes waiting-pop{
    from{ transform: translate(-50%,-52%) scale(.985); opacity:0; }
    to  { transform: translate(-50%,-50%) scale(1);     opacity:1; }
  }
}

/* Responsive */
@media (max-width: 480px){
  #waiting-count{ font-size: 12px; padding: 16px 18px; }
}

/* ========= WAITING PILL — ARCADE ========= */
/* Requis côté HTML/JS : juste un élément #waiting-count dont le texte est mis à jour. */

#waiting-count{
  position: fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index: 12000;

  /* capsule */
  --pill-w: clamp(260px, 42vw, 560px);
  --pill-h: 58px;
  width: var(--pill-w); min-height: var(--pill-h);
  padding: 14px 22px;

  display: grid; place-items: center;
  border-radius: 18px;
  border: 4px solid rgba(46,240,255,.9);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    rgba(10,14,24,.72);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  box-shadow:
    0 10px 0 #07101c,
    0 0 22px 6px rgba(46,240,255,.35);

  /* typo arcade */
  font: 700 13px/1.2 "Press Start 2P", system-ui, sans-serif;
  letter-spacing:.04em;
  color:#cfe2ff; text-shadow:0 0 8px rgba(168,188,255,.25);
  text-align:center;

  /* anim d’apparition */
  animation: wc-pop .18s ease-out;
}

/* halo externe doux */
#waiting-count::before{
  content:"";
  position:absolute; inset:-16px; border-radius:26px; pointer-events:none;
  background: radial-gradient(55% 60% at 50% 48%, rgba(46,240,255,.25), transparent 60%);
  filter: blur(10px); opacity:.9;
}

/* décor interne : scanlines + reflet + barre de progression */
#waiting-count::after{
  content:"";
  position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:
    /* 1) scanlines très fines */
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    /* 2) glossy highlight sur le haut */
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 28%),
    /* 3) barre de progression en bas (voir --wc-pct plus bas) */
    linear-gradient(90deg, #48d2ff, #7e59ff) bottom left / calc(var(--wc-pct, 25%)) 6px no-repeat;
  mix-blend-mode: soft-light;
  opacity:.9;
  /* petit défilement des scanlines */
  animation: wc-scan 10s linear infinite;
}

/* liseré intérieur vibrant (effet “tron”) */
#waiting-count .wc-ring{ display:none; } /* (placeholder si besoin un jour) */

/* plein écran sombre léger derrière la capsule (reste moderne & discret) */
#waiting-count:has(+ *)::backdrop { background: none; } /* harmless */

/* ===== Animations ===== */
@keyframes wc-pop{
  from{ transform:translate(-50%,-52%) scale(.985); opacity:0; }
  to  { transform:translate(-50%,-50%) scale(1);     opacity:1; }
}
@keyframes wc-scan{
  from{ background-position: 0 0, 0 0, 0 calc(100% - 6px); }
  to  { background-position: 0 256px, 0 0, 0 calc(100% - 6px); }
}

/* ===== Responsif ===== */
@media (max-width: 480px){
  #waiting-count{ --pill-h: 52px; font-size:11px; padding: 12px 16px; }
}

/* ===== Waiting pill — bigger font ===== */
#waiting-count{
  /* hauteur + padding un peu plus généreux */
  --pill-h: 70px;
  padding: 18px 26px;

  /* taille de police adaptative (mobile → desktop) */
  font-size: clamp(14px, 1.9vw, 20px);
  line-height: 1.25;
  letter-spacing: .05em;

  /* un glow un peu plus présent */
  text-shadow: 0 0 10px rgba(168,188,255,.35);
  box-shadow:
    0 12px 0 #07101c,
    0 0 28px 8px rgba(46,240,255,.38);
  border-width: 5px;
}

/* barre de progression un chouïa plus épaisse */
#waiting-count::after{
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 28%),
    linear-gradient(90deg, #48d2ff, #7e59ff) bottom left / calc(var(--wc-pct, 25%)) 8px no-repeat;
}

/* mobile: garde lisible mais compact */
@media (max-width: 480px){
  #waiting-count{
    --pill-h: 62px;
    font-size: 16px;        /* force un minimum lisible sur petit écran */
    padding: 16px 20px;
  }
}

/* ========= WAITING PILL — ARCADE (Neon Pill+) ========= */
#waiting-count{
  position: fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index: 12000;
  /* capsule */
  --pill-w: clamp(280px, 44vw, 620px);
  --pill-h: 76px;
  --wc-pct: 0%;                 /* largeur de la barre de progression (remplie par JS) */
  width: var(--pill-w); min-height: var(--pill-h);
  padding: 18px 28px; border-radius: 20px;
  border: 5px solid rgba(46,240,255,.95);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 58%),
    rgba(10,14,24,.75);
  backdrop-filter: blur(7px) saturate(120%); -webkit-backdrop-filter: blur(7px) saturate(120%);
  box-shadow: 0 12px 0 #07101c, 0 0 34px 10px rgba(46,240,255,.38);

  /* typo arcade */
  font: 700 16px/1.25 "Press Start 2P", system-ui, sans-serif;
  letter-spacing:.05em; color:#e6f0ff; text-align:center;
  text-shadow: 0 0 10px rgba(168,188,255,.35);

  animation: wc-pop .18s ease-out;
}

/* halo externe */
#waiting-count::before{
  content:""; position:absolute; inset:-18px; border-radius:28px; pointer-events:none;
  background: radial-gradient(55% 60% at 50% 48%, rgba(46,240,255,.25), transparent 60%);
  filter: blur(12px); opacity:.95;
}

/* scanlines + glossy + barre de progression (bas) */
#waiting-count::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 28%),
    linear-gradient(90deg, #48d2ff, #7e59ff) bottom left / var(--wc-pct) 8px no-repeat;
  mix-blend-mode: soft-light; opacity:.95; animation: wc-scan 11s linear infinite;
}

/* petits scintillements discrets */
#waiting-count .stars{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 10% 60%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(2px 2px at 60% 30%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(2px 2px at 85% 65%, rgba(255,255,255,.5), transparent 60%);
  opacity:.35; animation: twinkle 2.2s ease-in-out infinite;
}

/* “...” animés pour le texte (option) */
#waiting-count .dots::after{
  content: "• • •"; margin-left: .6em; letter-spacing:.35em; color:#7ec9ff;
  text-shadow: 0 0 8px rgba(126,201,255,.45);
  animation: dots 1.4s steps(3,end) infinite;
}

/* animations */
@keyframes wc-pop{ from{transform:translate(-50%,-52%) scale(.985); opacity:0} to{transform:translate(-50%,-50%) scale(1); opacity:1} }
@keyframes wc-scan{ from{background-position:0 0, 0 0, 0 100%} to{background-position:0 256px, 0 0, 0 100%} }
@keyframes twinkle{ 0%,100%{opacity:.15} 50%{opacity:.45} }
@keyframes dots{ 0%{opacity:.2} 50%{opacity:1} 100%{opacity:.2} }

/* responsive */
@media (max-width: 480px){
  #waiting-count{ --pill-h: 64px; font-size: 14px; padding: 16px 20px; border-width:4px; }
}

/* === WAITING PILL — OVERRIDES : no bar, bigger & centered === */
#waiting-count{
  /* plus grand */
  --pill-w: clamp(420px, 58vw, 860px);
  --pill-h: 96px;
  width: var(--pill-w);
  min-height: var(--pill-h);
  padding: 28px 36px;

  /* typo plus grande et bien centrée */
  font-size: clamp(18px, 2.3vw, 28px);
  line-height: 1.3;
  letter-spacing: .06em;
  text-align: center;

  /* cadre plus “épais” */
  border-width: 6px;
  box-shadow:
    0 14px 0 #07101c,
    0 0 36px 10px rgba(46,240,255,.42);
}

/* on garde scanlines + reflet, mais on RETIRE la barre de progression */
#waiting-count::after{
  content:"";
  position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:
    /* scanlines fines */
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    /* glossy sur le haut */
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 28%);
  mix-blend-mode: soft-light;
  opacity:.95;
  animation: wc-scan 11s linear infinite;
}

/* halo un peu plus large */
#waiting-count::before{
  inset: -22px; border-radius: 32px; filter: blur(14px);
}

/* Option : espace plus propre entre “…” et le ratio */
#waiting-count .dots::after{ margin-left: .8em; }

/* Mobile */
@media (max-width: 480px){
  #waiting-count{
    --pill-h: 82px;
    font-size: 18px;
    padding: 22px 26px;
    border-width: 5px;
  }
}

/* === Fix dépassement sous la capsule d’attente === */
#waiting-count{
  /* on supprime l'ombre pleine verticale et on garde un drop-shadow doux */
  box-shadow: 0 18px 28px rgba(0,0,0,.55),        /* ombre floue, pas de “bande” */
              0 0 36px 10px rgba(46,240,255,.42); /* glow néon */
  --r: 22px;                                      /* même rayon partout */
  border-radius: var(--r);
}

/* halo extérieur : même rayon + marge */
#waiting-count::before{
  inset: -22px;
  border-radius: calc(var(--r) + 10px);
}

/* calque interne (scanlines/reflet) : même rayon, pas de fuite */
#waiting-count::after{
  border-radius: calc(var(--r) - 4px);
}

/* (optionnel) si tu veux forcer le clipping de tout ce qui est interne */
#waiting-count{ overflow: hidden; }

/* ==== END OVERLAY — SAFE RESET ==== */

/* Conteneur plein écran */
.arcade-overlay{ position:fixed; inset:0; z-index:13000; pointer-events:auto; }

/* Fond simple (noir dégradé) */
.arcade-overlay .ao-bg{
  position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.88));
}

/* ---------- CARTE (bannière) ---------- */
.arcade-overlay .ao-card{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 94vw);
  height: clamp(120px, 18vh, 180px);
  border-radius: 18px;
  background: linear-gradient(180deg, #101727, #0b111d);
  border: 4px solid #2ef0ff;
  box-shadow: 0 18px 36px rgba(0,0,0,.55), 0 0 44px rgba(46,240,255,.40);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Enlève TOUT ancien ::before/::after résiduel */
.arcade-overlay .ao-card::before,
.arcade-overlay .ao-card::after { content: none !important; }

/* Win/Lose variations (glow) */
.arcade-overlay.win  .ao-card{ border-color:#2ef0ff; box-shadow:0 18px 36px rgba(0,0,0,.55), 0 0 44px rgba(46,240,255,.40); }
.arcade-overlay.lose .ao-card{ border-color:#ff6e5b; box-shadow:0 18px 36px rgba(0,0,0,.55), 0 0 44px rgba(255,110,91,.40); }

/* ---------- EN-TÊTE ---------- */
.arcade-overlay .ao-head{
  display:flex; align-items:center; gap:12px;
  padding: 14px 18px; background: transparent;
}
.arcade-overlay .ao-title{
  margin:0;
  font: 700 clamp(26px, 3vw, 40px)/1.1 "Press Start 2P", system-ui, sans-serif;
  letter-spacing: .06em; color:#eafaff;
  text-shadow: 0 0 10px rgba(234,250,255,.35);
}
.arcade-overlay.lose .ao-title{ color:#ffe2dc; text-shadow: 0 0 10px rgba(255,110,91,.45); }

.arcade-overlay .ao-x{
  margin-left:auto; width:40px; height:40px; border-radius:10px; cursor:pointer;
  background:#ff3f7a; border:3px solid #ffe0ea; color:#fff;
  box-shadow:0 3px 0 #be2d57, 0 0 10px rgba(255,63,122,.30);
  font:700 18px/1 "Press Start 2P", system-ui, sans-serif;
}

/* ---------- CONTENU ---------- */
.arcade-overlay .ao-body{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding: 0 22px; position: relative; overflow:hidden;
}
.arcade-overlay .ao-sub{
  margin:0; text-align:center; color:#e6f0ff;
  font:700 clamp(16px, 2.1vw, 22px)/1.35 "Press Start 2P", system-ui, sans-serif;
  letter-spacing:.05em; text-shadow:0 0 8px rgba(255,255,255,.18);
}
.arcade-overlay .ao-sub.lose-main{ color:#ffcf88; text-shadow:0 0 8px rgba(255,207,136,.28); }

/* ---------- SHIMMER discret ---------- */
.arcade-overlay .ao-shimmer{
  position:absolute; left:-25%; right:-25%; top:0; height:45%;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.05) 55%, transparent 100%);
  transform: translateX(-25%); filter: blur(.5px); opacity:.7; pointer-events:none;
  animation: aoShimmer 4.8s ease-in-out infinite;
}
@keyframes aoShimmer{
  0% { transform:translateX(-25%); opacity:.6; }
  50%{ transform:translateX(25%);  opacity:.85; }
  100%{ transform:translateX(-25%); opacity:.6; }
}

/* ---------- MARQUEE DE JETONS (optionnel) ---------- */
/* on réduit et on fixe en bas de la carte, pas de débordement écran */
.arcade-overlay .ao-chip-marquee{
  position:absolute; left:10px; right:10px; bottom:8px; height:18px;
  overflow:hidden; pointer-events:none; opacity:.85;
}
.arcade-overlay .ao-chip-track{
  position:absolute; left:0; top:0; height:100%; display:flex; gap:10px;
  animation: aoScroll 16s linear infinite;
}
@keyframes aoScroll{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
.arcade-overlay .ao-chip{
  flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  border:3px solid #0a0f1a; box-shadow:0 2px 0 #050a12, 0 0 0 2px rgba(255,255,255,.08) inset;
}
.ao-chip.c50  { background: linear-gradient(180deg,#2bd38a,#15945a); }
.ao-chip.c100 { background: linear-gradient(180deg,#48d2ff,#1799d8); }
.ao-chip.c200 { background: linear-gradient(180deg,#ffd447,#e39d1a); }
.ao-chip.c500 { background: linear-gradient(180deg,#a268ff,#6a3ddb); }
.ao-chip.c1k  { background: linear-gradient(180deg,#ff6e5b,#e04632); }

/* ==== Dynamique soft pour le banner de fin ==== */

/* glow qui respire (très discret) */
.arcade-overlay .ao-card{
  animation: aoGlow 3.6s ease-in-out infinite alternate;
}
@keyframes aoGlow{
  from{ box-shadow:0 18px 36px rgba(0,0,0,.55), 0 0 34px rgba(46,240,255,.32), 0 0 70px rgba(46,240,255,.18); }
  to  { box-shadow:0 18px 36px rgba(0,0,0,.55), 0 0 46px rgba(46,240,255,.46), 0 0 120px rgba(46,240,255,.28); }
}
.arcade-overlay.lose .ao-card{
  animation-name: aoGlowLose;
}
@keyframes aoGlowLose{
  from{ box-shadow:0 18px 36px rgba(0,0,0,.55), 0 0 34px rgba(255,110,91,.32), 0 0 70px rgba(255,110,91,.18); }
  to  { box-shadow:0 18px 36px rgba(0,0,0,.55), 0 0 46px rgba(255,110,91,.46), 0 0 120px rgba(255,110,91,.28); }
}

/* fines scanlines qui défilent lentement, rappel arcade */
.arcade-overlay .ao-body::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
  opacity:.25;
  animation: aoScan 10s linear infinite;
}
@keyframes aoScan{
  from{ transform: translateY(0) }
  to  { transform: translateY(8px) }
}

/* shimmer doux déjà présent ; on garde */
.arcade-overlay .ao-shimmer{
  position:absolute; left:-25%; right:-25%; top:0; height:45%;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.05) 55%,transparent 100%);
  transform:translateX(-25%); filter:blur(.5px); opacity:.7; pointer-events:none;
  animation: aoShimmer 4.8s ease-in-out infinite;
}
@keyframes aoShimmer{
  0%{ transform:translateX(-25%); opacity:.6 }
  50%{ transform:translateX(25%);  opacity:.85 }
  100%{ transform:translateX(-25%); opacity:.6 }
}

/* séparateur de points animé (comme la waiting room) */
.arcade-overlay .ao-dots{
  display:block; width:min(280px,40%); height:10px; margin:10px auto 0;
  background:
    radial-gradient(circle at 4px 50%, rgba(146,198,255,.55) 0 2px, transparent 3px) repeat-x;
  background-size: 18px 10px;
  background-position: 0 0;
  opacity:.9;
  animation: aoDots 3.2s linear infinite;
}
@keyframes aoDots{
  to{ background-position: -18px 0; }
}

/* underline discret (on garde si tu l'as) */
.arcade-overlay .ao-underline{
  position:absolute; left:14px; right:14px; bottom:12px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  opacity:.35; overflow:hidden;
}
.arcade-overlay .ao-underline::before{
  content:""; position:absolute; left:-20%; right:-20%; top:0; bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation: aoUnderline 3.6s ease-in-out infinite;
}
@keyframes aoUnderline{
  0%{ transform:translateX(-20%) }
  50%{ transform:translateX(20%) }
  100%{ transform:translateX(-20%) }
}

/* === End banner: plus étroit et bien centré === */
.arcade-overlay .ao-card{
  width: min(760px, 86vw);   /* ← ajuste ici (ex: 700–820) */
  height: clamp(110px, 16vh, 160px);
}

/* un peu plus de marge interne pour le texte */
.arcade-overlay .ao-head{ padding: 12px 16px; }
.arcade-overlay .ao-body{ padding: 6px 18px 14px; }
.arcade-overlay .ao-title{
  font: 700 clamp(22px, 2.6vw, 34px)/1.1 "Press Start 2P", system-ui, sans-serif;
}
.arcade-overlay .ao-sub{
  font: 700 clamp(14px, 1.8vw, 20px)/1.35 "Press Start 2P", system-ui, sans-serif;
}

/* option: encore plus étroit sur petits écrans */
@media (max-width: 560px){
  .arcade-overlay .ao-card{ width: min(92vw, 640px); height: clamp(110px, 20vh, 150px); }
}

/* ==== Fond dynamique du banner (overlay) ==== */

/* base sombre + vignette respirante */
.arcade-overlay .ao-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(0,0,0,.30), rgba(0,0,0,.88)),
    linear-gradient(180deg,#070b13,#0a0f1a 60%, #070b13);
  animation: bgBreath 6s ease-in-out infinite;
}
@keyframes bgBreath{
  0%   { filter: brightness(1) }
  50%  { filter: brightness(1.06) }
  100% { filter: brightness(1) }
}

/* couche 1 : “aurora” (voiles colorés très doux) */
.arcade-overlay .ao-bg::before{
  content:""; position:absolute; inset:-12%;
  background:
    radial-gradient(120% 70% at 15% 25%, rgba(46,240,255,.10), transparent 60%),
    radial-gradient(120% 70% at 85% 70%, rgba(126,89,255,.12), transparent 60%),
    radial-gradient(120% 70% at 50% 95%, rgba(43,211,138,.08), transparent 60%);
  filter: blur(18px) saturate(115%);
  animation: auroraDrift 11s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes auroraDrift{
  0%   { transform: translate(-2%, -1%) rotate(0.4deg); opacity:.85; }
  100% { transform: translate(2%,  1%) rotate(-0.4deg); opacity:1; }
}

/* couche 2 : bokeh léger qui dérive */
.arcade-overlay .ao-bg::after{
  content:""; position:absolute; inset:-20% -10% -15% -10%;
  background:
    radial-gradient(12px 12px at 10% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(10px 10px at 35% 75%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(8px  8px  at 70% 30%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(12px 12px at 85% 60%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(9px  9px  at 55% 15%, rgba(255,255,255,.05), transparent 60%);
  filter: blur(1px);
  animation: bokehFloat 16s linear infinite;
  pointer-events:none;
}
@keyframes bokehFloat{
  0%   { transform: translateY(0) }
  100% { transform: translateY(-12px) }
}

/* fine “scanline” horizontale sur tout l’overlay (rappel arcade) */
.arcade-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.03) 0 2px, transparent 2px 4px
  );
  opacity:.22; mix-blend-mode: soft-light;
  animation: scanSlide 12s linear infinite;
}
@keyframes scanSlide{
  from{ transform: translateY(0) }
  to  { transform: translateY(10px) }
}


/* === SEATS — STYLE COMME TA 2e IMAGE =============================== */
/* (garde width/height/top/left existants) */

.seat{ overflow: visible; } /* pour que le glow ne soit jamais coupé */

/* Fond sombre translucide, sans bandes — “verre fumé” */
.name-chips{
  position:absolute;
  background: linear-gradient(180deg, rgba(0,8,12,.62), rgba(0,8,12,.76)) !important;
  border-radius:14px;
  border: 1px solid transparent;     /* le cadre néon arrive via ::after */
  box-shadow:none !important;         /* on nettoie les ombres précédentes */
  color:#eaf9ff; font-weight:700; line-height:33px;
  isolation:isolate; overflow:hidden; z-index:1;
}

/* Léger “flux” bleu interne, doux, sans rayures visibles */
@keyframes fyFlow {
  0%   { background-position: 0 0,  0 0; }
  100% { background-position: 220px 0, -160px 0; }
}
.name-chips::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(100% 80% at 20% 25%, rgba(0,188,255,.20), transparent 60%),
    radial-gradient(120% 90% at 80% 75%, rgba(0,188,255,.14), transparent 60%);
  mix-blend-mode: screen; opacity:.9;
  animation: fyFlow 10s linear infinite;
}

/* Cadre bleu très net + glow, comme sur ta 2e image */
@keyframes fyNeonPulse {
  0%,100% { box-shadow: 0 0 12px rgba(0,234,255,.75), 0 0 26px rgba(0,234,255,.45); }
  50%     { box-shadow: 0 0 18px rgba(0,234,255,.95), 0 0 40px rgba(0,234,255,.60); }
}
.name-chips::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  /* anneau uniquement sur le contour (épaisseur = padding) */
  padding:1.5px;                                /* ~1.5–2px comme ta 2e image */
  background: linear-gradient(90deg,#00eaff,#00c8ff,#00eaff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fyNeonPulse 2.2s ease-in-out infinite;
}

/* Accent léger au hover/active (sans bouger la position) */
.seat:hover .name-chips{ filter: brightness(1.06) saturate(1.08); }
.seat:active .name-chips{ transform: translateY(1px); }

/* Optionnel : sur TON siège, intensifie un peu le néon (comme focus) */
.seat.me .name-chips::after{
  animation-duration: 1.8s;
}

/* === SEAT PANEL — effet comme ta capture ============================ */
/* Réglages rapides */
/* transparence contrôlée */
:root{
  --seat-neon: #19e7ff;
  --panel-alpha: .60;                 /* transparence du fond (↑ = moins transparent) */
  --center-glow: rgba(0,210,255,.22); /* halo central discret */
  --scan-alpha: .06;
  --scan-gap: 4px;
  --scan-speed: 14s;
}

.name-chips{
  position:absolute; border-radius:14px; overflow:hidden; isolation:isolate; z-index:1;
  /* FOND NOIR TRANSPARENT + halo + vignette douce */
  background:
    radial-gradient(160% 140% at 50% 50%, transparent 60%, rgba(0,0,0,.25) 86%),
    radial-gradient(90% 70%  at 50% 45%, var(--center-glow), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,calc(var(--panel-alpha)*.85)),
                           rgba(0,0,0,var(--panel-alpha))) !important;
  border:1px solid transparent; box-shadow:none !important;
  color:#eaf9ff; font-weight:700; line-height:33px;
}


/* scanlines horizontales fines + défilement VERTICAL très lent */
@keyframes seatScanY{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 calc(var(--scan-gap)*4), 0 0; } /* boucle clean */
}
.name-chips::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  /* 1) fines lignes  2) micro grain doux (quasi invisible) */
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,var(--scan-alpha)) 0 1px,
                                         transparent 1px var(--scan-gap)),
    radial-gradient(100% 70% at 50% 45%, rgba(255,255,255,.04), transparent 60%);
  opacity:.28; mix-blend-mode: screen;
  animation: seatScanY var(--scan-speed) linear infinite;
}

/* cadre néon turquoise fin + léger “pulse” (comme ta bordure) */
@keyframes neonPulse{
  0%,100%{ box-shadow: 0 0 10px rgba(25,231,255,.70), 0 0 22px rgba(25,231,255,.40) }
  50%    { box-shadow: 0 0 16px rgba(25,231,255,.95), 0 0 34px rgba(25,231,255,.60) }
}
.name-chips::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:2px;                                  /* épaisseur du cadre */
  background: linear-gradient(90deg, var(--seat-neon), #0bd0ff, var(--seat-neon));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; /* anneau seulement */
  animation: neonPulse 2.4s ease-in-out infinite;
}

/* === TOUR ACTIF — corner beacons + double-bordure néon (très lisible) === */
:root{
  --turn-color: #19e7ff;   /* couleur du tour (changez ici au besoin) */
  --cb-len: 22px;          /* longueur des coins */
  --cb-thk: 3px;           /* épaisseur des coins */
}

.seat.turn{ overflow:visible; z-index:7; }

.seat.turn .name-chips{
  position:relative;
  z-index:0;                              /* pour nos pseudos */
  filter: brightness(1.05) saturate(1.06);/* légère mise en avant du panneau */
}

/* Double-bordure néon qui pulse (très visible) */
@keyframes ringPulse {
  0%,100% { box-shadow:
    0 0 0 2px color-mix(in oklab, var(--turn-color) 95%, #fff),
    0 0 18px color-mix(in oklab, var(--turn-color) 80%, transparent),
    0 0 38px color-mix(in oklab, var(--turn-color) 55%, transparent); }
  50%    { box-shadow:
    0 0 0 3px color-mix(in oklab, var(--turn-color) 100%, #fff),
    0 0 26px color-mix(in oklab, var(--turn-color) 95%, transparent),
    0 0 56px color-mix(in oklab, var(--turn-color) 70%, transparent); }
}
.seat.turn .name-chips::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  animation: ringPulse 1.9s ease-in-out infinite;
}

/* Balises néon aux 4 coins (épaisses + glow) */
@keyframes beaconPulse { 0%,100%{opacity:.75} 50%{opacity:1} }

.seat.turn .name-chips::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; z-index:1;
  /* 8 segments (2 par coin) + halo autour */
  background:
    /* coin haut gauche */
    linear-gradient(var(--turn-color),var(--turn-color)) left top/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-color),var(--turn-color)) left top/var(--cb-thk) var(--cb-len) no-repeat,
    /* coin haut droit */
    linear-gradient(var(--turn-color),var(--turn-color)) right top/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-color),var(--turn-color)) right top/var(--cb-thk) var(--cb-len) no-repeat,
    /* coin bas gauche */
    linear-gradient(var(--turn-color),var(--turn-color)) left bottom/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-color),var(--turn-color)) left bottom/var(--cb-thk) var(--cb-len) no-repeat,
    /* coin bas droit */
    linear-gradient(var(--turn-color),var(--turn-color)) right bottom/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-color),var(--turn-color)) right bottom/var(--cb-thk) var(--cb-len) no-repeat,
    /* halo doux pour donner du volume */
    radial-gradient(80% 70% at 50% 50%, color-mix(in oklab, var(--turn-color) 22%, transparent), transparent 60%);
  filter:
    drop-shadow(0 0 8px color-mix(in oklab, var(--turn-color) 90%, transparent))
    drop-shadow(0 0 18px color-mix(in oklab, var(--turn-color) 60%, transparent));
  animation: beaconPulse 1.9s ease-in-out infinite;
}

/* Option : change rapide de couleur par siège */
.seat.turn-amber { --turn-color:#ffb02e; }
.seat.turn-violet{ --turn-color:#8e5aff; }
.seat.turn-rose  { --turn-color:#ff5fa2; }
.seat.turn-lime  { --turn-color:#7bff6a; }

/* === TOUR ACTIF — ORANGE/AMBRE NÉON ++ (plus visible & arcade) === */
:root{
  --turn-deep: #ff7b00c0;   /* orange profond */
  --turn-color:#ff9a1f;   /* orange principal (néon) */
  --turn-hot:  #ffd36e;   /* jaune-ambre pour les éclats */
  --cb-len: 28px;         /* longueur des coins (plus long = plus visible) */
  --cb-thk: 4px;          /* épaisseur des coins */
}

/* ne coupe rien & priorité au-dessus */
.seat.turn{ overflow:visible; z-index:8; }
.seat.turn .name-chips{ position:relative; z-index:0; filter:brightness(1.05) saturate(1.1); }

/* 0) HALO “EMBER” DERRIÈRE le panneau (ne touche pas aux cartes) */
.seat.turn .name-chips::before{
  content:""; position:absolute; inset:-22px; border-radius:20px; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 70% at 50% 54%, color-mix(in oklab, var(--turn-color) 80%, transparent) 0%,
                                            transparent 66%),
    radial-gradient(90% 85% at 50% 54%, color-mix(in oklab, var(--turn-deep) 55%, transparent) 0%,
                                            transparent 72%);
  filter: blur(22px);
  opacity:.95;
}

/* 1) DOUBLE-BORDURE NÉON ORANGE qui pulse (très arcade) */
@keyframes ringPulse {
  0%,100% {
    box-shadow:
      0 0 0 2px color-mix(in oklab, var(--turn-hot) 95%, #fff),
      0 0 24px color-mix(in oklab, var(--turn-color) 90%, transparent),
      0 0 64px color-mix(in oklab, var(--turn-deep) 70%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--turn-hot) 100%, #fff),
      0 0 36px color-mix(in oklab, var(--turn-color) 98%, transparent),
      0 0 90px color-mix(in oklab, var(--turn-deep) 85%, transparent);
  }
}
.seat.turn .name-chips::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  animation: ringPulse 1.7s ease-in-out infinite;
}

/* 2) COINS “BEACONS” ÉPAIS + ÉCLATS ronds (super lisibles) */
@keyframes beaconPulse { 0%,100%{opacity:.80} 50%{opacity:1} }
.seat.turn .name-chips > ._corners,
.seat.turn .name-chips > ._corners2{ display:none; } /* safety si existait */

.seat.turn .name-chips::marker { content:none; } /* éviter interférences */

.seat.turn .name-chips:has(*){} /* no-op for specificity boost */

.seat.turn .name-chips {
  --_glowA: color-mix(in oklab, var(--turn-hot) 95%, #fff);
  --_glowB: color-mix(in oklab, var(--turn-color) 70%, transparent);
}
.seat.turn .name-chips::before,
.seat.turn .name-chips::after{ border-radius:14px; }

/* on superpose les coins sur une 3e pseudo couche via outline-style */
.seat.turn .name-chips ._beacons{ display:none; } /* placeholder if needed */

.seat.turn .name-chips::selection{ background:transparent }

/* coins & flares sur une nouvelle pseudo (utilise :after déjà pris → on ajoute via shadow) */
.seat.turn .name-chips{
  box-shadow:
    /* petit “sol” pour détacher visuellement */
    0 16px 28px rgba(0,0,0,.85),
    /* coins horizontaux */
    0 0 0 var(--cb-thk) var(--_glowA) inset,
    0 0 22px var(--_glowB) inset;
}

/* Dessin des coins + flares via background de la couche supérieure (pseudo déjà pris) */
.seat.turn .name-chips > .player-name, .seat.turn .name-chips > .stack{
  position: absolute;
  z-index: 2;
}
.seat.turn .name-chips::after{
  background:
    /* L haut gauche */
    linear-gradient(var(--turn-hot),var(--turn-hot)) left top/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-hot),var(--turn-hot)) left top/var(--cb-thk) var(--cb-len) no-repeat,
    /* L haut droit */
    linear-gradient(var(--turn-hot),var(--turn-hot)) right top/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-hot),var(--turn-hot)) right top/var(--cb-thk) var(--cb-len) no-repeat,
    /* L bas gauche */
    linear-gradient(var(--turn-hot),var(--turn-hot)) left bottom/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-hot),var(--turn-hot)) left bottom/var(--cb-thk) var(--cb-len) no-repeat,
    /* L bas droit */
    linear-gradient(var(--turn-hot),var(--turn-hot)) right bottom/var(--cb-len) var(--cb-thk) no-repeat,
    linear-gradient(var(--turn-hot),var(--turn-hot)) right bottom/var(--cb-thk) var(--cb-len) no-repeat,
    /* flares ronds dans chaque coin */
    radial-gradient(26px 26px at 11px 11px, var(--_glowA) 0 7px, var(--_glowB) 12px, transparent 100%),
    radial-gradient(26px 26px at calc(100% - 11px) 11px, var(--_glowA) 0 7px, var(--_glowB) 12px, transparent 100%),
    radial-gradient(26px 26px at 11px calc(100% - 11px), var(--_glowA) 0 7px, var(--_glowB) 12px, transparent 100%),
    radial-gradient(26px 26px at calc(100% - 11px) calc(100% - 11px), var(--_glowA) 0 7px, var(--_glowB) 12px, transparent 100%);
  background-blend-mode: screen,screen,screen,screen,screen,screen,screen,screen,screen,screen,screen,screen;
  animation: ringPulse 1.7s ease-in-out infinite; /* synchronisé */
}

/* ====== FOLD — tout le siège grisé, net et lisible ================== */
:root{
  --fold-veil: .78;     /* opacité du voile gris (0.65–0.85) */
  --fold-text: #cfd5da; /* couleur du texte sur fond gris     */
}

/* 1) état */
.seat.status-fold{ overflow:visible; z-index:5; }

/* 2) panneau : plus de néon, gris + voile sombre uniforme */
.seat.status-fold .name-chips{
  position:relative;
  filter: grayscale(1) brightness(.7) contrast(.95) saturate(.5);
  box-shadow: 0 10px 18px rgba(0,0,0,.55);     /* légère ombre, pas de glow */
}
.seat.status-fold .name-chips::after{ content:none !important; } /* coupe le cadre néon */

/* voile gris uniforme par-dessus le panneau */
.seat.status-fold .name-chips::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: rgba(0,0,0,var(--fold-veil));
}

/* 3) texte lisible sur gris */
.seat.status-fold .name-chips,
.seat.status-fold .name-chips *{
  color: var(--fold-text) !important;
  text-shadow: none !important;
}

/* 4) cartes & éléments du siège : gris + opacité plus faible */
.seat.status-fold :is(.holecard1,.holecard2,.card,.player-cards,
                      .bet-chip,.dealer-btn,.dealer,.action-chip){
  filter: grayscale(1) opacity(.45) !important;
}

/* 5) ruban discret "FOLDED" (optionnel) — diagonal, peu intrusif.
   Retire ce bloc si tu n’en veux pas. */
.seat.status-fold .name-chips::marker{ content:none; } /* safety */
.seat.status-fold .name-chips > ._foldRibbon{ display:none; }
.seat.status-fold .name-chips::before {}
.seat.status-fold .name-chips::after {}
.seat.status-fold .name-chips > .player-name,
.seat.status-fold .name-chips > .stack{ position:relative; z-index:1; }

.seat.status-fold .name-chips .fold-label{ display:none; } /* si tu as un span dédié */
.seat.status-fold .name-chips::before{} /* (laisse le voile ci-dessus) */
.seat.status-fold .name-chips::after{}  /* (on a déjà désactivé le néon) */

.seat.status-fold .name-chips::before,
.seat.status-fold .name-chips::after{ /* placeholders pour la compat */ }

/* petit bandeau texte centré (alternative au ruban diagonal) */
.seat.status-fold .name-chips::before{} /* garde le voile */
.seat.status-fold .name-chips::after{}  /* néon coupé */
.seat.status-fold .name-chips > ._badge { display:none; }
.seat.status-fold .name-chips::selection{ background:transparent; }

.seat.status-fold .name-chips::after{
  content:"FOLD";
  position:absolute; top:-9px; left:-7px; padding:4px 9px; border-radius:10px;
  font:800 10px/1.1 system-ui; letter-spacing:.5px; text-transform:uppercase;
  color:#0a0c11;
  background: linear-gradient(90deg,#ff7a00,#ff9a1f);
  box-shadow: 0 4px 14px rgba(255,154,31,.45), 0 0 0 2px rgba(255,255,255,.08) inset;
}

/* === BOARD: état "dos" + flip fiable (sans changer le HTML) ======= */

/* Les 5 cases peuvent se rétrécir horizontalement pour simuler le flip */
#flop1,#flop2,#flop3,#turn,#river,
#board .boardcard{
  backface-visibility:hidden;
  transform-origin:50% 50%;
  transition: transform 180ms ease; /* fermeture/ouverte rapide */
}

/* pendant la bascule (on ferme) */
.board-flip-in { transform: scaleX(0); }

/* état "dos de carte" (image inline ou via classe) */
.board-back{
  background-size: cover !important;
  background-position: center !important;
}

/* Améliore le rendu 3D du flip */
#table, #board, .board-area { perspective: 900px; }
.card, #flop1, #flop2, #flop3, #turn, #river {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Perspective 3D propre autour du board */
#table, #board, .board-area { perspective: 1200px; }

#flop1, #flop2, #flop3, #turn, #river,
#flop1 .card, #flop2 .card, #flop3 .card, #turn .card, #river .card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Flip fort + petit "pop" à la fin */
@keyframes fyFlipStrong {
  0%   { transform: rotateY(0) scale(1);              filter: brightness(1); }
  48%  { transform: rotateY(90deg) scale(0.92);       filter: brightness(1.28) saturate(1.15); }
  52%  { transform: rotateY(-88deg) scale(1.02);      filter: brightness(1.05); }
  86%  { transform: rotateY(-2deg) scale(1.015);      filter: none; }
  100% { transform: rotateY(0) scale(1);              filter: none; }
}

/* Perspective (si pas déjà définie) */
#table, #board, .board-area { perspective: 1200px; }

/* Flip doux appliqué au slot lui-même (marche même si l’intérieur change) */
.fy-flip-soft {
  animation: fyFlipSoft var(--flip-dur, 1300ms) ease-in-out var(--flip-delay,0ms) both;
  will-change: transform;
}
@keyframes fyFlipSoft {
  0%   { transform: rotateY(0) }
  45%  { transform: rotateY(90deg) }
  55%  { transform: rotateY(90deg) }
  100% { transform: rotateY(0) }
}

/* Afficher les \n comme des retours à la ligne dans la mise */
.seat .bet{
  white-space: pre-line;    /* \n => saut de ligne */
  text-align: center;       /* bien centré */
  line-height: 1.05;        /* compact */
}

/* (option) un peu plus petit pour éviter tout débordement */
.seat .bet { font-size: 14px; }
#seat0 .bet, #seat1 .bet, #seat2 .bet, #seat3 .bet, #seat4 .bet,
#seat5 .bet, #seat6 .bet, #seat7 .bet, #seat8 .bet, #seat9 .bet {
  max-width: 100%;
}

/* siège ALL-IN : en lice mais inactif */
.seat.status-allin .player-name {
  background: rgba(0, 200, 0, 0.18);
  box-shadow: 0 0 0 2px rgba(0, 200, 0, 0.35) inset;
  color: #b6ffb6; /* lisible sur fond sombre */
}
.seat.status-allin { filter: saturate(1.2); }

html, body{ transform:none !important; } /* évite le piège "fixed relatif" */

.my-hole-cards{
  position: fixed !important;   /* ancré au viewport, pas au layout de la table */
  left: 16px !important;
  bottom: 16px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 9999 !important;
  pointer-events: none !important; /* les clics passent dessous */
}

.my-hole-cards .card{
  width: 86px !important;       /* tes tailles */
  height: 114px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* Coupe tous les styles conditionnels qui déplaceraient les cartes pendant ALL-IN */
.allin .my-hole-cards,
.seat-allin .my-hole-cards,
.table--allin .my-hole-cards { transform:none !important; left:16px !important; }

.seat.my-seat .holecards{
  position: fixed !important;
  left: 120px !important;
  top: 470px !important;
  bottom: var(--hole-bottom, 16px) !important; /* au lieu de top:470px */
  width: 500px !important;
  height: 300px !important;
        z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
}

/* Ne change rien d'autre : on "peint" en vert à l'intérieur du bloc */
:is(#poker_table, .poker-table) .seat.is-allin-bg .name-chips{
  box-shadow: inset 0 0 0 9999px rgba(89, 237, 121, 0.504);
  /* garde tes arrondis existants */
}
:is(#poker_table, .poker-table) .seat .name-chips{ position: relative; } /* si pas déjà en relative */

:is(#poker_table, .poker-table) .seat.is-allin-bg .name-chips::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #00d0ff76;
  opacity: .9;
  border-radius: inherit;
  pointer-events: none;
}

/* ===== Seats alignés sur la taille du board, SANS toucher ton siège perso ===== */
:is(#poker_table, .poker-table){
  /* mets la taille de tes 5 cartes du haut (board) */
  --board-card-w: 120px;
  --board-card-h: 147px;
  --board-card-r: 14px;
}

/* Cartes des sièges (sauf .my-seat) = même taille que le board */
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .card{
  width:  var(--board-card-w) !important;
  height: var(--board-card-h) !important;
  border-radius: var(--board-card-r) !important;
  background-size: cover !important;
  background-position: center !important;
        z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
}

/* Les wrappers des 2 cartes suivent la même taille */
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard1,
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard2{
  width:  var(--board-card-w) !important;
  height: var(--board-card-h) !important;
        z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
}

/* Empilement propre (si tu les veux en colonne) */
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard1{ top: 0 !important; }
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard2{
  top: calc(var(--board-card-h) * 0.78) !important; /* chevauchement ~22% */
}

/* Neutralise tes anciennes tailles qui rapetissaient les cartes (hors .my-seat) */
:is(#poker_table, .poker-table) .seat:not(.my-seat) .card{ 
  width: var(--board-card-w) !important; 
  height: var(--board-card-h) !important; 
}

/* Plus d’écart vertical entre les 2 cartes des autres sièges */
:is(#poker_table, .poker-table){ 
  --seat-v-gap: 0.96;   /* 0.78 par défaut ; ↑ = plus d’espace (ex: 0.82, 0.86, 0.90) */
}

:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard1{
  top: -80px !important;
        z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
}
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard2{
  top: 65px !important;
        z-index: 2 !important;  /* tu peux même mettre 0 si tu veux */
}

/* ↑ Monte/descend le rail des 5 cartes */
:is(#poker_table, .poker-table){ --board-dy: -50px; } /* négatif = plus haut */

:is(#poker_table, .poker-table) #board,
:is(#poker_table, .poker-table) #board-placeholders{
  /* on garde ton centrage X, et on ajoute un offset Y */
  transform: translate(-50%, var(--board-dy)) !important;
}


/* ==== Décalage simple pendant le REVEAL ==== */
/* règle seulement ces 2 valeurs */
:is(#poker_table, .poker-table){
  --reveal-top-dy: 0px;  /* avant: -28px  → monte moins */
  --reveal-bot-dy: 20px;  /* avant:  28px  → descend moins */
}

/* Rangée du HAUT (seats 0→4) — décalé seulement si reveal */
#seat0 .holecards:has(.card.revealed),
#seat1 .holecards:has(.card.revealed),
#seat2 .holecards:has(.card.revealed),
#seat3 .holecards:has(.card.revealed),
#seat4 .holecards:has(.card.revealed){
  transform: translateY(var(--reveal-top-dy)) !important;
  will-change: transform;
}

/* Rangée du BAS (seats 5→9) — décalé seulement si reveal (hors .my-seat) */
#seat5:not(.my-seat) .holecards:has(.card.revealed),
#seat6:not(.my-seat) .holecards:has(.card.revealed),
#seat7:not(.my-seat) .holecards:has(.card.revealed),
#seat8:not(.my-seat) .holecards:has(.card.revealed),
#seat9:not(.my-seat) .holecards:has(.card.revealed){
  transform: translateY(var(--reveal-bot-dy)) !important;
  will-change: transform;
}

/* Sécurité : ton siège perso ne bouge pas avec ce système */
.seat.my-seat .holecards{ transform: none !important; }


/* =========================================================
   FIX — ta table a “disparu” car on a mis
   background: transparent !important sur .poker-table.
   On NE neutralise plus .poker-table, et on remet sa skin.
   ========================================================= */

/* 1) NEUTRALISATION SANS TOUCHER .poker-table */
:is(#game-container, .table-container, .poker-table-wrapper,
    #table, #board, #board-placeholders){
  background-color: transparent !important; /* ← ne touche qu’à la couleur */
  border: none !important;
  box-shadow: none !important;
}
/* On retire .poker-table du bloc ci-dessus pour ne pas écraser son background-image */

/* 2) TABLE RÉTABLIE + AU-DESSUS DU FOND */
.poker-table{
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, -100%);
  width: 745px; height: 411px;

  /* Remet l’image de la table */
  background-image: url('../images/poker_table.png') !important;
  background-color: transparent !important; /* on laisse passer le fond étoilé autour */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  border: none !important;
  box-shadow: none !important;

  /* s’assure de passer devant les aurores/étoiles */
  z-index: 1;
}

/* 3) CONTENEURS DU JEU AU-DESSUS DU FOND */
:is(#game-container, .poker-table-wrapper, #table, #board){ 
  position: relative; 
  z-index: 1; 
}

/* 4) COUCHES DE FOND — restent derrière (z-index 0 ou négatif OK) */
html::before, html::after, body::before{
  z-index: 0; /* si tu avais mis des valeurs négatives, ça marche aussi */
}


   /* =========================================================
Début du nouveau fond   ========================================================= */
/* =========================================================
   (Option) Si tu veux garder le “Nuke” global mais safe :
   Remplacer TOUT “background: transparent !important;”
   par “background-color: transparent !important;”
   Ça n’efface pas les background-image des éléments comme la table.
   ========================================================= */

   /* =========================================================
   STARFIELD + AURORAS (fond plein écran, sans toucher au jeu)
   ========================================================= */
:root{
  /* Couleurs d’aurores */
  --aurora-cyan:   #2ef0ff;
  --aurora-violet: #8a6cff;
  --aurora-rose:   #ff6e5b;
  --aurora-vert:   #2bd38a;
  --aurora-jaune:  #ffd447;

  /* Intensités / vitesses */
  --aurora-opacity: .55;
  --stars-opacity:  .90;
  --twinkle-min:    .35;
  --twinkle-max:    1.00;
  --speed-aurora:   22s;
  --speed-drift:    48s;
  --speed-twinkle:  3.6s;

  --sky-deep-1: #04070b;
  --sky-deep-2: #0a0f1a;
}

/* Fond de base VRAIMENT noir sur toute la page */
html{
  height: 100%;
  background: #020309 !important;
}

html, body{
  margin: 0;
  padding: 0;
}

/* Neutralise les anciens fonds/cadres */
#game-container, .table-container, .poker-table-wrapper, .poker-table,
#table, #board, #board-placeholders{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== Couche 0 — ciel noir + vignette ===== */
body{
  min-height: 100vh;
  position: relative;
  z-index: 0;
  background:
    radial-gradient(100% 70% at 50% 45%, rgba(0,0,0,.55), transparent 62%),
    linear-gradient(180deg, var(--sky-deep-1), var(--sky-deep-2)) !important;
  overflow-x: hidden;
}

/* ===== Couche 1 — AURORES (voiles flous) ===== */
body::before{
  content:"";
  position: fixed;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  filter: blur(20px) saturate(120%);
  opacity: var(--aurora-opacity);
  background:
    radial-gradient(70% 45% at 18% 28%, var(--aurora-cyan),   transparent 60%),
    radial-gradient(60% 40% at 82% 72%, var(--aurora-violet), transparent 60%),
    radial-gradient(65% 45% at 50% 92%, var(--aurora-vert),   transparent 60%),
    radial-gradient(55% 40% at 22% 78%, var(--aurora-rose),   transparent 60%),
    radial-gradient(50% 35% at 80% 18%, var(--aurora-jaune),  transparent 60%);
  animation: auroraDrift var(--speed-aurora) ease-in-out infinite alternate;
}

/* ===== Couche 2 — ÉTOILES (deux sets dans le même pseudo) ===== */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;
  opacity: var(--stars-opacity);
  background:
    /* L1 grosses étoiles */
    radial-gradient(1.2px 1.2px at 8% 12%,   #fff 0 1.2px, transparent 1.3px),
    radial-gradient(1.2px 1.2px at 16% 38%,  #fff 0 1.2px, transparent 1.3px),
    radial-gradient(1.4px 1.4px at 28% 22%,  #fff 0 1.4px, transparent 1.5px),
    radial-gradient(1.0px 1.0px at 34% 66%,  #fff 0 1.0px, transparent 1.1px),
    radial-gradient(1.6px 1.6px at 42% 14%,  #fff 0 1.6px, transparent 1.7px),
    radial-gradient(1.2px 1.2px at 51% 31%,  #fff 0 1.2px, transparent 1.3px),
    radial-gradient(1.0px 1.0px at 57% 72%,  #fff 0 1.0px, transparent 1.1px),
    radial-gradient(1.4px 1.4px at 63% 48%,  #fff 0 1.4px, transparent 1.5px),
    radial-gradient(1.2px 1.2px at 71% 18%,  #fff 0 1.2px, transparent 1.3px),
    radial-gradient(1.0px 1.0px at 78% 36%,  #fff 0 1.0px, transparent 1.1px),
    radial-gradient(1.6px 1.6px at 85% 74%,  #fff 0 1.6px, transparent 1.7px),
    radial-gradient(1.2px 1.2px at 92% 56%,  #fff 0 1.2px, transparent 1.3px),
    radial-gradient(1.4px 1.4px at 12% 78%, rgba(255,214,120,.9) 0 1.4px, transparent 1.5px),
    radial-gradient(1.2px 1.2px at 46% 84%, rgba(126,179,255,.9) 0 1.2px, transparent 1.3px),
    radial-gradient(1.4px 1.4px at 68% 60%, rgba(255,160,160,.9) 0 1.4px, transparent 1.5px),
    /* L2 petites étoiles plus denses */
    radial-gradient(.9px .9px at 5% 25%,   #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 11% 52%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 19% 10%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 24% 43%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 27% 82%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 33% 67%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 39% 35%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 44% 12%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 47% 90%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 52% 58%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 58% 22%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 63% 76%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 69% 41%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 73% 15%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 77% 88%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 82% 33%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 87% 65%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 91% 27%,  #fff 0 .9px, transparent 1px),
    radial-gradient(.9px .9px at 95% 50%,  #fff 0 .9px, transparent 1px);
  animation: starDrift var(--speed-drift) linear infinite,
             twinkle   var(--speed-twinkle) ease-in-out infinite;
}

/* ===== Animations ===== */
@keyframes auroraDrift{
  0%   { transform: translate(-2%, -1%) rotate(0.4deg) scale(1.00); }
  50%  { transform: translate( 2%,  1%) rotate(-0.2deg) scale(1.02); }
  100% { transform: translate(-1%,  2%) rotate(0.3deg)  scale(1.01); }
}
@keyframes starDrift{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-18px, -12px, 0); }
}
@keyframes twinkle{
  0%,100% { filter: brightness(var(--twinkle-min)); opacity: .92; }
  50%     { filter: brightness(var(--twinkle-max)); opacity: 1; }
}

/* Réduction d’animations si besoin */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none !important; }
}

/* Optionnel : léger ajustement mobile si tu veux encore foncer */
@media (max-width: 800px){
  :root{
    --aurora-opacity: .45;
    --stars-opacity: .80;
  }
}

/* =========================
   FIX PACK — Board + Seats
   À coller tout en bas
   ========================= */

/* 1) Table visuelle : on s’assure que l’image reste bien appliquée */
.poker-table{
  background-image: url('../images/poker_table.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1;
}

/* 2) Board unique en "rail" flex (supprime les offsets/margins hérités) */
#board{
  position: absolute !important;
  top: -184px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 630px !important;
  height: 150px !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 3 !important;
}

/* Normalise TOUTES les cartes du board et tue les vieux offsets */
#flop1, #flop2, #flop3, #turn, #river,
#board .card, .boardcard, .card.boardcard{
  position: static !important;
  top: auto !important; right: auto !important; left: auto !important; margin: 0 !important;
  width: 120px !important; height: 147px !important; flex: 0 0 120px !important;
  border-radius: 14px !important;
  background-size: cover !important; background-position: center !important;
}

/* Supprime l’espace parasite */
#board .card:not(:last-child){ margin-right: 0 !important; }

/* 3) Neutralise l’ancienne taille globale des cartes hors board */
.card{ width: auto !important; height: auto !important; }

/* 4) Holecards : anti-décalage total pendant ALL-IN / reveal.
      On n’anime QUE la pseudo-face (::after) déjà prévue dans ton CSS. */
.seat .holecards{ transform: none !important; }
.seat .holecards .card{ transform: none !important; }           /* ok car la rotation est sur ::after */
.table--allin .seat .holecards,
.seat.status-allin .holecards{ transform: none !important; }

/* 5) Pour les autres sièges (hors .my-seat), garde une taille homogène */
:is(#poker_table, .poker-table){
  --board-card-w: 120px;
  --board-card-h: 147px;
  --board-card-r: 14px;
}
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .card{
  width: var(--board-card-w) !important;
  height: var(--board-card-h) !important;
  border-radius: var(--board-card-r) !important;
  background-size: cover !important; background-position: center !important;
}
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard1{
  top: -80px !important; left: 0 !important; width: var(--board-card-w) !important; height: var(--board-card-h) !important;
}
:is(#poker_table, .poker-table) .seat:not(.my-seat) .holecards .holecard2{
  top:  65px !important; left: 0 !important; width: var(--board-card-w) !important; height: var(--board-card-h) !important;
}

/* 6) Le texte de mise (bet) reste au-dessus des cartes, mais sans les déplacer */
.seat .bet{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: pre-line;
}

/* 7) Coupe définitivement les vieux styles .boardcard “absolus” */
.boardcard{ top:auto !important; left:auto !important; right:auto !important; }

/* 8) Sécurité : aucune règle ailleurs ne peut re-scaler le board */
#board img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }


   /* =========================================================
Fin du nouveau fond   ========================================================= */


/* Mains perdantes : cartes grisées (sans halo) */
/* ===== Losing hand v2: gris + hatch + slash ===== */
.seat.losing-hand .holecards { 
  position: relative; 
  z-index: 2;
}
.seat.losing-hand .holecards .card,
.seat.losing-hand .holecards .card::after{
  filter: grayscale(1) brightness(.65);
  opacity: .70;
  box-shadow: none !important;
  border-color: transparent !important;
}

#seat0.winning-hand .holecards .card {
  border: none !important;
  box-shadow: none !important;
}

:root{
  --win-neon:        #00eaff;   /* change ici si tu veux */
  --win-neon-strong: #5df2ff;
}

/* remplace entièrement ton bloc */
.winning-hand .holecards .card{
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  /* bord fin et lueur interne très douce */
  border: 1px solid rgba(0,234,255,.70) !important;          /* cyan */
  box-shadow: inset 0 0 6px rgba(0,234,255,.22) !important;  /* glow léger */
  transition: border .2s ease, box-shadow .2s ease;
}

.winning-hand .holecards .card{
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;

  /* très discret */
  border: 1px solid rgba(0,234,255,.45) !important;       /* cyan pâle */
  box-shadow: inset 0 0 4px rgba(0,234,255,.18) !important;
  transition: border .2s ease, box-shadow .2s ease;
}



/* HALO NÉON — sur ::before (PAS ::after car ::after = face de carte pour le flip) */
.seat.winning-hand .holecards .card::before{
  content:"";
  position:absolute;
  inset:-8px;                     /* déborde pour l’auréole */
  border-radius: inherit;
  pointer-events:none;
  z-index: 2;                     /* au-dessus de la carte, sous le texte */
  box-shadow:
    0 0 2px   var(--win-neon),
    0 0 8px   var(--win-neon),
    0 0 16px  var(--win-neon-strong),
    0 0 28px  var(--win-neon-strong);
  animation: winNeonPulse 1.6s ease-in-out infinite;
}
/* bonus : un petit drop-shadow sur le groupe (pas obligatoire) */
.seat.winning-hand .holecards{
  filter:
    drop-shadow(0 0 6px  var(--win-neon))
    drop-shadow(0 0 18px var(--win-neon-strong));
}

@keyframes winNeonPulse{
  0%,100%{
    filter: drop-shadow(0 0 6px var(--win-neon))
            drop-shadow(0 0 16px var(--win-neon))
            drop-shadow(0 0 28px var(--win-neon-strong));
  }
  50%{
    filter: drop-shadow(0 0 8px var(--win-neon))
            drop-shadow(0 0 22px var(--win-neon-strong))
            drop-shadow(0 0 36px var(--win-neon-strong));
  }
}

/* anneau léger autour de chaque carte – utilise ::before (pas de conflit avec ::after du flip) */
.seat.winning-hand .holecards .card::before{
  content:"";
  position:absolute;
  inset:-2px;                 /* minuscule débord pour l’auréole */
  border-radius: inherit;
  pointer-events:none;
  z-index: 2;

  /* lueur très douce */
  box-shadow:
    0 0 6px  rgba(0,234,255,.24),
    0 0 10px rgba(0,234,255,.14);
}

/* anneau léger autour de chaque carte gagnante */
.seat.winning-hand .holecards .card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  z-index: 2;
  box-shadow:
    0 0 6px  rgba(0,234,255,.22),
    0 0 10px rgba(0,234,255,.12);
  animation: neonSoft 2.8s ease-in-out infinite;
}

@keyframes neonSoft{
  0%,100%{ box-shadow:
    0 0 4px  rgba(0,234,255,.18),
    0 0 8px  rgba(0,234,255,.10); }
  50%    { box-shadow:
    0 0 7px  rgba(0,234,255,.28),
    0 0 12px rgba(0,234,255,.16); }
}

/* ===== Écran fin de partie (arcade) ===== */
:root{
  --accent-win:  #00eaff;   /* cyan néon */
  --accent-lose: #ff4c4c;   /* rouge néon */
}

html,body{height:100%; margin:0;}
.end-arcade{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% 15%, rgba(0,238,255,.07), transparent 60%),
    radial-gradient(1100px 550px at 80% 85%, rgba(255,64,170,.07), transparent 60%),
    #05070a;
  color: #e9faff;
  font-family: system-ui, -apple-system, Inter, Segoe UI, Roboto, Arial, sans-serif;
}

/* Carte centrale */
.end-arcade .end-card{
  position: relative;
  width: min(680px, 92vw);
  padding: 28px 26px 22px;
  border-radius: 20px;
  background: rgba(16,22,30,.78);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 24px 80px rgba(0,0,0,.45);
}

/* Halo selon état */
.end-arcade.win  .end-card::before,
.end-arcade.lose .end-card::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  animation: cardPulse 2.8s ease-in-out infinite;
}
.end-arcade.win  .end-card::before{ box-shadow:
   0 0 10px rgba(0,234,255,.30),
   0 0 26px rgba(0,234,255,.18),
   0 0 48px rgba(0,234,255,.12); }
.end-arcade.lose .end-card::before{ box-shadow:
   0 0 10px rgba(255,76,76,.30),
   0 0 26px rgba(255,76,76,.18),
   0 0 48px rgba(255,76,76,.12); }

@keyframes cardPulse{
  50% { filter: brightness(1.06); }
}

.end-arcade h1{
  margin: 4px 0 6px; font-size: 32px; line-height: 1.15; letter-spacing: .3px;
}
.end-arcade.win  h1{ color:#bff6ff; text-shadow: 0 0 10px rgba(0,234,255,.30); }
.end-arcade.lose h1{ color:#ffc9c9; text-shadow: 0 0 10px rgba(255,76,76,.30); }

.end-arcade .sub   { margin: 0 0 6px; opacity:.9; }
.end-arcade .detail{ margin: 0 0 16px; opacity:.75; }

/* Boutons (optionnels) */
.end-arcade .actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px; }
.end-arcade .btn{
  appearance:none; cursor:pointer; user-select:none;
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#e9faff; font-weight:600;
  transition:.18s transform, .18s box-shadow, .18s border-color, .18s background;
  text-decoration:none; display:inline-block;
}
.end-arcade .btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }

.end-arcade.win  .btn.primary{
  border-color: rgba(0,234,255,.6);
  background: linear-gradient(180deg, rgba(0,234,255,.20), rgba(0,234,255,.08));
  box-shadow: 0 0 10px rgba(0,234,255,.22);
}
.end-arcade.lose .btn.primary{
  border-color: rgba(255,76,76,.6);
  background: linear-gradient(180deg, rgba(255,76,76,.20), rgba(255,76,76,.08));
  box-shadow: 0 0 10px rgba(255,76,76,.22);
}

.end-arcade .foot{ margin-top:10px; font-size:12px; opacity:.65; }


/* Neutralise tout ancien overlay global qui débordait */
:is(#poker_table, .poker-table) .seat.is-bust::after {
  content: none !important;
}

/* === STYLE BUSTED — Siège éliminé === */

/* 1. Base : on grise le siège, tout en gardant sa carte intacte */
:is(#poker_table, .poker-table) .seat.is-bust {
  filter: grayscale(100%) brightness(.9);
}

/* Spectateur BUST : garder le dos normal (pas grisé) */
:is(#poker_table, .poker-table) .seat.is-bust.spectator-bust {
  filter: none !important;
}
:is(#poker_table, .poker-table) .seat.is-bust.spectator-bust .holecards .card {
  filter: none !important;
  opacity: .55 !important;
  box-shadow: none !important;
}
/* Final winner/loser spectator view: keep cards transparent */
:is(#poker_table, .poker-table) .seat.final-spectator .holecards .card{
  filter: none !important;
  opacity: .55 !important;
  box-shadow: none !important;
}
/* Spectateur BUST : dos I/M et position standard du siège */
:is(#poker_table, .poker-table) .seat.spectator-bust .holecards .holecard1 .card{
  background-image: url('static/images/custom_I.png') !important;
}
:is(#poker_table, .poker-table) .seat.spectator-bust .holecards .holecard2 .card{
  background-image: url('static/images/custom_M.png') !important;
}

/* === STYLE WAITING - siège inactif mais rejoignable === */
/* WAIT : grise surtout la carte centrale, sans affecter dealer/SB/BB */
:is(#poker_table, .poker-table) .seat.waiting-seat {
  filter: none;
  opacity: 1;
}
:is(#poker_table, .poker-table) .seat.waiting-seat .name-chips,
:is(#poker_table, .poker-table) .seat.waiting-seat .bet,
:is(#poker_table, .poker-table) .seat.waiting-seat .chips,
:is(#poker_table, .poker-table) .seat.waiting-seat .player-name{
  filter: grayscale(70%) brightness(.85);
  opacity: .7;
}
/* Ne pas griser le dealer et les blindes sur WAIT/BREAK */
:is(#poker_table, .poker-table) .seat.waiting-seat #button,
:is(#poker_table, .poker-table) .seat.waiting-seat.has-sb::after,
:is(#poker_table, .poker-table) .seat.waiting-seat.has-bb::after,
:is(#poker_table, .poker-table) .seat.break-seat #button,
:is(#poker_table, .poker-table) .seat.break-seat.has-sb::after,
:is(#poker_table, .poker-table) .seat.break-seat.has-bb::after{
  filter: none !important;
  opacity: 1 !important;
}

:is(#poker_table, .poker-table) .seat.waiting-seat .name-chips{
  position: relative;
}

:is(#poker_table, .poker-table) .seat.waiting-seat .name-chips::after{
  content: "WAIT";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  pointer-events: none;
}
/* WAIT avec blindes : badge en haut pour laisser visible SB/BB */
:is(#poker_table, .poker-table) .seat.waiting-seat.waiting-blind .name-chips::after{
  inset: 6px 8px auto 8px;
  height: 18px;
  font-size: 11px;
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  justify-content: center;
}

/* 2. La carte centrale du siège (nom + jetons) devient le support de l’overlay */
:is(#poker_table, .poker-table) .seat.is-bust .name-chips{
  position: relative !important;
  overflow: hidden !important;              /* coupe aux bords arrondis existants */
}

/* 3. Voile rouge léger à l’intérieur de la carte du siège */
:is(#poker_table, .poker-table) .seat.is-bust .name-chips::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 50% 50%,
              rgba(255,60,60,.22),
              rgba(255,60,60,.08) 70%,
              transparent 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* 4. Libellé BUSTED centré */
:is(#poker_table, .poker-table) .seat.is-bust .name-chips::after{
  content: "BUSTED";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  z-index: 2;
  pointer-events: none;
}

/* 5. On masque les infos parasites (stack, mise, jetons…) mais PAS le nom */
:is(#poker_table, .poker-table) .seat.is-bust .stack,
:is(#poker_table, .poker-table) .seat.is-bust .chips,
:is(#poker_table, .poker-table) .seat.is-bust .bet,
:is(#poker_table, .poker-table) .seat.is-bust .bet-amount{
  visibility: hidden !important;
}

/* 6. Le nom reste discret sous l’overlay (si tu veux le laisser visible) */
:is(#poker_table, .poker-table) .seat.is-bust .player-name{
  position: relative;
  z-index: 3;
  opacity: .5 !important;
  filter: none !important;
}

#toast.toast{
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) scale(.98);
  background: rgba(20,22,28,.92); color: #fff; padding: 10px 16px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; pointer-events: none;
  transition: .18s ease; font-weight: 700; letter-spacing: .2px; z-index: 10;
}
#toast.toast.show{ opacity: 1; transform: translateX(-50%) scale(1); }

.hist-tabs{
  display:inline-flex; gap:0; padding:4px; border:1px solid #2a2a40;
  border-radius:12px; background:#0f1220; box-shadow:inset 0 1px 0 #0a0d18;
}
.hist-tabs button{
  border:0; background:transparent; color:#9aa; padding:6px 12px; cursor:pointer;
  border-radius:8px; font-weight:600;
}
.hist-tabs button:hover{ color:#eaeaff; }
.hist-tabs button.active{
  background:#2a2a40; color:#fff; box-shadow:0 0 0 1px #3b3b5e inset;
}

/* ===========================
   ARCADE OVERLAY — RESPONSIVE
   =========================== */

/* Cadre général de la carte (PC + mobile) */
.arcade-overlay .ao-card{
  box-sizing: border-box;
  max-width: 540px;   /* taille max sur grand écran */
  width: 90vw;        /* jamais plus large que l'écran */
}

/* Titre + texte : on s'assure que ça passe bien */
.arcade-overlay .ao-title{
  word-wrap: break-word;
}

/* Sous-texte winner/loser */
.arcade-overlay .ao-sub{
  word-wrap: break-word;
}

/* ===== Spécial mobiles ===== */
@media (max-width: 768px){
  .arcade-overlay .ao-card{
    max-width: 94vw;        /* encore un peu plus serré aux bords */
    width: 94vw;
    margin: 0 auto;
    padding: 12px 14px;     /* moins de padding pour que ça prenne moins de place */
    border-radius: 14px;
  }

  .arcade-overlay .ao-title{
    font-size: 20px;        /* titre un peu plus petit */
    line-height: 1.2;
  }

  .arcade-overlay .ao-sub{
    font-size: 14px;        /* texte plus compact */
    line-height: 1.35;
  }

  /* Bouton de fermeture moins massif sur mobile */
  .arcade-overlay .ao-x{
    font-size: 18px;
    width: 28px;
    height: 28px;
    line-height: 26px;
  }
}

@media (max-width:800px) {
  body {
    flex-direction: column;
  }
  header {
    position: static;
    height: auto;
    flex-wrap: wrap;
  }
  main {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .panel {
    margin-bottom: 10px;
  }
}

/* ===== FIX DEALER BUTTON — toujours sous les cartes et centré dans chaque siège ===== */
/* Tous les sièges laissent dépasser le bouton en bas */

/* Wrapper du bouton TIME : même position que le timer */
#time-button-wrapper {
  position: absolute;
  top: 160px;
  right: 200px;
  width: 80px;
  height: 80px;
  z-index: 1600;

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

  pointer-events: none; /* le clic passe uniquement sur le bouton */
}

/* Bouton circulaire “chip / néon” */
#btn-time {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  /* Fond bien opaque qui masque le timer */
  background: radial-gradient(circle at 30% 30%, #1d1f2b, #05060a 70%, #000 100%);
  border: 0;

  /* Anneau lumineux vert + léger halo */
  box-shadow:
    0 0 0 3px rgba(0, 230, 118, 0.85),   /* anneau principal */
    0 0 18px rgba(0, 230, 118, 0.7),     /* halo externe */
    inset 0 0 8px rgba(0, 0, 0, 0.7);    /* ombre interne */

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

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

  cursor: pointer;
  pointer-events: auto;

  position: relative;
  overflow: hidden;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background 0.15s ease-out;
}

/* Petit anneau intérieur pour le côté “jeton” */
#btn-time::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0, 230, 118, 0.5);
  box-shadow: inset 0 0 6px rgba(0, 230, 118, 0.35);
}

/* Liserés discrets façon segments de chip */
#btn-time::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Hover / focus : bouton qui “pousse” un peu */
#btn-time:hover,
#btn-time:focus-visible {
  transform: scale(1.06);
  box-shadow:
    0 0 0 3px rgba(0, 255, 160, 1),
    0 0 26px rgba(0, 255, 160, 0.9),
    inset 0 0 10px rgba(0, 0, 0, 0.8);
}

/* État actif (clic) */
#btn-time:active {
  transform: scale(0.97);
  box-shadow:
    0 0 0 2px rgba(0, 230, 118, 0.9),
    0 0 14px rgba(0, 230, 118, 0.7),
    inset 0 0 14px rgba(0, 0, 0, 0.9);
}

/* Layout vertical + rangée principale */
.calc-vertical-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-row {
  width: 100%;
}

.calc-row-display {
  display: flex;
  align-items: center;
}

.stats-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 15, .7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.stats-card{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 92vw);
  max-height: 78vh;
  overflow: auto;
  background: linear-gradient(180deg, rgba(15, 24, 44, .98), rgba(8, 12, 22, .98));
  border: 2px solid rgba(53,199,255,.55);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 24px rgba(46,240,255,.25);
}
#stats-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 12050;
}
#stats-modal.open{
  display: block;
}
.stats-close{
  position: absolute;
  right: 12px;
  top: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: linear-gradient(180deg, #ff3b3b, #d40000 70%, #a80000 100%);
  color: #fff;
  font: 900 12px/1 "Trebuchet MS", sans-serif;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 0 10px rgba(255,0,0,.35);
}
#stats-modal h2{
  margin: 0 0 6px;
  font: 900 20px/1.1 "Press Start 2P", system-ui, sans-serif;
  color: #2ef0ff;
  text-shadow: 0 0 8px rgba(46,240,255,.6);
}
.stats-sub{
  margin: 0 0 12px;
  font: 800 13px/1.3 "Trebuchet MS", sans-serif;
  color: #b8d9ff;
}
.calc-stats-list{
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}
.calc-stats-loading,
.calc-stats-empty{
  padding: 8px;
  text-align: center;
  font: 900 14px/1.2 "Trebuchet MS", sans-serif;
  color: #b8d9ff;
}
.calc-stat-card{
  background: rgba(6, 10, 18, .85);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  gap: 6px;
}
.calc-stat-card.is-busted{
  filter: grayscale(1) brightness(.8);
  opacity: .6;
}
.calc-stat-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.calc-stat-title{
  font: 900 13px/1 "Trebuchet MS", sans-serif;
  color: #7fd2ff;
  text-transform: uppercase;
}
.calc-stat-name{
  font: 900 14px/1.2 "Trebuchet MS", sans-serif;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calc-stat-state{
  font: 900 12px/1 "Trebuchet MS", sans-serif;
  color: #ffd1a6;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.calc-stat-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.calc-stat-item{
  display: grid;
  gap: 2px;
}
.calc-stat-item span{
  font: 900 11px/1 "Trebuchet MS", sans-serif;
  color: #9ec6ff;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.calc-stat-item strong{
  font: 900 16px/1 "Trebuchet MS", sans-serif;
  color: #ffffff;
}
.calc-stat-modes{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 900 12px/1 "Trebuchet MS", sans-serif;
  color: #b8d9ff;
}
.calc-stat-modes .mode-label{
  text-transform: uppercase;
  letter-spacing: .04em;
}
.calc-stat-modes .mode-pill{
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(53,199,255,.18);
  border: 1px solid rgba(53,199,255,.45);
  color: #e6f5ff;
  font-weight: 900;
}
.calc-stat-modes .mode-empty{
  color: #7a92b6;
}
.calc-stats-note{
  margin-top: 6px;
  font: 900 11px/1.2 "Trebuchet MS", sans-serif;
  color: #9ec6ff;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: right;
}

/* Desktop override: place ? just left of SOS (keep mobile untouched) */
@media (min-width: 901px){
  #rules-help-btn{
    left: auto !important;
    right: 78px !important;
  }
  #sos-help-btn{
    left: auto !important;
    right: 16px !important;
  }
}

/* Rangée principale : 4 colonnes */
.calc-row-main {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 0.9fr 1.2fr; /* actions / chips / pot / digits */
  gap: 12px;
}

/* Standard subscription: remove pot column, replace digits with big ALL-IN */
.raise-window.calc-standard .calc-col-pot{
  display: none;
}
.raise-window.calc-standard .raise-digit-grid{
  display: none;
}
.raise-window.calc-standard .calc-row-main{
  grid-template-columns: 0.9fr 1.1fr 1.2fr; /* actions / chips / all-in */
}

.raise-window .calc-allin-big{
  display: none;
  width: 100%;
  min-height: 180px;
  font-size: 18px;
}
.raise-window.calc-standard .calc-allin-big{
  display: block;
  height: 100%;
}

/* Standard: hide only buttons explicitly marked */
.raise-window.calc-standard .calc-col-actions .calc-btn.hide-standard{
  display: none;
}

.calc-row-slider{
  width: 100%;
  padding: 4px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.calc-row-slider input[type="range"]{
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: #1b2b45;
  height: 14px;
  pointer-events: auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 0 10px rgba(0,0,0,.7), 0 0 10px rgba(0,200,255,.25);
}
/* ticks behind the slider */
.calc-row-slider::before{
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 6px;
  height: 14px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.35) 0 1px,
      rgba(255,255,255,0) 1px 20%
    );
  pointer-events: none;
  opacity: .7;
}

.calc-slider-labels{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  font: 900 18px/1 "Press Start 2P", system-ui, sans-serif;
  color: #cfe6ff;
  text-align: center;
  letter-spacing: .02em;
  text-shadow:
    0 0 6px rgba(46,240,255,.6),
    0 1px 0 rgba(0,0,0,.8);
  user-select: none;
}
/* Make labels pop on dark background */
.calc-slider-labels span{
  padding: 2px 0;
  border-radius: 4px;
  background: rgba(3, 12, 26, .55);
  box-shadow: 0 1px 0 rgba(0,0,0,.7), inset 0 0 6px rgba(46,240,255,.18);
}

/* Slider custom: arcade neon */
.calc-row-slider input[type="range"]::-webkit-slider-runnable-track{
  height: 14px;
  border-radius: 999px;
  background: transparent;
}
.calc-row-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -5px;
  border-radius: 8px;
  background: linear-gradient(180deg, #30f3ff, #1f7bff);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 14px rgba(60,220,255,.8), 0 2px 6px rgba(0,0,0,.6);
}
.calc-row-slider input[type="range"]::-moz-range-track{
  height: 14px;
  border-radius: 999px;
  background: transparent;
}
.calc-row-slider input[type="range"]::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, #30f3ff, #1f7bff);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 14px rgba(60,220,255,.8), 0 2px 6px rgba(0,0,0,.6);
}

/* Colonne des actions (CHECK/FOLD/ALL-IN/CALL) */
.calc-col-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Colonne des chips déjà existante, on assure juste le gap */
.calc-col-presets .chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Nouvelle colonne pot presets */
.calc-col-pot .pot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.pot-btn {
  width: 100%;
}

/* Colonne des digits : TOUTES les touches même taille */
.calc-col-digits {
  display: flex;
  align-items: stretch;
}

.calc-digit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 44px;       /* hauteur identique pour tous les boutons */
  gap: 8px;
  width: 100%;
}

.calc-digit-grid .calc-btn {
  width: 100%;
  height: 100%;
}

/* ================================
   RAISE CALCULATOR — FIX FINAL
   ================================ */

/* Layout global de la ligne principale : 4 colonnes égales */
.raise-window .calc-row-main {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* PRO calculator: place chips column to the right of x2/x4/½ POT/POT */
.raise-window.calc-pro .calc-row-main{
  grid-template-columns: 0.9fr 0.7fr 1.1fr 1.5fr; /* actions / pot (narrow) / chips / digits (wider) */
  grid-template-areas: "actions pot presets digits";
}
.raise-window.calc-pro .calc-col-actions { grid-area: actions; }
.raise-window.calc-pro .calc-col-pot     { grid-area: pot; }
.raise-window.calc-pro .calc-col-presets { grid-area: presets; }
.raise-window.calc-pro .calc-col-digits  { grid-area: digits; }

/* Colonnes internes */
.raise-window .calc-col-actions,
.raise-window .calc-col-presets,
.raise-window .calc-col-pot,
.raise-window .calc-col-digits {
  display: flex;
  flex-direction: column;
}
/* Digits column: green panel instead of dark panel */

/* Colonne "CHIPS" (50 / 100 / 200 / 500 / 1000 / 2000) */
.raise-window .calc-col-presets .chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  height: 100%;
}

/* Colonne x2 / x4 / ½ POT / POT */
.raise-window .calc-col-pot .pot-grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  height: 100%;
}

/* >>> Couleur spéciale pour x2 / x4 / ½ POT / POT <<< */
/* (change juste les 3 couleurs si tu veux autre chose) */
/* Boutons x2 / x4 / ½ POT / POT — nouveau look */
.raise-window .pot-btn {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  /* dégradé rose/violet néon (aucun orange) */
  background: linear-gradient(180deg, #ff9af0 0%, #ff53c7 60%, #ff2a9f 100%) !important;
  border-color: #ffd3f5 !important;
  box-shadow: 0 4px 0 #b0146f,
              0 0 12px rgba(255, 105, 210, 0.55) !important;

  color: #ffffff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);

  font: inherit;      /* même police que les autres boutons */
  font-weight: 700;
}

.raise-window .pot-btn:hover {
  filter: brightness(1.08);
}


/* === Pavé numérique : toutes les touches EXACTEMENT mêmes dimensions === */

/* Colonne digits : on laisse la grille prendre toute la largeur */
/* ===== Pavé numérique de la nouvelle calculatrice ===== */

/* Colonne digits = on laisse la grille remplir la colonne */
.raise-window .calc-col-digits {
  display: flex;
  align-items: stretch;
}

/* Grille 3 colonnes x 4 lignes, TOUTES les cases identiques */
.raise-window .raise-digit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 48px;      /* même hauteur pour 7/8/9/4/5/6/1/2/3/0/CLEAR/RAISE */
  gap: 8px;
  width: 100%;
  height: 100%;
}

/* Chaque bouton occupe 100% de sa cellule */
.raise-window .raise-digit-grid .calc-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================
   FIX PAVÉ NUMÉRIQUE
   ========================= */

/* Grille des chiffres : 3 colonnes régulières */
.raise-window .calc-digit-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Tous les boutons 7 8 9 4 5 6 1 2 3 0 CLEAR RAISE
   → EXACTEMENT la même largeur + hauteur */
.raise-window .calc-digit-grid .calc-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 52px !important;   /* tu peux mettre 48 / 50 / 56 si tu préfères */
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === Fix largeur pavé numérique (toutes les colonnes identiques) === */
.raise-window .calc-digit-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

.raise-window .calc-digit-grid > .calc-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 52px !important;   /* tu peux ajuster 48 / 56 si tu veux */
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;    /* ⬅ clé pour que CLEAR / RAISE ne forcent plus la largeur */
}
.raise-window .calc-zero-wide{
  grid-column: 1 / -1 !important;
}
.raise-window .calc-bet-wide{
  grid-column: span 2;
  background: #1fd777 !important;
  background-image: none !important;
  border: 2px solid #ffd3bf !important;
  color: #f3fff7 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  box-shadow: 0 4px 0 #0b4f2b !important;
  outline: none !important;
  background-clip: padding-box;
  filter: none !important;
}
.raise-window .calc-bet-wide:hover{
  background: #12b463 !important;
  border-color: #ffd3bf !important;
  box-shadow: 0 4px 0 #083f22 !important;
}
.raise-window .calc-bet-wide:active{
  background: #0fa857 !important;
  border-color: #ffd3bf !important;
  box-shadow:
    0 4px 0 #07361e !important;
}

.raise-window .calc-col-actions .proba-btn{
  background: linear-gradient(180deg, #4df08f, #1fa85a) !important;
  border: 1px solid rgba(10, 80, 35, 0.9) !important;
  color: #eafff3 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  box-shadow:
    0 3px 0 rgba(12, 140, 70, 0.9),
    0 0 14px rgba(110, 255, 170, 0.55);
}

/* --- Layout des 4 colonnes : actions | jetons | pot | digits --- */
.calc-row-main,
.raise-window .calc-row-main {
  display: grid;
  grid-template-columns: 0.75fr 1.05fr 0.75fr 1.6fr; /* gauche plus étroit, calculatrice plus large */
  gap: 12px;
}

/* Plus d'espace entre la dernière rangée de boutons et le bord bas */
#modal-box.arcade .raise-body{
  padding-bottom: 20px !important;   /* ajuste 18 / 24 / 28 si tu veux plus ou moins */
}

/* ===== SB / BB en chips : mêmes dimensions et placement que le dealer ===== */

/* On positionne la zone "chips" comme référence (garde le même comportement ailleurs) */
.seat .chips {
  position: relative;
  overflow: visible !important;
}

/* Base commune SB / BB (taille + placement identiques au dealer) */
.seat.has-sb::after,
.seat.has-bb::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 15;
  pointer-events: none;
  left: 50%;
  transform: translateX(-60%);
}

/* Images */
.seat.has-sb::after {
  background-image: url('../images/chip6.png');
}
.seat.has-bb::after {
  background-image: url('../images/chip10.png');
}

/* Laisser SB / BB dépasser */
.seat {
  overflow: visible !important;
}
.poker-table .seat .name-chips{
  overflow: visible !important;
}
/* On garde le clipping pour les sièges BUST */
.poker-table .seat.is-bust .name-chips{
  overflow: hidden !important;
}

/* === LIGNE DU HAUT : sièges 0–4 → chip SOUS le siège (mêmes valeurs que dealer) === */
#seat0.has-sb::after,
#seat1.has-sb::after,
#seat2.has-sb::after,
#seat3.has-sb::after,
#seat4.has-sb::after,
#seat0.has-bb::after,
#seat1.has-bb::after,
#seat2.has-bb::after,
#seat3.has-bb::after,
#seat4.has-bb::after {
  top: auto;
  bottom: -80px !important;
}

/* === AGRANDIR SB/BB pour sièges 1 à 5 (P1→P5 = seats 0→4) === */
#seat0.has-sb::after,
#seat1.has-sb::after,
#seat2.has-sb::after,
#seat3.has-sb::after,
#seat4.has-sb::after,
#seat0.has-bb::after,
#seat1.has-bb::after,
#seat2.has-bb::after,
#seat3.has-bb::after,
#seat4.has-bb::after{
  width: 54px;
  height: 54px;
  background-size: 100% 100%;
}

/* === LIGNE DU BAS : sièges 5–9 → chip AU-DESSUS du siège (mêmes valeurs que dealer) === */
#seat5.has-sb::after,
#seat6.has-sb::after,
#seat7.has-sb::after,
#seat8.has-sb::after,
#seat9.has-sb::after,
#seat5.has-bb::after,
#seat6.has-bb::after,
#seat7.has-bb::after,
#seat8.has-bb::after,
#seat9.has-bb::after {
  bottom: auto;
  top: 28px;
}

/* === Reveal : SB/BB restent à la même hauteur (pas de saut vertical) === */
#seat0:has(.card.revealed).has-sb::after,
#seat1:has(.card.revealed).has-sb::after,
#seat2:has(.card.revealed).has-sb::after,
#seat3:has(.card.revealed).has-sb::after,
#seat4:has(.card.revealed).has-sb::after,
#seat0:has(.card.revealed).has-bb::after,
#seat1:has(.card.revealed).has-bb::after,
#seat2:has(.card.revealed).has-bb::after,
#seat3:has(.card.revealed).has-bb::after,
#seat4:has(.card.revealed).has-bb::after{
  top: auto !important;
  bottom: -80px !important;
}

#seat5:has(.card.revealed).has-sb::after,
#seat6:has(.card.revealed).has-sb::after,
#seat7:has(.card.revealed).has-sb::after,
#seat8:has(.card.revealed).has-sb::after,
#seat9:has(.card.revealed).has-sb::after,
#seat5:has(.card.revealed).has-bb::after,
#seat6:has(.card.revealed).has-bb::after,
#seat7:has(.card.revealed).has-bb::after,
#seat8:has(.card.revealed).has-bb::after,
#seat9:has(.card.revealed).has-bb::after{
  bottom: auto !important;
  top: 28px !important;
}

/* === AGRANDIR SB/BB pour sièges 6 à 10 (seats 5→9) === */
#seat5.has-sb::after,
#seat6.has-sb::after,
#seat7.has-sb::after,
#seat8.has-sb::after,
#seat9.has-sb::after,
#seat5.has-bb::after,
#seat6.has-bb::after,
#seat7.has-bb::after,
#seat8.has-bb::after,
#seat9.has-bb::after{
  width: 54px;
  height: 54px;
  background-size: 100% 100%;
}

/* === CAS SPÉCIAL : dealer + SB/BB → décale le chip pour éviter le chevauchement === */
#seat0.dealer-seat.has-bb::after,
#seat1.dealer-seat.has-bb::after,
#seat2.dealer-seat.has-bb::after,
#seat3.dealer-seat.has-bb::after,
#seat4.dealer-seat.has-bb::after {
  transform: translateX(-100%);
}

#seat0.dealer-seat.has-sb::after,
#seat1.dealer-seat.has-sb::after,
#seat2.dealer-seat.has-sb::after,
#seat3.dealer-seat.has-sb::after,
#seat4.dealer-seat.has-sb::after {
  transform: translateX(-10%);
}

#seat5.dealer-seat.has-sb::after,
#seat5.dealer-seat.has-bb::after,
#seat6.dealer-seat.has-bb::after,
#seat7.dealer-seat.has-bb::after,
#seat8.dealer-seat.has-bb::after,
#seat9.dealer-seat.has-bb::after {
  top: 35px;
  transform: translateX(-100%);
}

#seat6.dealer-seat.has-sb::after,
#seat7.dealer-seat.has-sb::after,
#seat8.dealer-seat.has-sb::after,
#seat9.dealer-seat.has-sb::after {
  top: 35px;
  transform: translateX(-10%);
}

  /* Position par défaut du bouton dealer dans chaque siège */

/* ===== Dealer button — style visuel uniquement (taille + image) ===== */

/* ===== Style visuel du bouton dealer ===== */
/* ===== STYLE VISUEL DU BOUTON DEALER ===== */
#button,
.dealer-button {
  position: absolute;
  width: 44px;
  height: 44px;
  background-image: url('../images/dealerbutton.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 15;
  pointer-events: none;
}

/* ===== POSITION DE BASE POUR TOUS LES SIÈGES (0 → 9) ===== */
/* → c’est ICI que tu règles le décalage horizontal global */
.seat.dealer-seat #button {
  left: 50% !important;
  transform: translateX(-60%);   /* -50% = centré, -60% un peu à gauche, etc. */
}

/* === LIGNE DU HAUT : sièges 0–4 → bouton SOUS le siège === */
#seat0.dealer-seat #button,
#seat1.dealer-seat #button,
#seat2.dealer-seat #button,
#seat3.dealer-seat #button,
#seat4.dealer-seat #button {
  top: auto !important;
  bottom: -80px !important;
}

/* === AGRANDIR le bouton Dealer pour sièges 1 à 5 (seats 0→4) === */
#seat0.dealer-seat #button,
#seat1.dealer-seat #button,
#seat2.dealer-seat #button,
#seat3.dealer-seat #button,
#seat4.dealer-seat #button{
  width: 54px !important;
  height: 54px !important;
  background-size: 100% 100% !important;
}

/* === LIGNE DU BAS : sièges 5–9 → bouton AU-DESSUS du siège (cas normal) === */
#seat5.dealer-seat #button,
#seat6.dealer-seat #button,
#seat7.dealer-seat #button,
#seat8.dealer-seat #button,
#seat9.dealer-seat #button {
  bottom: auto !important;
  top: 28px !important;
}

/* === Reveal : Dealer garde la même hauteur (haut vs bas) === */
#seat0.dealer-seat:has(.card.revealed) #button,
#seat1.dealer-seat:has(.card.revealed) #button,
#seat2.dealer-seat:has(.card.revealed) #button,
#seat3.dealer-seat:has(.card.revealed) #button,
#seat4.dealer-seat:has(.card.revealed) #button{
  top: auto !important;
  bottom: -80px !important;
}

#seat5.dealer-seat:has(.card.revealed) #button,
#seat6.dealer-seat:has(.card.revealed) #button,
#seat7.dealer-seat:has(.card.revealed) #button,
#seat8.dealer-seat:has(.card.revealed) #button,
#seat9.dealer-seat:has(.card.revealed) #button{
  bottom: auto !important;
  top: 28px !important;
}

/* === Reveal : dealer + blinds passent derrière les cartes === */
#seat0.dealer-seat:has(.card.revealed) #button,
#seat1.dealer-seat:has(.card.revealed) #button,
#seat2.dealer-seat:has(.card.revealed) #button,
#seat3.dealer-seat:has(.card.revealed) #button,
#seat4.dealer-seat:has(.card.revealed) #button,
#seat5.dealer-seat:has(.card.revealed) #button,
#seat6.dealer-seat:has(.card.revealed) #button,
#seat7.dealer-seat:has(.card.revealed) #button,
#seat8.dealer-seat:has(.card.revealed) #button,
#seat9.dealer-seat:has(.card.revealed) #button{
  z-index: 1 !important; /* cartes = z-index 3 */
}

#seat0:has(.card.revealed).has-sb::after,
#seat1:has(.card.revealed).has-sb::after,
#seat2:has(.card.revealed).has-sb::after,
#seat3:has(.card.revealed).has-sb::after,
#seat4:has(.card.revealed).has-sb::after,
#seat5:has(.card.revealed).has-sb::after,
#seat6:has(.card.revealed).has-sb::after,
#seat7:has(.card.revealed).has-sb::after,
#seat8:has(.card.revealed).has-sb::after,
#seat9:has(.card.revealed).has-sb::after,
#seat0:has(.card.revealed).has-bb::after,
#seat1:has(.card.revealed).has-bb::after,
#seat2:has(.card.revealed).has-bb::after,
#seat3:has(.card.revealed).has-bb::after,
#seat4:has(.card.revealed).has-bb::after,
#seat5:has(.card.revealed).has-bb::after,
#seat6:has(.card.revealed).has-bb::after,
#seat7:has(.card.revealed).has-bb::after,
#seat8:has(.card.revealed).has-bb::after,
#seat9:has(.card.revealed).has-bb::after{
  z-index: 1 !important; /* cartes = z-index 3 */
}

/* === AGRANDIR le bouton Dealer pour sièges 6 à 10 (seats 5→9) === */
#seat5.dealer-seat #button,
#seat6.dealer-seat #button,
#seat7.dealer-seat #button,
#seat8.dealer-seat #button,
#seat9.dealer-seat #button{
  width: 54px !important;
  height: 54px !important;
  background-size: 100% 100% !important;
}

/* === CHEVAUCHEMENT D + SB/BB — LIGNE DU HAUT (0–4) === */
/* On le pousse un peu plus à gauche quand il partage le siège avec SB/BB */
#seat0.dealer-seat.has-sb #button,
#seat1.dealer-seat.has-sb #button,
#seat2.dealer-seat.has-sb #button,
#seat3.dealer-seat.has-sb #button,
#seat4.dealer-seat.has-sb #button,
#seat0.dealer-seat.has-bb #button,
#seat1.dealer-seat.has-bb #button,
#seat2.dealer-seat.has-bb #button,
#seat3.dealer-seat.has-bb #button,
#seat4.dealer-seat.has-bb #button {
  bottom: -80px !important;
  transform: translateX(-100%) !important;  /* plus la valeur est négative, plus c’est à gauche */
}

/* === CHEVAUCHEMENT D + SB/BB — LIGNE DU BAS (5–9) === */
#seat5.dealer-seat.has-sb #button,
#seat6.dealer-seat.has-sb #button,
#seat7.dealer-seat.has-sb #button,
#seat8.dealer-seat.has-sb #button,
#seat9.dealer-seat.has-sb #button,
#seat5.dealer-seat.has-bb #button,
#seat6.dealer-seat.has-bb #button,
#seat7.dealer-seat.has-bb #button,
#seat8.dealer-seat.has-bb #button,
#seat9.dealer-seat.has-bb #button {
  top: 28px !important;
  transform: translateX(-100%) !important; /* -110 / -115 / -120 = encore plus à gauche */
}

/* ===============================
   UI Buttons (%, BREAK, T, 30, HIDE)
   =============================== */
#action-options{
  position: absolute;
  inset: 0;
  pointer-events: none; /* leave clicks only on buttons */
}
#action-options > *{
  pointer-events: auto;
}

#rules-help-btn,
#sos-help-btn,
#odds-help-btn,
#break-btn,
#btn-time,
#btn-add30,
#reveal-hide-btn,
#reveal-show-btn{
  position: absolute;
  transform: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #35c7ff;
  background: radial-gradient(circle at 30% 30%, #fff2c4, #ffb347 60%, #ff7a5c 100%);
  color: #1f2a3a;
  font: 800 25px/1 "Fredoka", "Trebuchet MS", sans-serif;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 16px rgba(53,199,255,.45);
  white-space: pre-line;
}

/* placement bottom-left like screenshots */
#rules-help-btn{ right: 78px !important; left: auto !important; bottom: -108px !important; top: auto !important; }
#sos-help-btn { font-size: 25px !important; }
#odds-help-btn{ left: 86px; bottom: -108px !important; top: auto !important; }
#btn-time     { left: 146px; bottom: -108px !important; font-size: 23px; top: auto !important; }
#btn-add30    { left: 206px; bottom: -108px !important; font-size: 23px; top: auto !important; }
#reveal-hide-btn{
  left: 286px;
  bottom: -108px !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1.05;
  top: auto !important;
}
#reveal-show-btn{
  left: 336px;
  bottom: -108px !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1.05;
  top: auto !important;
}
#reveal-hide-btn,
#reveal-show-btn{
  display: none !important;
}

.holecards .card{
  position: relative;
}
.reveal-card-btn{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.9);
  background: radial-gradient(120% 120% at 50% 0%, #1c2434, #0b111b);
  color: #fff;
  font: 900 18px/1 "Fredoka", "Trebuchet MS", sans-serif;
  text-transform: uppercase;
  letter-spacing: .9px;
  text-align: center;
  white-space: pre-line;
  cursor: pointer;
  z-index: 6;
  box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    inset 0 0 14px rgba(255,255,255,.18);
  text-shadow:
    0 2px 8px rgba(0,0,0,.65),
    0 0 10px rgba(255,255,255,.35);
}
.reveal-card-btn.reveal-overlay{
  pointer-events: auto;
}
.reveal-card-btn.hide{
  background: linear-gradient(180deg, #ff5f6e, #c81e37);
  border-color: rgba(255,230,230,.95);
}
.reveal-card-btn.show{
  background: linear-gradient(180deg, #5ae696, #23a05f);
  border-color: rgba(220,255,235,.95);
}
.reveal-card-btn:hover{ filter: brightness(1.05); }
.reveal-card-btn:active{ transform: scale(.98); }
.reveal-card-btn.is-disabled{
  filter: grayscale(1) brightness(.85);
  opacity: .8;
}

/* Ensure D/C cards stay fully visible when reveal choice is active */
body.reveal-choice-active #fold-button,
body.reveal-choice-active #call-button{
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}
#sos-help-btn{
  right: 16px;
  left: auto !important;
  bottom: -108px !important;
  top: auto !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 17px !important;
  letter-spacing: .5px;
  border: 2px solid #ffffff;
  background: linear-gradient(180deg, #ff3b3b, #d40000 70%, #a80000 100%);
  color: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.22), 0 0 16px rgba(255,0,0,.55);
}
#action-options #break-btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -108px !important;
  top: auto !important;
  right: auto !important;
  display: grid;
  place-items: center;
  border: 2px solid #e8ffe8;
  background: linear-gradient(180deg, #42e57a, #18b85a 70%, #0a8c42 100%);
  color: transparent;
}
#break-btn::before{
  content: "II";
  color: #0b1a10;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
#action-options #break-btn.active{
  background: linear-gradient(180deg, #ff3b3b, #d40000 70%, #a80000 100%);
  border-color: #ffe0e0;
}
#action-options #break-btn.active::before{
  content: "▶";
  color: #fff;
}

#rules-help-btn:hover,
#sos-help-btn:hover,
#odds-help-btn:hover,
#break-btn:hover,
#btn-time:hover,
#btn-add30:hover,
#reveal-hide-btn:hover,
#reveal-show-btn:hover{ filter: brightness(1.08); }

#rules-help-btn.is-disabled,
#odds-help-btn.is-disabled,
#break-btn.is-disabled{
  filter: grayscale(1) brightness(.8);
  opacity: .65;
  pointer-events: none;
}

#rules-help-btn:active,
#sos-help-btn:active,
#odds-help-btn:active,
#break-btn:active,
#btn-time:active,
#btn-add30:active,
#reveal-hide-btn:active,
#reveal-show-btn:active{ transform: scale(.96); }

/* disabled look */
#btn-time.is-disabled,
#btn-add30.is-disabled,
#reveal-hide-btn.is-disabled,
#reveal-show-btn.is-disabled{
  filter: grayscale(1) brightness(.8);
  opacity: .65;
}

/* ===============================
   Seats JOIN / BREAK
   =============================== */
:is(#poker_table, .poker-table) .seat.join-seat .name-chips{
  --seat-neon: #55ff86;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(85,255,134,.18), transparent 62%),
    linear-gradient(180deg, rgba(6,32,18,.85), rgba(4,22,12,.92)) !important;
  box-shadow: 0 0 14px rgba(85,255,134,.45);
}
:is(#poker_table, .poker-table) .seat.join-seat .player-name,
:is(#poker_table, .poker-table) .seat.join-seat .bet{
  color: #55ff86 !important;
}
:is(#poker_table, .poker-table) .seat.join-seat .chips{
  color: #ffffff !important;
}

:is(#poker_table, .poker-table) .seat.break-seat .name-chips{
  --seat-neon: #ff3b3b;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255,59,59,.18), transparent 62%),
    linear-gradient(180deg, rgba(36,6,6,.85), rgba(22,4,4,.92)) !important;
  box-shadow: 0 0 14px rgba(255,59,59,.45);
}
:is(#poker_table, .poker-table) .seat.break-seat .player-name,
:is(#poker_table, .poker-table) .seat.break-seat .bet{
  color: #ff3b3b !important;
}
:is(#poker_table, .poker-table) .seat.break-seat .chips{
  color: #ffffff !important;
}

/* ===============================
   ALL-IN seat style
   =============================== */
:is(#poker_table, .poker-table) .seat.is-allin-bg .name-chips{
  box-shadow: inset 0 0 0 9999px rgba(40,140,255,.45);
}
:is(#poker_table, .poker-table) .seat.is-allin-bg .name-chips::before{
  background: rgba(60,160,255,.35);
}
.seat.allin-text .player-name,
.seat.allin-text .chips{
  color: #ff3b3b !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.seat.allin-text .chips{
  white-space: nowrap;
  font-size: 18px;
}

/* keep main action buttons positioned when action-options is full-size */
#fold-button,
#call-button,
#custom-raise{
  position: absolute;
}

/* D / C / X alignés en hauteur avec I & M */
#fold-button,
#call-button,
#custom-raise{
  top: 710px !important;
  width: 118px !important;
  height: 130px !important;
  bottom: auto !important;
  right: auto !important;
}
#custom-raise{
  right: 72px !important;
  left: auto !important;
  transform: none !important;
}
#fold-button{
  right: 327px !important;
  left: auto !important;
  transform: none !important;
}
#call-button{
  right: 199px !important;
  left: auto !important;
  transform: none !important;
}

@media (max-width: 900px){
  /* Mobile: shift main action buttons to the right */
  #fold-button{ right: calc(327px - var(--mobile-action-shift-right)) !important; }
  #call-button{ right: calc(199px - var(--mobile-action-shift-right)) !important; }
  #custom-raise{ right: calc(72px - var(--mobile-action-shift-right)) !important; left: auto !important; }
}

/* === Reveal cleanup: no blue halos, no greyed losing cards === */
.seat .holecards .card.revealed::before{
  content: none !important;
  box-shadow: none !important;
}
.seat.winning-hand .holecards,
.seat.losing-hand .holecards{
  filter: none !important;
}
.seat.winning-hand .holecards .card,
.seat.winning-hand .holecards .card::after,
.seat.losing-hand .holecards .card,
.seat.losing-hand .holecards .card::after{
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.seat.winning-hand .holecards .card::before{
  content: none !important;
  box-shadow: none !important;
}

/* === Reveal result: only seats styled (not cards, blinds, dealer) === */
.seat.losing-hand .name-chips{
  filter: grayscale(1) brightness(.7) !important;
  opacity: .8;
}

.seat.winning-hand .name-chips{
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255,95,177,.35), transparent 62%),
    linear-gradient(180deg, rgba(255,95,177,.85), rgba(255,60,150,.95)) !important;
  box-shadow: 0 0 20px rgba(255,95,177,.7) !important;
}
.seat.final-winner .name-chips{
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255, 212, 90, .35), transparent 62%),
    linear-gradient(180deg, rgba(255, 214, 120, .92), rgba(255, 170, 35, .98)) !important;
  box-shadow: 0 0 22px rgba(255, 190, 60, .75) !important;
}
.seat.final-winner .player-name,
.seat.final-winner .chips{
  color: #ffffff !important;
}
.seat.final-winner .bet::after{
  color: #ffffff;
}
.seat.winning-hand .player-name,
.seat.winning-hand .chips{
  color: #ffffff !important;
}

/* WIN label in bet area (CSS only) */
.seat.winning-hand .bet{
  color: transparent !important;
}
.seat.winning-hand .bet::after{
  content: "WIN";
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 1px;
}

/* === Fix chevauchement HU : garde la m�me hauteur m�me si Dealer+SB/BB === */
#seat0.dealer-seat.has-sb::after,
#seat1.dealer-seat.has-sb::after,
#seat2.dealer-seat.has-sb::after,
#seat3.dealer-seat.has-sb::after,
#seat4.dealer-seat.has-sb::after,
#seat0.dealer-seat.has-bb::after,
#seat1.dealer-seat.has-bb::after,
#seat2.dealer-seat.has-bb::after,
#seat3.dealer-seat.has-bb::after,
#seat4.dealer-seat.has-bb::after{
  top: auto !important;
  bottom: -80px !important;
}

#seat5.dealer-seat.has-sb::after,
#seat6.dealer-seat.has-sb::after,
#seat7.dealer-seat.has-sb::after,
#seat8.dealer-seat.has-sb::after,
#seat9.dealer-seat.has-sb::after,
#seat5.dealer-seat.has-bb::after,
#seat6.dealer-seat.has-bb::after,
#seat7.dealer-seat.has-bb::after,
#seat8.dealer-seat.has-bb::after,
#seat9.dealer-seat.has-bb::after{
  bottom: auto !important;
  top: 28px !important;
}

/* Desktop-only: place ? left of SOS on the right edge (keep mobile untouched) */
@media (min-width: 901px){
  #rules-help-btn{
    left: auto !important;
    right: 78px !important;
    top: auto !important;
    bottom: -108px !important;
    transform: none !important;
  }
  #sos-help-btn{
    left: auto !important;
    right: 16px !important;
    top: auto !important;
    bottom: -108px !important;
    transform: none !important;
  }
}

/* === Bet positions (final override) === */
.seat .bet{
  bottom: auto !important;
}

#seat0 .bet, #seat1 .bet, #seat2 .bet, #seat3 .bet, #seat4 .bet{
  top: 85px !important;
}

#seat5 .bet, #seat6 .bet, #seat7 .bet, #seat8 .bet, #seat9 .bet{
  top: 95px !important;
}

#seat0.dealer-seat.has-sb #button,
#seat1.dealer-seat.has-sb #button,
#seat2.dealer-seat.has-sb #button,
#seat3.dealer-seat.has-sb #button,
#seat4.dealer-seat.has-sb #button,
#seat0.dealer-seat.has-bb #button,
#seat1.dealer-seat.has-bb #button,
#seat2.dealer-seat.has-bb #button,
#seat3.dealer-seat.has-bb #button,
#seat4.dealer-seat.has-bb #button{
  top: auto !important;
  bottom: -80px !important;
}

#seat5.dealer-seat.has-sb #button,
#seat6.dealer-seat.has-sb #button,
#seat7.dealer-seat.has-sb #button,
#seat8.dealer-seat.has-sb #button,
#seat9.dealer-seat.has-sb #button,
#seat5.dealer-seat.has-bb #button,
#seat6.dealer-seat.has-bb #button,
#seat7.dealer-seat.has-bb #button,
#seat8.dealer-seat.has-bb #button,
#seat9.dealer-seat.has-bb #button{
  bottom: auto !important;
  top: 28px !important;
}

/* === FIX: force SB/BB same height on both seats (incl. dealer overlap) === */
#seat0.has-sb::after,
#seat1.has-sb::after,
#seat2.has-sb::after,
#seat3.has-sb::after,
#seat4.has-sb::after,
#seat0.has-bb::after,
#seat1.has-bb::after,
#seat2.has-bb::after,
#seat3.has-bb::after,
#seat4.has-bb::after,
#seat0.dealer-seat.has-sb::after,
#seat1.dealer-seat.has-sb::after,
#seat2.dealer-seat.has-sb::after,
#seat3.dealer-seat.has-sb::after,
#seat4.dealer-seat.has-sb::after,
#seat0.dealer-seat.has-bb::after,
#seat1.dealer-seat.has-bb::after,
#seat2.dealer-seat.has-bb::after,
#seat3.dealer-seat.has-bb::after,
#seat4.dealer-seat.has-bb::after{
  top: auto !important;
  bottom: -80px !important;
}

#seat5.has-sb::after,
#seat6.has-sb::after,
#seat7.has-sb::after,
#seat8.has-sb::after,
#seat9.has-sb::after,
#seat5.has-bb::after,
#seat6.has-bb::after,
#seat7.has-bb::after,
#seat8.has-bb::after,
#seat9.has-bb::after,
#seat5.dealer-seat.has-sb::after,
#seat6.dealer-seat.has-sb::after,
#seat7.dealer-seat.has-sb::after,
#seat8.dealer-seat.has-sb::after,
#seat9.dealer-seat.has-sb::after,
#seat5.dealer-seat.has-bb::after,
#seat6.dealer-seat.has-bb::after,
#seat7.dealer-seat.has-bb::after,
#seat8.dealer-seat.has-bb::after,
#seat9.dealer-seat.has-bb::after{
  bottom: auto !important;
  top: 28px !important;
}