/***********************************************************************************************/
/* Live-Spiele - gemeinsames Lobby-Stylesheet (index.php aller sieben Spiele)                    */
/* Norbert Hohmann / 31.08.2026                                                                 */
/*                                                                                             */
/* Im Stil "Soft & rund" von Termine/Todo/Notizen/Dokumente/Alben (siehe termine.css) - weiche   */
/* Schatten statt Kanten, grosse Radien, Icon-Pillen vor jedem Feld. EIN gemeinsames Stylesheet   */
/* statt sieben eigener (anders als bei den "Meine Sektion"-Apps): die sieben Lobbys sind bis auf */
/* wenige spielspezifische Felder (Regelwerk bei Dame, Staerke-Regler bei Backgammon/Schach, ...) */
/* strukturell identisch - ein gemeinsames Stylesheet haelt sie visuell in Sync, statt sieben     */
/* Kopien schrittweise auseinanderlaufen zu lassen. Das eigentliche Spielbrett (spiel.html) hat    */
/* weiterhin sein eigenes, spielspezifisches Stylesheet - hier geht es nur um die Lobby-Seite.    */
/*                                                                                             */
/* Sichtbarkeit/Farbe/Optik/Regelwerk sind seit 31.08.2026 <select>-Dropdowns statt Radio-Listen  */
/* (Rueckmeldung: "Dropdown-Boxen ... um das kompakter zu halten") - der erklaerende Hinweistext  */
/* je Option (frueher als .option-hinweis NEBEN jedem Radio) steht jetzt als EINE Zeile unter dem  */
/* Dropdown (.auswahl-hinweis) und wird von einem kleinen Skript je Seite bei "change" ausgetauscht - */
/* dieselbe Idee wie das dynamische "Du bist Blau/Rot" bei Backgammon/Dame vorher schon, nur      */
/* jetzt fuer jede Auswahl statt nur die Farbe. */
/***********************************************************************************************/

:root {
	--lobby-karte-schatten: 0 18px 38px -20px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3);
	--lobby-zeile-schatten: 0 10px 22px -16px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--lobby-karte-schatten: 0 16px 34px -18px rgba(var(--accent-rgb),.22), 0 2px 8px rgba(30,42,61,.06);
		--lobby-zeile-schatten: 0 10px 24px -16px rgba(30,42,61,.16);
	}
}
:root[data-theme="dark"] {
	--lobby-karte-schatten: 0 18px 38px -20px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3);
	--lobby-zeile-schatten: 0 10px 22px -16px rgba(0,0,0,.55);
}
:root[data-theme="light"] {
	--lobby-karte-schatten: 0 16px 34px -18px rgba(var(--accent-rgb),.22), 0 2px 8px rgba(30,42,61,.06);
	--lobby-zeile-schatten: 0 10px 24px -16px rgba(30,42,61,.16);
}

body { background-color:var(--body-bg); font-family:'Segoe UI',Arial,sans-serif; color:var(--text-main); margin:0; padding:1.5rem 1rem; }
/* [hidden] muss display:none behalten, auch wenn ein Element eine Layout-Klasse traegt - dieselbe
   seit Langem im Projekt dokumentierte Falle wie bei Termine/Todo/Notizen/Dokumente. */
[hidden] { display:none !important; }

.karte { background:var(--card-bg); border:1px solid var(--border-soft); border-radius:24px; padding:1.6rem 1.4rem; margin:2rem auto; max-width:30rem; box-shadow:var(--lobby-karte-schatten); }
.hinweis { color:var(--text-muted-custom); font-size:.9rem; }
.fehler { color:var(--negative); font-size:.85rem; }
a { color:var(--accent); }

/* --- Formular --- */
.lobby-form { display:flex; flex-direction:column; gap:.9rem; margin-top:1rem; }
.lobby-form .feld { display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; }
.lobby-form .feld label { color:var(--text-muted-custom); font-weight:600; padding-left:.2rem; }

/* Icon-vorangestellte "Pille" um jedes Eingabefeld - identisches Muster zu termine.css/
   todoliste.css's .feld-box, hier unter eigenem Namen (.lobby-form-Praefix), damit sich die
   beiden Stylesheets nicht in die Quere kommen, sollten sie je auf derselben Seite landen. */
.lobby-form .feld-box {
	display:flex; align-items:center; gap:.6rem;
	background:var(--input-bg); border:1.5px solid var(--border-soft); border-radius:16px;
	padding:.65rem .8rem;
}
.lobby-form .feld-box:focus-within { border-color:var(--accent); }
.lobby-form .feld-box .feld-icon { flex:none; color:var(--text-muted-custom); }
.lobby-form .feld-box .feld-chevron { flex:none; color:var(--text-muted-custom); pointer-events:none; }
.lobby-form .feld-eingabe {
	flex:1; min-width:0; border:none; background:none; padding:0; margin:0;
	font:inherit; font-weight:600; color:var(--text-main);
}
.lobby-form .feld-eingabe:focus { outline:none; }
.lobby-form select.feld-eingabe { appearance:none; -webkit-appearance:none; cursor:pointer; }
/* Kleine erklaerende Zeile UNTER einem Dropdown, ersetzt seit 31.08.2026 den frueheren Text
   neben jeder Radio-Option - wird per JS bei "change" ausgetauscht (siehe je Spiel-index.php). */
