/* Plate Bingo structure. Uses theme tokens, the shared plate look and .key/.btn skins. */
.bg-setup { position: absolute; left: 50%; transform: translateX(-50%); top: 18rem; width: 130rem; padding: 4rem 5rem; border-radius: 3.6rem; display: flex; flex-direction: column; gap: 2rem; }
.bg-setup .side-title { margin: 0 0 .6rem; }
.bg-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.bg-level { height: 20rem !important; padding: 2rem !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-transform: none !important; }
.bg-level b { font-family: var(--font-display); font-size: 4.2rem; }
.bg-level span { font-size: 3.2rem; font-weight: 500; }
.bg-level i { font-style: normal; font-size: 2.6rem; opacity: .7; }
.bg-players { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.bg-n { height: 13rem !important; font-family: var(--font-display); font-size: 5.6rem !important; }
.bg-level.on, .bg-n.on { outline: .6rem solid var(--accent); outline-offset: .4rem; }
.bg-note { font-size: 3rem; margin: .6rem 0; opacity: .85; }
.bg-party { height: 13rem !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-transform: none !important; }
.bg-party b { font-family: var(--font-display); font-size: 3.8rem; } .bg-party span { font-size: 2.6rem; font-weight: 500; opacity: .8; }
.bg-deal { height: 14rem !important; font-size: 4.4rem !important; }

.bg-left { position: absolute; left: 5.6rem; top: 18rem; width: 128rem; bottom: 4rem; display: flex; flex-direction: column; gap: 3rem; }
.bg-top { display: flex; gap: 3rem; align-items: center; }
.bg-plate { width: 64rem; flex: none; pointer-events: none; }
.bg-plate .st { font-size: 5.4cqw; }
.bg-entry.empty { opacity: .35; }
.bg-plate.nope { animation: nope .4s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-2rem); } 40%, 80% { transform: translateX(2rem); } }
.bg-acts { flex: 1; display: flex; flex-direction: column; gap: 2.4rem; }
.bg-acts .btn { height: 13rem; font-size: 4.2rem; }
.bg-log:disabled, .bg-acts .btn:disabled { opacity: .45; }
.bg-kb { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
.bg-kb .kb-row { display: flex; gap: .9rem; }
.bg-kb .key { width: 12rem; height: 12rem; }
.bg-kb .key.wide { width: 24.9rem; }

.bg-right { position: absolute; left: 137rem; right: 5.6rem; top: 18rem; bottom: 4rem; display: flex; flex-direction: column; gap: 1.8rem; }
.bg-tabs { display: flex; gap: 1.3rem; }
.bg-tab { flex: 1; min-width: 12rem; height: 12rem; padding: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.bg-tab b { font-size: 3.6rem; } .bg-tab span { font-size: 2.6rem; opacity: .8; }
.bg-tab.on { outline: .5rem solid var(--accent); outline-offset: .3rem; }
.bg-tab.won span { color: var(--amber); opacity: 1; }
.bg-card { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 1rem; padding: 1.6rem; border-radius: 2.8rem; aspect-ratio: 1; }
.bg-card .cell { display: flex; align-items: center; justify-content: center; border-radius: 1.4rem; background: rgba(127,127,127,.16); font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--text); }
[style*="--n: 3"].bg-card .cell { font-size: 8rem; border-radius: 2.4rem; }
.bg-card .cell.hit { background: var(--ok); color: var(--ok-ink); box-shadow: var(--ok-glow); }
.bg-card .cell.free { background: var(--near); color: var(--near-ink); }
.bg-card .cell.line { outline: .5rem solid var(--accent); outline-offset: -.5rem; }
.bg-card .cell.pop { will-change: transform; animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.bg-card > .stamp { position: absolute; left: 50%; top: 50%; width: 34rem; margin: -10rem 0 0 -17rem; pointer-events: none; }
.bg-card > .stamp .stamp-t { font-size: 5.6rem; }
.bg-status { font-size: 2.8rem; line-height: 1.25; } .bg-status b { color: var(--accent); }
.bg-info { flex: 1; min-height: 0; padding: 1.4rem 2rem; border-radius: 2.4rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.bg-log { display: flex; flex-wrap: wrap; gap: .8rem; font-size: 2.6rem; align-items: center; }
.bg-chip { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 3rem; letter-spacing: .1rem; padding: .2rem 1.2rem; border-radius: 1rem; background: rgba(127,127,127,.18); }
.bg-chip i { font-style: normal; opacity: .6; }
.bg-count, .bg-empty { opacity: .7; }
.bg-new[hidden] { display: none; }

@media (orientation: portrait) {
  .bg-setup { padding: 4rem; }
  .bg-levels { grid-template-columns: 1fr; }
  .bg-level { height: 16rem !important; }
  .bg-left, .bg-right { gap: 2.4rem; }
  .bg-top { flex-direction: column; align-items: stretch; }
  .bg-plate { width: 70rem; align-self: center; }
  .bg-acts { flex-direction: row; } .bg-acts .btn { flex: 1; }
  .bg-kb .kb-row { gap: .8rem; }
  .bg-kb .key { width: 9rem; height: 13rem; }
  .bg-kb .key.wide { width: 18rem; }
  .bg-card .cell { font-size: 5.6rem; }
  .bg-tab { height: 13rem; }
}