/* Casse-briques — l'habillage. Le terrain est un canevas : tout le jeu s'y
   dessine, la feuille ne pose que le cadre et la barre. */
.cb { display: flex; flex-direction: column; height: 100%; gap: 10px; }

.cb-barre {
  display: flex; align-items: center; gap: 14px; font-size: 14px;
  flex-wrap: wrap; color: var(--ink-soft);
}
.cb-barre b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-vies { color: #ef5d6b; letter-spacing: 2px; }
.cb-record { margin-left: auto; font-size: 13px; }
.cb-son {
  border: 1px solid var(--line); background: var(--surface); color: inherit;
  border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 15px;
}

.cb-terrain {
  position: relative; flex: 1; min-height: 0;
  border-radius: 14px; overflow: hidden;
  background: #101c2b;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .45);
  /* LE DOIGT PILOTE, IL NE FAIT PAS DÉFILER LA PAGE. Sans cette ligne, glisser
     pour bouger la raquette déplace le site sous le joueur — et la balle tombe
     pendant qu'il regarde ailleurs. */
  touch-action: none;
  cursor: none;
}
.cb-terrain canvas { display: block; width: 100%; height: 100%; }

.cb-aide {
  margin: 0; text-align: center; font-size: 13px; color: var(--ink-soft);
  min-height: 1.2em;
}