/* Spiele-Mehrspieler – Lobby und Raum-Kopf.
   Nutzt die --sp-*-Variablen des jeweiligen Spiels (mit Fallbacks), damit das
   Panel sich in jedes Spiel einfügt. Alles auf .smp gescoped. */

.smp {
	--_accent: var(--sp-accent, #2e7d80);
	--_ink:    var(--sp-ink, #14293b);
	--_muted:  var(--sp-muted, #5b6f7f);
	--_line:   var(--sp-line, #c2ccd3);
	--_mono:   var(--sp-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
	--_sans:   var(--sp-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	--_win:    var(--sp-win, #1f7a4d);

	font-family: var(--_sans);
	color: var(--_ink);
	border: 1px solid var(--_line);
	border-radius: 10px;
	padding: 14px;
	margin: 0 0 16px;
	box-sizing: border-box;
}
.smp *, .smp *::before, .smp *::after { box-sizing: border-box; }

.smp__lead { font-size: 13px; line-height: 1.55; color: var(--_muted); margin: 0 0 12px; }

.smp__field { display: block; margin: 0 0 12px; }
.smp__label {
	display: block; font-family: var(--_mono); font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--_muted); margin-bottom: 4px;
}
.smp__input {
	width: 100%; padding: 9px 11px; font-family: var(--_sans); font-size: 15px;
	color: var(--_ink); background: #fff; border: 1px solid var(--_line); border-radius: 6px;
}
.smp__input:focus-visible { outline: 2px solid var(--_accent); outline-offset: 1px; }
.smp__input--code {
	font-family: var(--_mono); letter-spacing: 0.35em; text-transform: uppercase;
	text-align: center; max-width: 160px; width: auto;
}

.smp__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.smp__join { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.smp__or {
	text-align: center; font-family: var(--_mono); font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--_muted); margin: 14px 0 12px;
}

.smp__btn {
	font-family: var(--_mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; padding: 9px 14px; border-radius: 6px;
	background: var(--_accent); color: #fff; border: 1px solid var(--_accent); cursor: pointer;
}
.smp__btn--ghost, .smp__btn--chip { background: transparent; color: var(--_ink); border-color: var(--_line); font-weight: 400; }
.smp__btn--chip { padding: 6px 11px; }
.smp__btn:hover:not([disabled]) { filter: brightness(1.08); }
.smp__btn:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }

.smp__msg, .smp__status, .smp__wait {
	font-family: var(--_mono); font-size: 12px; line-height: 1.5; color: var(--_muted); margin: 10px 0 0; min-height: 1.4em;
}
.smp__wait { color: var(--_accent); }

/* ---------- Raum-Kopf ---------- */

.smp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.smp__barRight { display: flex; gap: 6px; }
.smp__codeBox { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.smp__codeLabel { font-family: var(--_mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--_muted); }
.smp__code { font-family: var(--_mono); font-size: 20px; font-weight: 700; letter-spacing: 0.2em; color: var(--_accent); }

.smp__players { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.smp__player {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #fff;
	border: 1px solid var(--_line); border-radius: 999px; font-size: 12px;
}
.smp__player.is-you { border-color: var(--_accent); }
.smp__player.is-off { opacity: 0.5; }
.smp__player.is-empty { opacity: 0.6; border-style: dashed; }
.smp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--_win); }
.smp__player.is-off .smp__dot, .smp__player.is-empty .smp__dot { background: var(--_muted); }
.smp__pseat { font-family: var(--_mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--_muted); }
.smp__pname { font-weight: 600; }