.lobby-form .auswahl-hinweis { color:var(--text-muted-custom); font-size:.78rem; padding-left:.2rem; margin:-.15rem 0 0; }

/* Schwierigkeitsregler (Backgammon/Schach, Computergegner) - dieselbe Icon-Pille, der native
   Regler ersetzt darin nur das Eingabefeld. Der aktuell gewaehlte Level-Name steht als
   .auswahl-hinweis darunter, wie bei den Dropdowns. */
.lobby-form input[type=range].feld-eingabe { padding:0; accent-color:var(--accent); cursor:pointer; }
.lobby-form .staerke-skala { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-muted-custom); margin-top:.15rem; padding:0 .2rem; }

.lobby-form button[type=submit] {
	padding:.85rem 1.5rem; border:none; border-radius:999px;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent));
	color:#fff; font-weight:700; cursor:pointer; font-size:1rem;
	box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.65);
}
.lobby-form button[type=submit]:hover { filter:brightness(1.08); }

/* --- Warteliste: dieselbe weiche Zeilen-Optik wie Termine/Todo, ohne Datums-Chip --- */
.warteliste { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--border-soft); }
.warteliste h2 { font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted-custom); margin:0 0 .7rem; }
.warte-eintrag {
	display:flex; align-items:center; justify-content:space-between; gap:.6rem;
	border-radius:16px; border:1px solid var(--border-soft); background:var(--card-bg);
	padding:.65rem .8rem .65rem 1rem; margin-bottom:.6rem; font-size:.88rem;
	box-shadow:var(--lobby-zeile-schatten);
}
.warte-eintrag span { color:var(--text-strong); font-weight:600; }
.warte-eintrag a {
	flex-shrink:0; display:inline-flex; align-items:center; gap:.3rem;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent)); color:#fff;
	padding:.45rem 1rem; border-radius:999px; text-decoration:none; font-size:.82rem; font-weight:700;
}
.warte-eintrag a:hover { filter:brightness(1.08); }

/* --- Gespeichertes Spiel (Schach, 01.09.2026) - gleiche Karten-/Pillen-Optik wie .warteliste/
   .warte-eintrag oben, bewusst eigene Klassen statt Wiederverwendung: eine ausgegraute Variante
   (--gesperrt, Anreiz zur Registrierung fuer GAST) braucht Zusatzregeln, die die Warteliste nie
   kennt. Da dieses Stylesheet von allen sieben Lobby-Seiten gemeinsam geladen wird, sind diese
   Regeln nutzlos-aber-harmlos auf den sechs anderen Spielen, bis die Funktion dort auch existiert. */
.gespeichert-spiel { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--border-soft); }
.gespeichert-spiel h2 { font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted-custom); margin:0 0 .7rem; }
.gespeichert-eintrag {
	display:flex; align-items:center; justify-content:space-between; gap:.6rem;
	border-radius:16px; border:1px solid var(--border-soft); background:var(--card-bg);
	padding:.65rem .8rem .65rem 1rem; margin-bottom:.6rem; font-size:.88rem;
	box-shadow:var(--lobby-zeile-schatten);
}
.gespeichert-eintrag span { color:var(--text-strong); font-weight:600; }
.gespeichert-eintrag a {
	flex-shrink:0; display:inline-flex; align-items:center; gap:.3rem;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent)); color:#fff;
	padding:.45rem 1rem; border-radius:999px; text-decoration:none; font-size:.82rem; font-weight:700;
}
.gespeichert-eintrag a:hover { filter:brightness(1.08); }
/* Ausgegraute Variante fuer GAST - deutet die Moeglichkeit an (Anreiz zur Registrierung), statt
   sie einfach wegzulassen. Die Pille ist bewusst ein <span>, kein <a> - nicht klickbar, nur
   Vorschau; der eigentliche Handlungsaufruf ist der Login-Link darunter (siehe schach/index.php),
   der ausdruecklich NICHT mit ausgegraut wird. */
.gespeichert-eintrag--gesperrt { opacity:.55; }
.gespeichert-eintrag--gesperrt span:first-child { color:var(--text-muted-custom); font-weight:500; }
.gespeichert-eintrag__pille {
	flex-shrink:0; display:inline-flex; align-items:center; gap:.3rem;
	background:var(--tag-bg); color:var(--text-muted-custom);
	padding:.45rem 1rem; border-radius:999px; font-size:.82rem; font-weight:700;
	cursor:not-allowed;
}

.lobby-fusszeile { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border-soft); text-align:center; font-size:.85rem; color:var(--text-muted-custom); }