/* ===============================
   Casse-briques – styles spécifiques
   =============================== */

.cb-root {
  /* Barre commune (css/games.css) aux couleurs du terrain */
  --mg-jeu-largeur: 824px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(255, 110, 199, 0.22), transparent 55%),
    linear-gradient(120deg, #0b0920, #2a2266);
  --mgb-texte: #ece9ff;
  --mgb-doux: #9d98d0;
  --mgb-accent: #ffe066;
  --mgb-titre: linear-gradient(100deg, #ff6ec7, #ffb347 50%, #ffe066);
  --mg-fs-fond: radial-gradient(circle at 50% 40%, #2a2266, #0b0920);
  --mg-bulle-fond: #1b1645;
  align-items: center;
}

.mg-stat b.cb-lives {
  color: #ff6b8b;
}

.cb-canvas-wrap {
  position: relative;
  max-width: 100%;
}

#cb-canvas {
  display: block;
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(30, 20, 90, 0.45);
  background: #120f2e;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* ---------- Modale d'aide ---------- */
.cb-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(14, 10, 40, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.cb-help {
  position: relative;
  max-width: 620px;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  background: #fff;
  border-radius: 14px;
  padding: 16px 22px 18px 22px;
  color: #444;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  line-height: 1.45;
}

.cb-help-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #efedfb;
  color: #3a2f8f;
  font-size: 16px;
  cursor: pointer;
}

.cb-help-close:hover {
  background: #dedaf6;
}

.cb-help-title {
  font-family: "Madimi One", cursive;
  font-size: 1.3em;
  color: #3a2f8f;
}

.cb-help p {
  margin: 6px 0 10px 0;
}

.cb-help-sub {
  font-weight: bold;
  color: #3a2f8f;
  margin: 4px 0;
}

.cb-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 4px 16px;
  font-size: 0.93em;
}

.cb-help-grid span {
  display: inline-block;
  width: 26px;
  text-align: center;
}

.cb-help-grid .cb-malus {
  color: #b3263e;
}

/* ---------- Petits écrans : bandeau compact ---------- */

/* ---------- Plein écran ---------- */

.cb-root.mg-fs {
  justify-content: center;
  overflow: hidden;
}