@font-face {
	font-family: LibertinusSerif;
	font-weight: normal;   font-style: normal;
	font-display: swap;
	src: url("/static/LibertinusSerif-Regular.otf") format("opentype");
}
@font-face {
	font-family: LibertinusSerif;
	font-weight: normal;   font-style: italic;
	font-display: swap;
	src: url("/static/LibertinusSerif-Italic.otf") format("opentype");
}
@font-face {
	font-family: LibertinusSerif;
	font-weight: bold;   font-style: normal;
	font-display: swap;
	src: url("/static/LibertinusSerif-Bold.otf") format("opentype");
}
@font-face {
	font-family: LibertinusSerif;
	font-weight: bold;   font-style: italic;
	font-display: swap;
	src: url("/static/LibertinusSerif-BoldItalic.otf") format("opentype");
}

:root {
	--font: "LibertinusSerif", serif;
}

html, body {
	font-family: var(--font);
}

input {
	font-family: var(--font);
}

label {
	display: block;
	font-weight: bold;

	&:has(input), &.inline {
		font-weight: unset;
		display: inline-block;
	}

	& > img {
		max-height: 1em;
	}
}

fieldset > legend {
	font-weight: bold;

}

a {
	&.backlink::before {
		content: "← ";
	}
}

th {
	padding: 1px 5px;

	&.spielername { background: forestgreen; color: ivory; }

	tr > &:first-child {
		text-align: left;
	}
}

td {
	white-space: nowrap;
	padding: 1px 5px;

	&.verloren  { color: red; }
	&.spielwert { text-align: right; }

	&.punkte  { background: ivory; text-align: right; }
	&.spieler { background: gold; }
	&.geber   { font-style: italic; text-decoration: underline; }

	&.punkte.relativ { display: none; }
	&.binaer         { display: none; }
}

segmented-select {
	padding: 5px;
	background: #eee;
	border-radius: 8px;
	display: inline-flex;
	flex-wrap: wrap;

	input[type=radio] {
		appearance: none;
		margin: 0;
		width: 0;
	}

	label {
		padding: 3px 7px;
		border-radius: 3px;
		box-sizing: border-box;
		display: inline-block;

		&:has(input:checked) {
			color: ivory;
			background: forestgreen;
		}

		&:has(input:disabled) {
			color: #aaa;
		}
		&:has(input:disabled:checked) {
			color: #888;
			background: #ccc;
		}
	}
}

number-spinner {
	padding: 5px;
	background: #eee;
	border-radius: 17px;
	display: inline-flex;
	flex-wrap: nowrap;
	column-gap: 5px;
	vertical-align: baseline;

	/* automatischen zoom verhindern */
	touch-action: manipulation;

	input {
		border-radius: 12px;
		border: none;
		width: 6ch;
		text-align: center;
	}

	button {
		border-radius: 12px;
		height: 24px;
		width: 24px;
		border: none;
		background: forestgreen;
		color: ivory;
	}
}

/* Spezifische Seiten */

body:has(input[name=ansicht][value=absolut]:checked) {
	td.punkte.relativ { display: none; }
	td.punkte.absolut { display: table-cell; }
}
body:has(input[name=ansicht][value=relativ]:checked) {
	td.punkte.relativ { display: table-cell; }
	td.punkte.absolut { display: none; }
}