/* ====== Basis & Typo ====== */
:root{
  --bg: #f6f7fb;
  --card-bg: #fff;
  --text: #111827;
  --muted: #6b7280;
  --primary: #0d6efd;
  --radius: 16px;

  /* B I N G O Column hues */
  --col-b:#1d4ed8; /* blue 700 */
  --col-i:#16a34a; /* green 600 */
  --col-n:#dc2626; /* red 600 */
  --col-g:#f59e0b; /* amber 500 */
  --col-o:#9333ea; /* purple 600 */
}

body{ background:var(--bg); color:var(--text);
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;
   }

/* Navbar mit Gradient */
.navbar{
  background: linear-gradient(90deg, #0d6efd, #6610f2);
}
.navbar .navbar-brand{ font-weight:700; letter-spacing:.2px; }

/* Cards & Buttons */
.card{
  border:0;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  background: var(--card-bg);
}
.card .card-body{ padding:1.25rem; }

.btn{ border-radius: 999px; font-weight:600; }
.btn-outline-primary{ border-width:2px; }

/* Kleinere Muted-Texts */
.text-muted, .small.text-muted{ color:var(--muted)!important; }

/* ====== Bingo-Board (Play) ====== */
.bingo-board{
  --cell-size: 38px;
}
@media (max-width: 1200px){ .bingo-board{ --cell-size: 36px; } }
@media (max-width: 992px){  .bingo-board{ --cell-size: 36px; } }
@media (max-width: 768px){  .bingo-board{ --cell-size: 36px; } }

.bingo-board .cell{
  height: var(--cell-size);
  display:flex; align-items:center; justify-content:center;
  border-radius: 24px;
  margin-bottom:5px;
  background:#fff;
  border:2px solid rgba(17,24,39,.12);
  font-weight:400;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 12px rgba(0,0,0,.06);
  transition: transform .08s ease, background .2s, color .2s, box-shadow .2s;
  user-select:none;
}

/* Kopfzeile B I N G O farbcodiert */
.bingo-board .row:first-child .col:nth-child(1) .cell.head{ background:linear-gradient(180deg,var(--col-b),#1e3a8a); color:#fff; border-color:transparent; }
.bingo-board .row:first-child .col:nth-child(2) .cell.head{ background:linear-gradient(180deg,var(--col-i),#166534); color:#fff; border-color:transparent; }
.bingo-board .row:first-child .col:nth-child(3) .cell.head{ background:linear-gradient(180deg,var(--col-n),#991b1b); color:#fff; border-color:transparent; }
.bingo-board .row:first-child .col:nth-child(4) .cell.head{ background:linear-gradient(180deg,var(--col-g),#b45309); color:#fff; border-color:transparent; }
.bingo-board .row:first-child .col:nth-child(5) .cell.head{ background:linear-gradient(180deg,var(--col-o),#6b21a8); color:#fff; border-color:transparent; }

.bingo-board .cell.hit{
  background:#e0f2fe;
  color:#0c4a6e;
  border-color:#38bdf8;
  box-shadow: inset 0 0 0 3px rgba(56,189,248,.35), 0 6px 18px rgba(56,189,248,.18);
  transform: scale(.98);
}

/* „Pulse“ für die zuletzt gezogene Zahl */
.pulse{
  animation: pulse .5s ease-out;
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(56,189,248,.55); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 16px rgba(56,189,248,0); transform: scale(1.00); }
}

/* Große Anzeige der letzten Zahl */
#lastDraw{
  letter-spacing:.5px;
  padding:.15rem .4rem;
  border-radius:12px;
  background:linear-gradient(180deg,#f8fafc,#eef2ff);
  border:1px solid rgba(99,102,241,.25);
  display:inline-block;
}

/* ====== Live-Ansicht Karten ====== */
.bingo-card-table{
  background:#fff; border-radius:12px; overflow:hidden;
}
.bingo-card-table thead th{
  text-align:center; color:#fff; font-weight:800; border:0;
}
.bingo-card-table thead th.bingo-head{ background:#0d6efd; }
.bingo-card-table thead th:nth-child(1){ background:var(--col-b); }
.bingo-card-table thead th:nth-child(2){ background:var(--col-i); }
.bingo-card-table thead th:nth-child(3){ background:var(--col-n); }
.bingo-card-table thead th:nth-child(4){ background:var(--col-g); }
.bingo-card-table thead th:nth-child(5){ background:var(--col-o); }

.bingo-card-table td{
  text-align:center; font-weight:700;
  vertical-align:middle;
  border-color: rgba(17,24,39,.08)!important;
}
.bingo-card-table td.free{
  background:#e7f5ff!important;
  color:#0b7285; font-weight:800;
  box-shadow: inset 0 0 0 2px #74c0fc;
}

/* Kleinere Badges oben rechts (Set-Anzeige etc.) */
.badge{
  border-radius: 999px;
  padding:.35rem .6rem;
}

/* Toasts etwas edler */
.toast{
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

/* Druck minimal neutral */
@media print{
  body{ background:#fff; }
  .navbar{ display:none; }
  .card{ box-shadow:none; }
}

/* unaufdringliche Druck-/Bildschirm-Optik */
.bingo-rules { font-size: 1rem; }
.bingo-rules ol { padding-left: 1.1rem; }
.bingo-rules li { margin-bottom: .2rem; }
@media print {
.bingo-rules { font-size: 0.95rem; }
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.7s ease;
    padding-bottom: 4px;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

a:hover {
    color: var(--color-link-hover);
}

a:hover::after {
    transform: scaleX(1);
}

/* Play – rechte Spalte layouten */
.play-side .draw-list{
  max-height: 14rem;         /* <- Höhe nach Geschmack anpassen */
  overflow: auto;
  padding-right: .25rem;
}

.play-side .winners-box{
  min-height: 8rem;          /* reserviert Platz, damit es „mittig“ wirkt */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* zentriert die Gewinner-Liste vertikal */
}

.play-side #winners .list-group-item{
  display: flex;
  justify-content: center;   /* zentriert Text/Badges horizontal */
  align-items: center;
  gap: .5rem;
  border: none;              /* dezenter Look */
  background: transparent;
  padding: .25rem .5rem;
}

/* Optional: kleine Kachel-Optik für die gezogene-Liste */
.play-side .draw-list{
  background: var(--bs-light-bg-subtle, #f8f9fa);
  border-radius: .5rem;
  padding: .5rem .75rem;
}