/* ビンゴカードと玉の見た目（ゲーム・図解・印刷で共通） */
.bcard { --cell: 56px; --line-c: #4A4F57; display: inline-block; background: #FFFFFF; color: #1F2328; border: 2px solid var(--line-c); border-radius: 8px; padding: 6px; }
.bc-title { font-weight: 700; text-align: center; font-size: calc(var(--cell) * .3); margin: 0 0 4px; line-height: 1.3; }
.bc-grid { display: grid; grid-template-columns: repeat(5, var(--cell)); gap: 3px; }
.bc-head {
  height: calc(var(--cell) * .66); display: flex; align-items: center; justify-content: center; border-radius: 4px;
  background: var(--ball); color: var(--ball-ink); font-weight: 800; font-size: calc(var(--cell) * .42); line-height: 1;
  border: 1.5px solid rgba(0, 0, 0, .35);
}
.bc-cell {
  position: relative; width: var(--cell); height: var(--cell); padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; appearance: none; font: inherit; color: #1F2328;
  background: #FFFFFF; border: 1.5px solid #B9B5AB; border-radius: 4px; font-weight: 700; font-size: calc(var(--cell) * .4); line-height: 1;
}
button.bc-cell { cursor: pointer; touch-action: manipulation; }
button.bc-cell:focus-visible { outline: 3px solid #B7791F; outline-offset: 1px; z-index: 1; }
.bc-cell.free .bc-num { font-size: calc(var(--cell) * .26); letter-spacing: .02em; }
.bc-num { position: relative; z-index: 1; }
/* あけた穴: 数字のまわりに丸い穴（紙のカードに穴をあけた見た目）。色だけでなく形で分かるように */
.bc-cell.hole::before {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: #3A3F47; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45);
}
.bc-cell.hole .bc-num { color: #FFFFFF; }
.bc-cell.free.hole::before { background: #6B5A2E; }
.bc-cell.win { background: #F6D77A; border-color: #8A6A10; }
.bc-cell.win.hole::before { background: #B23A3A; }
.bc-cell.need { border: 2.5px dashed #2F5D8A; }
.bc-cell.pop::before { animation: punch .28s ease-out; }
@keyframes punch { from { transform: scale(.3); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.bc-cell.nope { animation: nope .3s; }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .bc-cell.pop::before, .bc-cell.nope { animation: none; } }

/* 玉 */
.ball {
  --size: 150px; --ball: #F3F1EA; --ball-ink: #1F2328;
  width: var(--size); height: var(--size); border-radius: 50%; flex: none;
  background: var(--ball); color: var(--ball-ink); border: calc(var(--size) * .025) solid #4A3728;
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;
  filter: var(--shadow-piece, none);
}
/* 玉の中の白い丸（数字が読みやすいように） */
.ball::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: #FFFFFF; border: calc(var(--size) * .012) solid rgba(0, 0, 0, .25); }
.ball .ball-l, .ball .ball-n { position: relative; color: #1F2328; line-height: 1; font-weight: 800; }
.ball .ball-l { font-size: calc(var(--size) * .16); margin-bottom: calc(var(--size) * .01); }
.ball .ball-n { font-size: calc(var(--size) * .34); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ball.no-letter .ball-l { display: none; }
.ball.no-letter .ball-n { font-size: calc(var(--size) * .38); }
.ball.empty .ball-n { color: #8A8F97; }
.ball.pop { animation: ballpop .35s ease-out; }
@keyframes ballpop { 0% { transform: scale(.5) translateY(30%); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ball.pop { animation: none; } }