.bingo-board { display: grid; gap: 14px; justify-items: center; align-content: start; }
.ball-now { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: #fff; color: #1b1240;
            box-shadow: inset -6px -8px 0 rgba(0, 0, 0, .12), 3px 4px 0 rgba(0, 0, 0, .35); border: 6px solid var(--pink); }
.ball-now span { font: 400 30px/1 var(--display); }
.ball-now small { font: 700 13px var(--body); }
.ball-now.b-B { border-color: #2f7de0; } .ball-now.b-I { border-color: #d8344d; } .ball-now.b-N { border-color: #14a38a; }
.ball-now.b-G { border-color: #e0a400; } .ball-now.b-O { border-color: #c2309c; }
.bcard { display: grid; grid-template-columns: repeat(5, minmax(0, 54px)); gap: 5px; background: #fff; padding: 8px; border-radius: 14px; }
.bh { text-align: center; font: 400 22px var(--display); color: #fff; border-radius: 8px; padding: 4px 0; }
.bh:nth-child(1) { background: #2f7de0; } .bh:nth-child(2) { background: #d8344d; } .bh:nth-child(3) { background: #14a38a; }
.bh:nth-child(4) { background: #e0a400; } .bh:nth-child(5) { background: #c2309c; }
.bc { aspect-ratio: 1; display: grid; place-items: center; font: 700 18px var(--body); color: #1b1240; background: #f1ecff; border-radius: 8px; position: relative; }
.bc.free { font-size: 11px; }
.bc.daub::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: rgba(255, 95, 162, .7); }
.bc.line { background: #c8ffd9; }
.called { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; justify-content: center; }
.called i { font: 700 11px var(--body); font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.called .b-B { background: #2f7de0; } .called .b-I { background: #d8344d; } .called .b-N { background: #14a38a; }
.called .b-G { background: #e0a400; } .called .b-O { background: #c2309c; }