:root{
    --ink:#f1f5fb;           /* Haupttext */
    --muted:#b6c2cf;         /* Sekundärtext -> deutlich heller */
    --accent:#38bdf8;
    --bg:#0f1216;
    --card:#121821;
    --grid:#2c3a4a;
  }
  html,body{height:100%}
  body{
    background:
    radial-gradient(1200px 600px at 30% -10%, rgba(43,47,54,.55), rgba(15,18,22,.75)) fixed,
    url("bingo.jpg") center/cover no-repeat fixed;
    color:var(--ink);
  }
  .btn { margin:5px;border-radius:20px;}
  .card{background:#161b22;border:1px solid #2a2f36;}
  /* Bootstrap-Secondary auf Dark-Theme optimieren */
  .text-secondary{color:var(--muted)!important}
  .badge-soft{color:#e9f3ff; background:#223042; border:1px solid #31465f}
  .board{display:grid; grid-template-columns: repeat(5, minmax(48px,1fr)); gap:10px}
  .cell{
    background:#0f1520;
    color:var(--ink);
    border:1px solid var(--grid);
    border-radius:10px;
    padding:1rem;
    text-align:center;
    font-weight:800;
    font-size:1.25rem;
    user-select:none;
    transition:transform .04s ease;
  }
  .cell:hover{transform:scale(1.02); cursor:pointer}
  .cell.used{background:#1a2331; color:#c7d8ea; border-color:#2b3b52; cursor:not-allowed}
  .cell.mine{outline:2px solid var(--accent)}
  .turn-dot{width:.8rem;height:.8rem;border-radius:50%;display:inline-block;margin-right:.35rem}
  .turn0{background:#4ade80}.turn1{background:#f472b6}
  .kicker{font-size:.92rem;color:var(--muted)}
  .brand{font-weight:800; letter-spacing:.5px;}

  #gameId,
  #myName { 
    color: #f8fbff !important;   /* sehr hell */
    opacity: 1 !important;
  }

  #p0Name,
  #p1Name {
    color: #eef4ff !important;   /* Spieler-Namen heller */
    font-weight: 700;
  }

  .badge-soft{
    color: #f0f6ff !important;   /* Linienzähler besser lesbar */
    background: #223246 !important;
    border-color: #2f4661 !important;
  }

  /* Falls Bootstrap noch irgendwo abtönt: */
  .card .text-secondary { color: #bfcddd !important; }