/***********************************************************************************************/
/* Spiele-Lobby (spiele/index.php, spiele/lobby.php) - Ergaenzung zu includes/spielLobby.css      */
/* Norbert Hohmann / 25.10.2026                                                                 */
/* Die Liste offener Lobbys (.lobby-eintrag) steht auch auf der Startseite: dort kommt dieselbe   */
/* Darstellung aus includes/appKachel.css (.spielhub-lobbys), damit die Startseite kein weiteres  */
/* Stylesheet laden muss.                                                                         */
/***********************************************************************************************/

.lobby-karte { max-width:34rem; }

.lobby-abschnitt { margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--border-soft); }
.lobby-abschnitt:first-of-type { border-top:none; padding-top:0; }
.lobby-abschnitt h2 { font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted-custom); margin:0 0 .7rem; }

.lobby-leer { color:var(--text-muted-custom); font-size:.9rem; margin:.2rem 0; }
.lobby-liste { display:flex; flex-direction:column; gap:.6rem; }
.lobby-eintrag {
	display:flex; flex-direction:column; gap:.15rem; text-decoration:none; color:var(--text-main);
	border-radius:16px; border:1px solid var(--border-soft); background:var(--card-bg);
	padding:.7rem .9rem; box-shadow:var(--lobby-zeile-schatten);
}
.lobby-eintrag:hover { border-color:var(--accent); }
.lobby-eintrag--voll { opacity:.6; }
.lobby-eintrag__kopf { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.lobby-eintrag__name { font-weight:700; color:var(--text-strong); overflow-wrap:anywhere; }
.lobby-eintrag__plaetze { flex:none; font-size:.8rem; font-weight:700; color:var(--accent); }
.lobby-eintrag__spiel, .lobby-eintrag__besitzer { font-size:.8rem; color:var(--text-muted-custom); }

.lobby-zusatz { font-weight:400; opacity:.8; }
.lobby-schalter { display:flex; align-items:center; gap:.5rem; font-weight:600; cursor:pointer; color:var(--text-main) !important; }
.lobby-schalter input { width:1.15rem; height:1.15rem; accent-color:var(--accent); }
.lobby-regeln { display:flex; flex-direction:column; gap:.9rem; }
.lobby-details { font-size:.85rem; }
.lobby-details summary { cursor:pointer; font-weight:600; }
.lobby-details ul { margin:.6rem 0 0; padding-left:1.2rem; line-height:1.5; }
.lobby-lizenz { font-size:.75rem; color:var(--text-muted-custom); margin:0; }

.lobby-unterzeile { color:var(--text-muted-custom); font-size:.9rem; margin:.2rem 0 1rem; }
.lobby-plaetze { list-style:none; padding:0; margin:0 0 .8rem; display:flex; flex-direction:column; gap:.5rem; }
.lobby-platz {
	display:flex; align-items:center; gap:.6rem;
	border-radius:14px; border:1px solid var(--border-soft); background:var(--input-bg);
	padding:.6rem .8rem; font-weight:600;
}
.lobby-platz--frei { border-style:dashed; background:none; color:var(--text-muted-custom); font-weight:400; }
.lobby-platz__name { flex:1; min-width:0; overflow-wrap:anywhere; }
.lobby-platz__marke { font-size:.75rem; color:var(--accent); font-weight:700; }
.lobby-platz__weg {
	flex:none; width:1.8rem; height:1.8rem; border-radius:50%; border:1px solid var(--border-soft);
	background:none; color:var(--text-muted-custom); font-size:1.1rem; line-height:1; cursor:pointer;
}
.lobby-platz__weg:hover { color:var(--negative); border-color:var(--negative); }
.lobby-start-hinweis { margin:0 0 .9rem; }

.lobby-knoepfe { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.lobby-knoepfe form { margin:0; }
.lobby-knopf {
	padding:.75rem 1.3rem; border:none; border-radius:999px; cursor:pointer; font:inherit; font-weight:700;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent)); color:#fff;
	box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.65);
}
.lobby-knopf:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.lobby-knopf--zweit { background:none; color:var(--accent); border:1.5px solid var(--accent); box-shadow:none; }
.lobby-knopf--leise { background:none; color:var(--text-muted-custom); border:1px solid var(--border-soft); box-shadow:none; }

/* Wie spielen: Computer / Lobby / an diesem Geraet (25.10.2026) */
.lobby-feldtitel { color:var(--text-muted-custom); font-weight:600; padding-left:.2rem; }
.lobby-modi { display:flex; flex-wrap:wrap; gap:.45rem; }
.lobby-modus { position:relative; cursor:pointer; }
.lobby-modus input { position:absolute; opacity:0; pointer-events:none; }
.lobby-modus span {
	display:inline-flex; align-items:center; min-height:2.5rem; padding:.4rem 1rem; border-radius:999px;
	border:1.5px solid var(--border-soft); background:var(--input-bg); color:var(--text-main); font-weight:600; font-size:.88rem;
}
.lobby-modus input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.lobby-modus input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.lobby-modus input:disabled + span { opacity:.45; cursor:not-allowed; }
.lobby-form button[type=submit]:disabled { opacity:.45; cursor:not-allowed; }