#gameSnooker.hidden {
  display: none;
}

/* ── Largeur de référence unique ── */
.snooker-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* ── Scoreboard ── */
.snooker-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.snooker-score-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  transition: background 0.2s, border-color 0.2s;
}

.snooker-score-card.active {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.35);
}

.snooker-score-emoji {
  font-size: 20px;
}

.snooker-score-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.snooker-score-pts {
  font-size: 22px;
  font-weight: 700;
  color: #ffd700;
  min-width: 40px;
  text-align: right;
}

.snooker-best-break {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  min-width: 52px;
  text-align: right;
}

/* ── Infos joueur actif ── */
.snooker-active-info {
  text-align: center;
  margin: 10px 0 10px;
}

.snooker-active-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffd700;
}

.snooker-break-now {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 2px 0;
}

.snooker-phase-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 4px 12px;
  display: inline-block;
  margin-top: 4px;
}

/* ── Zone billes (hauteur fixe pour éviter les sauts) ── */
.snooker-balls-zone {
  width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* les enfants prennent toute la largeur */
  justify-content: center;
  gap: 8px;
}

/* Grille 3×2 pour les couleurs et endgame */
.snooker-colors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

/* Phase red : bille rouge pleine largeur + multi-red pleine largeur */
.snooker-red-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.snooker-red-wrap .snooker-ball-btn {
  width: auto;
}

.snooker-red-wrap .btn-main {
  width: 100%;
  box-sizing: border-box;
}


/* ── Bouton bille ── */
.snooker-ball-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  width: 100%;           /* toujours pleine largeur de son conteneur */
  box-sizing: border-box;
}

.snooker-ball-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 215, 0, 0.4);
  transform: translateY(-2px);
}

.snooker-ball-btn:active:not(:disabled) {
  transform: translateY(0);
}

.snooker-ball-btn img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.snooker-ball-btn span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.snooker-ball-btn.snooker-btn-inactive {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: transparent;
}

.snooker-ball-btn.snooker-btn-next {
  border-color: rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

/* "Free Ball" si elle apparaît dans la zone bille */
.snooker-freeball-btn {
  width: 100%;
  box-sizing: border-box;
}