/* Reset / Scope */
.bbingo-wrap {
  --bg:#fff; --text:#111; --muted:#666; --border:#e5e7eb; --chip:#f3f4f6;
  --btn:#111; --btn-text:#fff;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
}
.bbingo-wrap *{ box-sizing:border-box; }

/* Container */
.bbingo-wrap .bbingo-container{ max-width:1280px; margin:0 auto; padding:8px 16px; }

/* Headings */
.bbingo-wrap .bbingo-title{ margin:6px 0 8px; font-size:28px; line-height:1.25; font-weight:700; text-align:center; }
.bbingo-wrap .bbingo-lead{ margin:0 auto 14px; max-width:900px; color:var(--muted); text-align:center; }

/* Tabs */
.bbingo-wrap .bbingo-tabs{ display:flex; gap:10px; justify-content:center; margin:12px 0 16px; }
.bbingo-wrap .bbingo-tab{ appearance:none; border:none; background:#000; color:#fff; padding:10px 18px; border-radius:999px; font-weight:700; cursor:pointer; }
.bbingo-wrap .bbingo-tab.is-active{ opacity:1; }
.bbingo-wrap .bbingo-tab:not(.is-active){ opacity:.6; }

/* Boards */
.bbingo-wrap .bbingo-boards{ width:100%; }
.bbingo-wrap .bbingo-board{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }

/* Tablet: 2 Spalten */
@media (max-width:1024px){
  .bbingo-wrap .bbingo-board{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Phone: 1 Spalte */
@media (max-width:640px){
  .bbingo-wrap .bbingo-board{ grid-template-columns:1fr; }
  .bbingo-wrap .bbingo-cell{ min-height:auto; padding:14px; }
  .bbingo-wrap .bbingo-cell span{ overflow-wrap:anywhere; hyphens:auto; line-height:1.45; font-size:1rem; }
}

/* Cell */
.bbingo-wrap .bbingo-cell{ display:flex; align-items:flex-start; gap:8px; padding:12px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.02); min-height:92px; }
.bbingo-wrap .bbingo-cell input[type="checkbox"]{ margin-top:2px; }
.bbingo-wrap .bbingo-cell span{ display:block; line-height:1.35; }

/* Controls */
.bbingo-wrap .bbingo-controls{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:center; margin:16px 0 4px; }
.bbingo-wrap .bbingo-btn{ appearance:none; border:none; background:var(--btn); color:var(--btn-text); padding:10px 18px; border-radius:8px; font-weight:700; cursor:pointer; }
.bbingo-wrap .bbingo-btn.ghost{ background:#fff; color:var(--text); border:1px solid var(--border); }
.bbingo-wrap .bbingo-legend{ display:flex; gap:6px; align-items:center; }
.bbingo-wrap .chip{ display:inline-block; padding:6px 10px; background:var(--chip); border:1px solid var(--border); border-radius:999px; font-size:.9rem; }
.bbingo-wrap .chip.g{ background:#e8f8ee; }
.bbingo-wrap .chip.y{ background:#fff6db; }
.bbingo-wrap .chip.o{ background:#ffe8d9; }
.bbingo-wrap .chip.r{ background:#ffe1e1; }
.bbingo-wrap .bbingo-score{ margin-left:8px; font-weight:700; }

/* Druck */
@media print {
  .bbingo-wrap .bbingo-tab,
  .bbingo-wrap .bbingo-btn{ display:none!important; }
  .bbingo-wrap .bbingo-board[hidden]{ display:none!important; }
}

/* Theme-sicher hidden */
.bbingo-wrap .bbingo-board[hidden]{ display:none!important; }

/* Auswertung-Highlight */
.bbingo-wrap .bbingo-legend .chip.is-active{
  outline:2px solid #111;
  box-shadow:0 0 0 3px rgba(17,17,17,.12);
}