.o-bingo { display: grid; gap: 14px; margin-block: 18px; }
.bg-plateau { display: grid; gap: 10px; }
.bg-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: var(--rayon); background: var(--encre); outline: 2px solid var(--trait); outline-offset: -2px; }
.bg-case { unicode-bidi: plaintext; display: flex; align-items: center; justify-content: center; min-block-size: 76px; padding: 4px 2px; border: 0; border-radius: 6px; background: var(--bitume); color: var(--papier); font-size: .68rem; font-weight: 700; line-height: 1.12; hyphens: auto; text-align: center; cursor: pointer; }
.bg-case:hover { background: var(--asphalte); }
.bg-case[aria-pressed="true"] { background: var(--violet); }
.bg-case[data-ligne] { background: var(--orange); color: var(--encre); }
.bg-case[data-libre] { font-family: var(--titre); font-size: 1rem; font-weight: 900; text-transform: var(--casse-titre); color: var(--peche); }
.bg-case[data-libre][data-ligne] { color: var(--encre); }
.bg-case:disabled { cursor: default; }
.bg-etat { margin: 0; font-family: var(--titre); font-weight: 800; font-size: 1.5rem; line-height: 1.1; text-transform: var(--casse-titre); color: var(--peche); }
@media (min-width: 480px) { .bg-case { font-size: .82rem; min-block-size: 92px; padding: 6px; } }
@media (min-width: 760px) { .bg-case { font-size: .98rem; min-block-size: 110px; } .bg-grille { max-inline-size: 760px; } }