/* Billard (E117, S52) — flach und ruhig: ein Tisch in Draufsicht, sonst die Plattform. */
.hero-bi { display: flex; gap: 10px; justify-content: center; align-items: center; height: 56px; }
.hero-bi span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; }
.hero-bi .w { background: #efece2; }
.hero-bi .v { background: #d1403a; }
.hero-bi .a { background: #1b1b1f; }
.hero-bi .h { background: #2e8b57; box-shadow: inset 0 9px 0 #efece2, inset 0 -9px 0 #efece2; }

.bi-buehne { position: relative; width: max-content; max-width: 100%; margin: 6px auto 0; }
.bi-tisch {
    display: block; border-radius: 12px; border: 1px solid var(--panel-border); background: #6a4a33;
    touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.bi-tisch.hand { cursor: grab; }
.bi-leiste { display: flex; justify-content: center; margin: 8px 0 0; }
.bi-kraft { font-size: 13.5px; color: var(--muted); text-align: center; min-height: 20px; font-variant-numeric: tabular-nums; }
.bi-kraft b { color: var(--text); }
.bi-meldung { text-align: center; margin: 4px 0 0; min-height: 22px; }
.bi-meldung.foul { color: var(--red); }

.bi-tray { display: flex; justify-content: center; gap: 10px 22px; flex-wrap: wrap; margin: 8px 0 0; }
.bi-reihe { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-border); }
.bi-reihe.dran { border-color: var(--gold); }
.bi-reihe .bi-name { font-size: 12.5px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.bi-k { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff;
    border: 1px solid rgba(255, 255, 255, .22); background: transparent; }
.bi-k.da { opacity: .28; background: transparent !important; box-shadow: none !important; color: transparent; }
.bi-k.halb { box-shadow: inset 0 4px 0 #efece2, inset 0 -4px 0 #efece2; }
.bi-k.acht { background: #1b1b1f; }

@media (max-width: 699px) {
    .bi-k { width: 16px; height: 16px; font-size: 9px; }
}

/* Der Hinweis „Du bist dran" hat immer seinen Platz — der Tisch springt nicht, wenn er kommt und geht. */
#view-game .turn-hint { min-height: 52px; }