/* Schmale Kopf-/Fusszeile im Standard-Layout-Look fuer index.html, duell.html und
   gemeinschaft.html - bewusst mit eigenen, eindeutig praefigierten --mtchrome-* Variablen
   statt includes/theme.css: das React-Bundle deklariert selbst --accent/--card-bg auf
   :root, duell.html/gemeinschaft.html deklarieren selbst --accent - eine Einbindung von
   theme.css wuerde dort kollidieren und die feste Pastellfarbgebung der Spielbildschirme
   mitfaerben. Diese Datei ruehrt an :root ueberhaupt nichts an, nur an .mtchrome-Elementen -
   gesteuert allein ueber das data-theme-Attribut (includes/theme.js), das nicht kollidieren
   kann, weil es kein CSS-Custom-Property ist. */

html, body { height: 100%; }
body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 100dvh;
}
#root, .mtchrome-main { flex: 1 1 auto; }

.mtchrome {
	--mtchrome-bg: #1e2230;
	--mtchrome-border: #2a3050;
	--mtchrome-accent: #4f8ef7;
	--mtchrome-accent-hover: #6fa6ff;
	--mtchrome-text: #8892a4;
	flex: 0 0 auto;
	background: var(--mtchrome-bg);
	color: var(--mtchrome-text);
	font-family: 'Segoe UI', Arial, sans-serif;
}
:root[data-theme="light"] .mtchrome {
	--mtchrome-bg: #ffffff;
	--mtchrome-border: #d7dee8;
	--mtchrome-accent: #2f6fd6;
	--mtchrome-accent-hover: #1d56b0;
	--mtchrome-text: #64748b;
}

.mtchrome-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--mtchrome-border);
}
.mtchrome-header .mtchrome-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--mtchrome-accent);
}
.mtchrome-header a, .mtchrome-footer a {
	color: var(--mtchrome-accent);
	text-decoration: none;
	font-size: 0.85rem;
}
.mtchrome-header a:hover, .mtchrome-footer a:hover { color: var(--mtchrome-accent-hover); }

.mtchrome-footer {
	text-align: center;
	padding: 0.75rem 1rem;
	font-size: 0.8rem;
	border-top: 1px solid var(--mtchrome-border);
}

.theme-toggle {
	font: inherit;
	font-size: 0.8rem;
	padding: 0.3rem 0.8rem;
	border-radius: 20px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
}
.theme-toggle:hover { opacity: 1; }