/**
 * deck-and-stop-fixes.css
 * - Deck panel: scroll vertical propre (grille intacte)
 * - Bouton stop/ready: couleur rouge/orange très visible
 */

/* ===== Deck browser: scroll vertical sans casser la grille ===== */

/* Important: le panel utilise flex; il faut min-height:0 pour autoriser l'overflow */
#panelDeck{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}

/* Zone scrollable autour de la grille */
#panelDeck .deckCardsWrap{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;

  /* Hauteur raisonnable dans la modale (mobile + desktop) */
  max-height: calc(100dvh - 240px);
  padding-right: 2px; /* évite que la scrollbar mange le bord */
}

/* La grille reste une grille (on ne touche pas display/grid) */
#panelDeck #deckCardsContainer{
  align-content:start;
}

/* ===== Stop / Ready (visuel "danger") ===== */

/* Boutons "stop" dans la topologie bubble */
.bubbleBtn--stop,
#myStopBtn{
  background: linear-gradient(135deg, rgba(255,110,80,0.95), rgba(220,35,35,0.92)) !important;
  border-color: rgba(255,220,200,0.55) !important;
  box-shadow: 0 10px 22px rgba(255,70,70,0.20), 0 8px 18px rgba(0,0,0,0.25) !important;
}

/* Boutons stop/fin de tour (anciennes UI / fallback) */
#endPhaseBtn,
#endPhase2Btn,
#endTurnBtn,
button[id*="endPhase"],
button[title*="m'arrête"],
button[title*="arrête"]{
  background: linear-gradient(135deg, #ff7a45, #e03131) !important;
  border-color: rgba(255,230,210,0.6) !important;
  color: rgba(255,255,255,0.97) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25) !important;
}

/* Un peu plus visible au survol */
.bubbleBtn--stop:hover,
#myStopBtn:hover,
#endPhaseBtn:hover,
#endPhase2Btn:hover,
#endTurnBtn:hover{
  filter: brightness(1.06) saturate(1.05) !important;
}