body { background:#0b0f1a; color:#e9eefc; font-family: system-ui, Arial; margin:0; }
a{color:#9fb7ff}
.topbar { position:sticky; top:0; background:rgba(10,14,25,.92); backdrop-filter: blur(8px); padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); z-index:20; }
.grid { display:grid; grid-template-columns: 1fr 320px; gap:12px; padding:12px; }
.card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ball { font-size:44px; font-weight:800; letter-spacing:1px; display:inline-block; padding:8px 14px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); min-width:92px; text-align:center;}
.chips { display:flex; flex-wrap:wrap; gap:6px; max-height:86px; overflow:auto; }
.chip { padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); font-size:12px; }
.statrow { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.stat { padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:13px; }
.win { padding:10px 12px; border-radius:12px; background:rgba(0,255,140,.12); border:1px solid rgba(0,255,140,.22); font-weight:700; display:none; margin-top:10px; }

.bottom { padding:12px; }
.bingoCard { min-width:320px; border-radius:16px; padding:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.cardGrid { display:grid; grid-template-columns: repeat(9, 1fr); gap:6px; margin-top:8px; }
.cell { height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06); font-weight:700; }
.cell.empty { opacity:.12; }
.cell.marked { background: rgba(0,180,255,.22); border-color: rgba(0,180,255,.35); box-shadow: 0 0 0 2px rgba(0,180,255,.10) inset; }

.chatLog { height:360px; overflow:auto; font-size:13px; line-height:1.2rem; }
.chatItem { padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.inputRow { display:flex; gap:8px; margin-top:8px; }
input, button { border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#e9eefc; padding:10px 12px; }
button { cursor:pointer; font-weight:700; }
small.mute { opacity:.75; }

.onlineItem { display:flex; justify-content:space-between; padding:8px 8px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); margin-bottom:8px; }
.badge { font-weight:800; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); }
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.10);margin:10px 0}
.cardsWrap{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ 3 cartes par ligne */
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 900px){
  .cardsWrap{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px){
  .cardsWrap{
    grid-template-columns: 1fr;
  }
}