Bingo

/* Scoped CSS so it won’t clash with your theme */ #cbe-bingo{ –uf-blue:#0021A5; –uf-orange:#FA4616; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, “Noto Sans”; } #cbe-bingo .title{ text-align:center; color:var(–uf-blue); font-weight:800; font-size:28px; margin:16px auto; } #cbe-bingo .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1000px; margin:0 auto 40px; padding:0 16px; } #cbe-bingo .tile{ position:relative; display:block; } #cbe-bingo .tile>input{ position:absolute; left:0; top:0; right:0; bottom:0; opacity:0; } #cbe-bingo .card{ position:relative; border:3px solid var(–uf-blue); background:#fff; border-radius:18px; min-height:140px; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; box-shadow:0 4px 12px rgba(0,33,165,.08); } #cbe-bingo .card .label{ font-weight:800; font-size:22px; line-height:1.12; color:#111; } #cbe-bingo .tile[data-free=”true”] .card{ background:var(–uf-orange); } #cbe-bingo .tile[data-free=”true”] .label{ color:#fff; } #cbe-bingo .tile>input:checked + .card{ outline:3px solid var(–uf-orange); outline-offset:-3px; } #cbe-bingo .tile>input:checked + .card::after{ content:’✕’; position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; font-size:92px; color:rgba(0,33,165,.18); pointer-events:none; } @media (max-width:680px){ #cbe-bingo .card{ min-height:110px; } #cbe-bingo .card .label{ font-size:18px; } #cbe-bingo .tile>input:checked + .card::after{ font-size:68px; } } @media print{ #cbe-bingo .card{ box-shadow:none; } }