/* 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); }

/* Eine Absage muss man sehen. Grau in 12px unter dem Beitreten-Feld hat
   niemand bemerkt – deshalb Warnfarbe und ein Balken am Zeilenanfang. */
.smp__msg--fehler {
	color: #b3261e; font-weight: 600;
	border-left: 3px solid #b3261e; padding-left: 8px;
}

/* ---------- 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; }

/* ---------- Chat ----------
   Sitzt unter dem Spiel und übernimmt dessen Farbwelt über die --sp-*-Variablen. */

.smp--chat { margin: 16px 0 0; padding: 12px 14px; }

.smp__chatHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }

.smp__chatTitle {
	font-family: var(--_mono); font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--_muted);
}

.smp__chatHint { font-family: var(--_mono); font-size: 11px; color: var(--_accent); }

.smp__chatLog {
	list-style: none; margin: 0 0 10px; padding: 0;
	max-height: 190px; overflow-y: auto;
	font-size: 14px; line-height: 1.5;
	overscroll-behavior: contain;
}

.smp__chatLog:empty { display: none; }

.smp__chatMsg { margin: 0 0 5px; padding: 0; display: flex; gap: 8px; align-items: baseline; }

.smp__chatWho {
	flex: 0 0 auto;
	font-family: var(--_mono); font-size: 11px; font-weight: 700;
	color: var(--_muted);
	max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.smp__chatMsg.is-me .smp__chatWho { color: var(--_accent); }

/* Umbrechen auch bei sehr langen Buchstabenketten, damit nichts überläuft. */
.smp__chatText { min-width: 0; overflow-wrap: anywhere; }

.smp__chatRow { display: flex; gap: 8px; align-items: stretch; margin: 0; }

.smp__chatInput { flex: 1 1 auto; min-width: 0; font-size: 14px; padding: 8px 10px; }

.smp__chatRow .smp__btn { flex: 0 0 auto; }

@media (max-width: 420px) {
	.smp--chat { padding: 10px 11px; }
	.smp__chatLog { max-height: 150px; }
}

/* ---------- Führungsleiste --------------------------------------------------
   Gemeinsam für alle Raum-Spiele: Aufforderung und der passende Knopf an einer
   Stelle, oberhalb des Spielfelds. Vorher trug in jedem Spiel eine kleine
   Statuszeile die ganze Last, und der nötige Knopf stand irgendwo weiter unten.
   Die Farbe kommt über --sp-accent aus dem jeweiligen Spiel.
   ---------------------------------------------------------------------------- */

/* Die Leiste hängt im Spiel, nicht im .smp-Panel – die Variablen von oben
   erreichen sie deshalb nicht. Sie bringt sie selbst mit. */
.smp__guide {
	--_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);
	display: none;
	box-sizing: border-box;
}
.smp__guide *, .smp__guide *::before, .smp__guide *::after { box-sizing: border-box; }
.smp__guide.is-on {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 18px;
	margin: 0 0 16px;
	padding: 13px 16px;
	border: 1px solid var(--_line);
	border-left: 4px solid var(--_accent);
	border-radius: 10px;
	background: #fff;
	font-family: var(--_sans, inherit);
}

.smp__guideBody { flex: 1 1 240px; min-width: 0; }

.smp__guideTitle {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--_ink);
}

.smp__guideText {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--_muted);
}
.smp__guideText.is-leer { display: none; }

.smp__guideActions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }

/* Knöpfe erscheinen nur, wenn ihnen eine Aufgabe zugewiesen wurde. */
.smp__guideBtn { display: none; }
.smp__guideBtn.is-on { display: inline-block; }

/* Am Zug: derselbe Punkt wie in der Statuszeile, damit es zusammengehört. */
.smp__guide--zug .smp__guideTitle::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--_accent);
	vertical-align: baseline;
	animation: smp-puls 1.6s ease-in-out infinite;
}

@keyframes smp-puls {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.35); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
	.smp__guide--zug .smp__guideTitle::before { animation: none; }
}

.smp__guide--win  { border-left-color: #1f7a4d; }
.smp__guide--win  .smp__guideTitle { color: #1f7a4d; font-size: 21px; }
.smp__guide--lose { border-left-color: #b3382c; }
.smp__guide--lose .smp__guideTitle { color: #b3382c; font-size: 21px; }

@media (max-width: 460px) {
	.smp__guideTitle { font-size: 16px; }
	.smp__guide--win .smp__guideTitle,
	.smp__guide--lose .smp__guideTitle { font-size: 18px; }
	.smp__guideActions { flex: 1 1 100%; }
	.smp__guideBtn.is-on { flex: 1 1 auto; }
}