/* ─── Fonts ────────────────────────────────────────────── */
@font-face {
	font-family: "Silkscreen";
	src: url("/fonts/Silkscreen-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

/* ─── Design Tokens ────────────────────────────────────── */
:root {
	--bg:           #f0f0f0;
	--ink:          #000000;
	--font:         -apple-system, blinkmacsystemfont, "sf pro text", "helvetica neue", helvetica, arial, sans-serif;
	--paper:        transparent;
	--text-muted:   #5f5f5f;
	--active-bg:    #dddddd;
	/* die abschnittsgrenzen. sie waren reines schwarz, solange jede zeile
	   ihre linie zog — heute ziehen nur noch die drei, vier gruppengrenzen
	   eine, und was so selten vorkommt, muss nicht laut sein. */
	--line:         rgba(0,0,0,0.45);
	--line-subtle:  rgba(0,0,0,0.16);
	/* über und unter der namenszeile: deutlich leichter. sie trennt zwei
	   dinge, die sich schon durch ihre lage unterscheiden. */
	--line-head:    rgba(0,0,0,0.20);
	--active-ink:   #ffffff;

	/* ── Der Block: vier stufen statt linien ──────────────── */
	/* zeilen und spalten trennen sich über die fläche, nicht über einen
	   strich. jede zweite zeile und jede zweite spalte liegt ein stück
	   tiefer richtung grund; eine zelle, die in beidem die zweite ist, liegt
	   am tiefsten. die vier stufen ergeben ein sehr flaches karo.
	   dieselbe rechnung steht in ios/Wuerfelblock/Ansicht/Gestaltung.swift
	   als `Farben.zellgrund`. */
	--zeile:        hsl(from var(--bg) h calc(s * 0.35) calc(l + 5.5));
	--zeile-z:      hsl(from var(--bg) h calc(s * 0.35) calc(l + 3));
	--zeile-s:      hsl(from var(--bg) h calc(s * 0.35) calc(l + 3.3));
	--zeile-zs:     hsl(from var(--bg) h calc(s * 0.35) calc(l + 0.8));

	/* die summenzeilen treten hinter den block zurück: hell unter den grund,
	   weil dorthin der weg frei ist. */
	--summe:        var(--bg);
	--summe-z:      hsl(from var(--bg) h s calc(l - 2.5));
	--summe-s:      hsl(from var(--bg) h s calc(l - 2.2));
	--summe-zs:     hsl(from var(--bg) h s calc(l - 4.7));

	/* ── Glass Sheets — alle Overlays nutzen diese ───────── */
	--sheet-bg:     rgba(255,255,255,0.72);
	--sheet-border: rgba(255,255,255,0.65);
	--sheet-shadow:
		inset 0 1px 0 rgba(255,255,255,0.8),
		0 0 0 0.5px rgba(0,0,0,0.04),
		0 8px 32px rgba(0,0,0,0.1);

	/* ── Amber — automatisch komplementär zu --bg ─────────── */
	/* die gewinnerspalte wird eingefärbt, nicht umrandet: eine linie
	   verschiebt das raster gegen die spalten daneben, eine fläche nicht. */
	--amber-fill:   hsl(from var(--bg) calc(h + 180) 30% 88%);
	/* auch die gewinnerspalte wechselt. solange jede zeile ihre linie zog,
	   war das kein thema — die linie lief durch die getönte spalte wie durch
	   jede andere. seit der wechsel der fläche sie ersetzt, stünde sie sonst
	   als eine einzige durchgehende fläche da, ohne dass sich eine zeile von
	   der nächsten abhöbe. */
	--amber-fill-z: hsl(from var(--bg) calc(h + 180) 30% 84%);
	--amber-border: hsl(from var(--bg) calc(h + 180) 22% 75%);
	/* etwas dunkler als früher: die tinte lag vorher auf weiß, jetzt auf der
	   tönung. 45 % helligkeit kamen dort nur noch auf 3,7:1, 38 % auf 4,8:1. */
	--amber-text:   hsl(from var(--bg) calc(h + 180) 30% 38%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg:           #0d1117;
		--ink:          #ffffff;
		--paper:        transparent;
		--text-muted:   #9a9a9a;
		--active-bg:    #2b2b2b;
		--line:         rgba(255,255,255,0.30);
		--line-subtle:  rgba(255,255,255,0.25);
		--line-head:    rgba(255,255,255,0.14);
		--active-ink:   #ffffff;

		/* dunkel dieselben abstände, nur kräftiger gesättigt. */
		--zeile:        hsl(from var(--bg) h calc(s * 0.7) calc(l + 5.5));
		--zeile-z:      hsl(from var(--bg) h calc(s * 0.7) calc(l + 3));
		--zeile-s:      hsl(from var(--bg) h calc(s * 0.7) calc(l + 3.3));
		--zeile-zs:     hsl(from var(--bg) h calc(s * 0.7) calc(l + 0.8));

		/* dunkel gehen die summenzeilen *nach oben* vom grund weg. unter dem
		   grund ist bei acht bis sechzehn prozent helligkeit kein platz mehr:
		   was dort liegt, ist kein „zurückgetreten", sondern ein loch. */
		--summe:        hsl(from var(--bg) h s calc(l + 2.4));
		--summe-z:      hsl(from var(--bg) h s calc(l + 1.35));
		--summe-s:      hsl(from var(--bg) h s calc(l + 1.5));
		--summe-zs:     hsl(from var(--bg) h s calc(l + 0.4));

		/* ── Glass Sheets dark — vollständig ink-basiert ─────── */
		--sheet-bg:     rgba(255,255,255,0.07);
		--sheet-border: rgba(255,255,255,0.13);
		--sheet-shadow:
			inset 0 1px 0 rgba(255,255,255,0.12),
			0 0 0 0.5px rgba(255,255,255,0.06),
			0 8px 32px rgba(0,0,0,0.4);

		/* ── Amber dark ──────────────────────────────────────── */
		--amber-fill:   hsl(from var(--bg) calc(h + 180) 20% 22%);
		--amber-fill-z: hsl(from var(--bg) calc(h + 180) 20% 19%);
		--amber-border: hsl(from var(--bg) calc(h + 180) 12% 25%);
		--amber-text:   hsl(from var(--bg) calc(h + 180) 18% 80%);
	}
}

/* ─── Reset & Base ─────────────────────────────────────── */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	min-height: 100svh;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
}

[hidden] { display: none !important; }

.board__cell,
.board__cell--clickable,
.app__button,
.board__icon,
.overlay__key,
.confirm__btn {
	touch-action: manipulation;
}

/* ─── Accessibility ────────────────────────────────────── */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── App Shell ────────────────────────────────────────── */
.app {
	width: 100%;
	min-height: 100svh;
	padding: calc(16px + env(safe-area-inset-top)) 12px 0;
	display: flex;
	justify-content: center;
}

.app__shell {
	width: min(100%, 940px);
	margin: 0 auto;
}

.app__main {
	width: 100%;
}

.app__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.app__brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.app__title {
	margin: 0;
	font-family: "Silkscreen", monospace;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.1;
}

.app__title-link {
	color: inherit;
	text-decoration: none;
	display: inline-block;
}

.app__title-link:active {
	opacity: 0.7;
}

.app__subtitle {
	font-size: 12px;
	line-height: 1.3;
	color: var(--text-muted);
}

.app__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
}

/* ─── Der Hinweis auf die App-Beta ─────────────────────── */
/* Eine eigene Kapsel über der Marke. Sie liegt eine Stufe über dem Grund -
   dieselbe Fläche, die auch ein gedrückter Knopf trägt -, damit sie sich als
   Ansage liest und nicht als weitere Zeile der Seite.

   Der Knopf darin ist ein ganz gewöhnlicher `.app__button`. Ein eigener,
   lauterer Knopf wäre die zweite Knopfsprache auf einer Seite, die genau eine
   hat; und über dem Block steht mit „neues spiel" ohnehin schon einer. */
.beta {
	/* radius und polsterung stehen als zahlen hier oben, weil der knopf
	   darin sie braucht: ein rundes eck in einem runden eck stimmt nur, wenn
	   der innere radius um genau die polsterung kleiner ist. sonst laufen die
	   beiden bögen auseinander, und man sieht es, ohne sagen zu können, was
	   nicht stimmt. */
	--beta-rundung: 999px;
	--beta-polster: 6px;

	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: var(--beta-polster) var(--beta-polster) var(--beta-polster) 13px;
	border-radius: var(--beta-rundung);
	background: var(--active-bg);
	font-size: 13px;
	line-height: 1.3;
}

.beta__icon {
	border-radius: 22%;
	flex: 0 0 auto;
	display: block;
}

.beta__text {
	min-width: 0;
}

/* Der Knopf darf anders aussehen als die übrigen.

   Er war zuerst ein gewöhnlicher `.app__button` - dieselbe weiche Kapsel wie
   „neues spiel". Das war zu bescheiden: Die anderen Knöpfe tun etwas *auf*
   dieser Seite, dieser führt von ihr weg, zu Apple, in eine App. Was etwas
   anderes tut, darf anders aussehen.

   Deshalb gefüllt statt durchscheinend, in der Tinte selbst. Es ist die
   einzige Fläche der Seite in dieser Stärke - und genau deshalb findet das
   Auge sie sofort. */
.beta__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;

	padding: 9px 15px;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;

	/* nicht die reine tinte.

	   reines schwarz war der erste versuch und wirkte hart — dieselbe sache
	   wie in der app, wo die hauptaktion auf `UIColor.label` stand und als
	   fremdkörper las. eine seite, deren dunkelster strich bei 45 prozent
	   deckung liegt, hat für reines schwarz keine verwendung.

	   also die tinte, aber mit etwas grund darin: hell ergibt das ein
	   weiches kohlegrau, dunkel ein gebrochenes weiß. gefüllt bleibt gefüllt
	   — die fläche fällt weiter auf, sie schreit nur nicht mehr. */
	background: color-mix(in srgb, var(--ink) 76%, var(--bg));
	color: var(--bg);
	border: 0;
	/* der innere bogen: außen minus polsterung. bei einer kapsel bleibt es
	   eine kapsel, bei vierzehn punkten werden acht daraus. */
	border-radius: calc(var(--beta-rundung) - var(--beta-polster));
	transition: transform 0.12s ease, opacity 0.12s ease;
}

@media (hover: hover) {
	.beta__cta:hover { opacity: 0.85; }
}

.beta__cta:active {
	transform: scale(0.96);
	opacity: 0.8;
}

/* Das Kreuz. Kleiner als der Knopf und ohne Fläche: Wegklicken ist keine
   Handlung, für die jemand geworben werden muss - es muss nur zu finden
   sein, wenn man danach sucht. */
.beta__zu {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	/* der schub nach rechts sitzt am kreuz, nicht am knopf: die beiden
	   gehören zusammen ans ende, und wer von ihnen den leerraum vor sich
	   herschiebt, ist der erste. */
	margin-left: auto;
	/* näher an den knopf. die zehn punkte abstand der kapsel gelten zwischen
	   allen teilen — hier sind sie zu viel, weil das kreuz in seinem
	   dreißig-punkte-feld ohnehin luft um sich hat. der negative rand nimmt
	   den abstand zurück, das antippbare feld bleibt. */
	margin-right: -6px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--text-muted);
	border-radius: 999px;
}

@media (hover: hover) {
	.beta__zu:hover { color: var(--ink); }
}

.beta__zu:active { transform: scale(0.9); }

/* Weggeklickt. Die Klasse setzt ein kurzes Skript im Kopf, bevor der Körper
   gezeichnet wird - siehe app/kopf.php. */
.beta-weg .beta {
	display: none;
}

@media (max-width: 460px) {
	/* Schmales Gerät: der Knopf geht in eine eigene Zeile.

	   Nebeneinander ging es nicht. „betatester werden" lässt sich nicht
	   umbrechen und nimmt sich seine Breite; vom Satz blieb daneben eine
	   Spalte von zwei Wörtern, die über sieben Zeilen lief. Was nicht
	   nebeneinander passt, gehört untereinander.

	   Oben also Symbol, Satz und Kreuz, darunter der Knopf über die volle
	   Breite — dort ist er ohnehin leichter zu treffen. Die Reihenfolge macht
	   `order`, nicht eine zweite Fassung des Markups.

	   Und die Kapsel wird eckiger: mit halbkreisenden Enden sähe ein
	   zweizeiliger Kasten aus wie eine Tablette. Der Knopf rundet sich über
	   `calc` von selbst mit, deshalb steht hier nur die eine Zahl. */
	.beta {
		--beta-rundung: 14px;
		flex-wrap: wrap;
		padding: 10px 10px 10px 12px;
		gap: 10px;
	}

	.beta__text {
		flex: 1 1 0;
		min-width: 120px;
	}

	/* kein `order` mehr nötig: das kreuz steht schon vor dem knopf, und der
	   knopf bricht als letztes element von selbst in die zweite zeile. */
	.beta__cta {
		flex: 1 1 100%;
		justify-content: center;
		padding: 11px 15px;
	}
}

/* ─── Shared Button Style ──────────────────────────────── */
.app__button {
	appearance: none;
	border-radius: 999px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ─── Board ────────────────────────────────────────────── */
.board {
	background: var(--paper);
	border-top: 1px solid var(--line);
	overflow: visible;
}

.board__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.board__meta-right {
	display: flex;
	align-items: center;
	gap: 8px;
	/* rechts, auch wenn links nichts mehr steht.

	   die zeile verteilt ihre kinder mit `space-between`. solange links der
	   text stand, drückte der die knöpfe von selbst nach rechts. ohne ihn
	   bleibt im klassischen modus - wo auch das modus-zeichen versteckt ist -
	   nur noch diese gruppe übrig, und die stünde dann links. */
	margin-left: auto;
}

.board__icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.board__icon:disabled {
	opacity: 0.3;
	cursor: default;
}

.board__grid {
	display: grid;
	/* 124 statt 110: in versalien braucht dieselbe beschriftung mehr platz
	   als gemischt gesetzt. */
	grid-template-columns: minmax(124px, 1.45fr) repeat(var(--player-count), minmax(0, 1fr));
	width: 100%;
	background: var(--paper);
}

/* ─── Board Cells ──────────────────────────────────────── */
.board__cell {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 6px;
	/* keine linie mehr — weder unten noch links. der block trennt seine
	   zeilen und spalten über die fläche. */
	font-size: 15px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	background: var(--zeile);
	color: var(--ink);
	transition: background 0.12s ease;
}

/* die vier stufen. `--alt-z` ist jede zweite zeile, `--alt-s` jede zweite
   spalte; eine zelle kann beides sein. */
.board__cell--alt-z            { background: var(--zeile-z); }
.board__cell--alt-s            { background: var(--zeile-s); }
.board__cell--alt-z.board__cell--alt-s { background: var(--zeile-zs); }

.board__cell--thick-top {
	border-top: 1px solid var(--line);
}

.board__cell--thick-bottom,
.board__cell--summary.board__cell--thick-bottom {
	border-bottom: 2px solid var(--line);
}

/* alles im block steht in versalien — die namen im kopf, die summenzeilen,
   und die zeilen dazwischen.

   klein und im gewöhnlichen schnitt, nicht groß und dünn: versalien wiegen
   schwerer als gemischter satz, und ein dünner schnitt gleicht das nicht aus,
   sondern wird bei dieser größe nur blasser. die größe zurückzunehmen wirkt
   besser als das gewicht. die sperrung ist keine zierde — versalien sind alle
   gleich hoch, ohne ober- und unterlängen fehlt das wortbild. */
.board__cell--label {
	/* elf statt zwölf, und die sperrung knapper als bei den summen.

	   die app setzt hier zwölf punkt und läßt die schrift notfalls bis auf
	   siebzig prozent schrumpfen (`minimumScaleFactor`). css kann das nicht —
	   eine schrift ist dort so groß, wie sie gesetzt ist, und was nicht passt,
	   bricht um oder wird gekürzt. beides zerreißt das raster. der ausweg ist,
	   von vornherein die größe zu nehmen, bei der auch das längste wort passt:
	   „kleine straße" wird in versalien zu KLEINE STRASSE, das ß zu SS, und
	   das ist die längste beschriftung des blocks. */
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ink) 80%, transparent);
	justify-content: flex-start;
	padding-left: 16px;
	text-align: left;
	/* eine zeile, notfalls gekürzt. in versalien ist „kleine straße" ein
	   gutes stück länger als gemischt — das ß wird zu SS —, und zwei zeilen
	   im block reißen das raster auf. die app macht dasselbe mit
	   `lineLimit(1)`. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	/* die zeilenhöhe trägt die schrift mittig — die zelle ist ein block, kein
	   flex mehr, und nur so bleibt der text in der mitte. sie muss darum genau
	   die zeilenhöhe des blocks sein, und die zelle darf oben und unten kein
	   polster haben: polster und zeilenhöhe addieren sich, und die zelle wurde
	   damit 62 statt 44 punkte hoch. da alle zellen einer zeile im raster auf
	   dieselbe höhe wachsen, zog die beschriftung den ganzen block auseinander;
	   die kopfleiste und die spielerleiste darüber blieben, wie sie waren. */
	padding-top: 0;
	padding-bottom: 0;
	line-height: 44px;
}

.board__cell--label-small {
	font-size: 13px;
}

.board__cell--header {
	min-height: 46px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* zwischen den summenzeilen liegt keine linie mehr: sie stehen zu dritt
   beieinander, und drei striche auf engem raum machen aus einer gruppe eine
   liste. sie wechseln stattdessen wie der block darüber. */
.board__cell--summary {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	background: var(--summe);
}

.board__cell--summary.board__cell--alt-z            { background: var(--summe-z); }
.board__cell--summary.board__cell--alt-s            { background: var(--summe-s); }
.board__cell--summary.board__cell--alt-z.board__cell--alt-s { background: var(--summe-zs); }

/* die summe einen schnitt kräftiger: seit die zeilenbeschriftung auf
   dieselbe größe heruntergegangen ist, trennt die beiden nur noch gewicht
   und tinte, und ein einziger schnitt unterschied war dafür zu wenig. */
.board__cell--summary.board__cell--label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

/* ── Bonus Pill ──────────────────────────────────────────── */
.bonus-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	padding: 6px 7px;
	border-radius: 999px;
	letter-spacing: 0.01em;
	opacity: 0.75;
}

.bonus-pill--ok,
.bonus-pill--behind {
	background: rgba(0,0,0,0.06);
	color:       var(--text-muted);
}

@media (prefers-color-scheme: dark) {
	.bonus-pill--ok,
	.bonus-pill--behind {
		background: rgba(255,255,255,0.07);
		color:       var(--text-muted);
	}
}

.board__cell--summary.board__cell--winner,
.board__cell--winner {
	background: var(--amber-fill);
	color: var(--amber-text);
}

.board__cell--winner.board__cell--alt-z {
	background: var(--amber-fill-z);
}

.board__cell--clickable {
	appearance: none;
	border: 0;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.board__cell--clickable:active {
	background: var(--active-bg);
}

/* der ganze rand, nicht nur breite und farbe.

   die anfassbare zelle ist ein `button` und trägt `border: 0`; damit steht
   ihr `border-style` auf `none`, und eine linie, die nur breite und farbe
   setzt, wird nicht gezeichnet. sichtbar war die abschnittsgrenze deshalb
   nur über der beschriftungsspalte — die ist ein `div` und hatte den stil
   noch. */
.board__cell--clickable.board__cell--thick-top {
	border-top: 1px solid var(--line);
}

.board__cell--empty {
	color: var(--line);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
}

.board__head {
	display: grid;
	/* 124 statt 110: in versalien braucht dieselbe beschriftung mehr platz
	   als gemischt gesetzt. */
	grid-template-columns: minmax(124px, 1.45fr) repeat(var(--player-count), minmax(0, 1fr));
	position: sticky;
	top: env(safe-area-inset-top);
	z-index: 20;
	background: var(--zeile);
}

/* Safe-Area über der sticky Spielerleiste mit bg abdecken (Statusbar-Zone) —
   nur wenn die Leiste tatsächlich klebt (Topbar weggescrollt), sonst
   übermalt sie in der Webapp die Meta-Zeile darüber */
.board__head::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 0;
	background: var(--bg);
}

body.topbar-hidden .board__head::before {
	height: env(safe-area-inset-top);
}

.board__head .board__cell {
	min-height: 46px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: none;
	/* keine eigene fläche: der kopf zählt beim spaltenwechsel mit, sonst
	   führe der streifen einer spalte erst unter ihrem namen los. hier stand
	   `var(--bg)` und übersteuerte ihn. */
}

.board__head .board__cell--firstcol {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-muted);
	/* die kopfzeile ist zwei punkte höher als eine zeile des blocks; die
	   zeilenhöhe zieht mit, sonst säße das logo einen hauch zu hoch. */
	line-height: 46px;
}

.board__head .board__head .board__cell--winner {
	background: var(--amber-fill);
	color: var(--amber-text);
}

/* ─── Wer fängt an? ────────────────────────────────────── */

/* der würfel neben + und −  */
.board__icon--losen svg {
	display: block;
}

/* das aufleuchten während der auslosung.
   die kopfzellen haben eine eigene, speziellere hintergrundregel -
   deshalb steht auch diese unter .board__head und dahinter.
   ohne übergang: die schritte sind zu kurz, um eine überblendung zu
   ende zu bringen, die farbe käme sonst nie an. */
.board__head .board__cell--gelost {
	background: var(--amber-border);
	transition: none;
}

/* die kopfzelle des ausgelosten - und dessen, der dran ist: name oben,
   hinweis darunter, und die fläche der gewinnerspalte darunter. das wort
   allein war neben dem karo der spalten zu leise: die abgesetzte erste
   spalte las sich als hervorhebung, und das wort daneben ging unter. */
.board__head .board__cell--anfaenger {
	flex-direction: column;
	gap: 2px;
	padding-top: 6px;
	padding-bottom: 6px;
	background: var(--amber-fill);
}

.board__anfaenger {
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--amber-text);
}

.board__header-name {
	width: calc(100% / 0.82);
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--ink);
	text-align: center;
	padding: 0;
	margin: 0;
	outline: none;
	border-radius: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	/* versalien wie alles andere im block. die regel liegt zwar schon auf
	   `.board__cell--header`, aber ein `input` erbt `text-transform` nicht
	   von seiner zelle — es braucht sie selbst. */
	text-transform: uppercase;
	transform: scale(0.82);
	transform-origin: center center;
}

.board__header-name::placeholder {
	color: var(--ink);
	opacity: 0.35;
}

.board__cell--winner .board__header-name {
	color: var(--amber-text);
}

.board__cell--winner .board__header-name::placeholder {
	color: var(--amber-text);
}

/* ─── Spalten verschieben ──────────────────────────────── */

/* die zelle im kopf ist der griff. was in ihr steht, lässt sich nicht
   markieren - beim ziehen mit der maus würde sonst der name mitgezogen,
   und ein langer druck mit dem finger öffnete auf ios das auswahlmenü. */
.board__head .board__cell--header:not(.board__cell--firstcol) {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* das namensfeld ist nur so breit wie sein name (js.js misst ihn): darüber
   steht der schreib-cursor, im rest der zelle der greif-cursor. ein druck auf
   den namen fängt js.js ab, solange das feld nicht schreibt - er beginnt
   einen zug wie überall in der zelle, und erst ein klick ohne bewegung öffnet
   das feld. */
.board__header-name {
	cursor: text;
	max-width: calc(100% / 0.82);
	user-select: text;
	-webkit-user-select: text;
}

body.spalte-zieht,
body.spalte-zieht .board__cell--header,
body.spalte-zieht .board__header-name {
	cursor: grabbing;
}

/* die spalten, die ausweichen, gleiten. die gezogene folgt dem zeiger ohne
   verzug, schwebt über den anderen und ist etwas durchsichtig - so ist zu
   sehen, dass sie gerade nirgends steht. */
.board__cell--weicht {
	transition: background 0.12s ease, transform 0.15s ease;
}

.board__cell--zieht {
	position: relative;
	z-index: 3;
	opacity: 0.88;
	transition: none;
	/* eine kante links und rechts, weil zwischen den spalten sonst keine
	   linie liegt - ohne sie wäre nicht zu sehen, wo die spalte aufhört. */
	box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
}

/* beim loslassen gleitet sie in ihr fach */
.board__cell--landet {
	transition: transform 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
	.board__cell--weicht,
	.board__cell--landet {
		transition: none;
	}
}

/* ─── SEO Copy ─────────────────────────────────────────── */
.seo-copy {
	margin-top: 40px;
	padding: 20px 12px 0;
	border-top: 1px solid var(--line-subtle);
}

.seo-copy p {
	font-size: 12px;
	line-height: 1.7;
	margin: 0;
	color: rgba(0,0,0,0.5);
}

.seo-copy a {
	color: rgba(0,0,0,0.5);
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	transition: border-color 0.12s ease;
}

.seo-copy a:hover,
.seo-copy a:active {
	border-color: rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
	.seo-copy a {
		color: rgba(255,255,255,0.5);
		border-bottom-color: rgba(255,255,255,0.2);
	}

	.seo-copy a:hover,
	.seo-copy a:active {
		border-color: rgba(255,255,255,0.4);
	}
}

.seo-copy b,
.seo-copy strong {
	font-weight: 600;
	color: rgba(0,0,0,0.7);
}

@media (prefers-color-scheme: dark) {
	.seo-copy p {
		color: rgba(255,255,255,0.45);
	}

	.seo-copy b,
	.seo-copy strong {
		color: rgba(255,255,255,0.65);
	}
}

/* ─── App Footer ───────────────────────────────────────── */
.app-footer {
	margin-top: 16px;
	padding: 0 12px calc(20px + env(safe-area-inset-bottom));
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.app-footer a {
	font-size: 12px;
	color: rgba(0,0,0,0.5);
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	transition: border-color 0.12s ease;
}

.app-footer a:active,
.app-footer a:hover {
	border-color: rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
	.app-footer a {
		color: rgba(255,255,255,0.45);
		border-bottom-color: rgba(255,255,255,0.2);
	}

	.app-footer a:active,
	.app-footer a:hover {
		border-color: rgba(255,255,255,0.4);
	}
}

/* ─── Sprachwahl in der Fußzeile ───────────────────────── */
/* die beiden Seiten heißen verschieden und liegen auf verschiedenen
   Domains - man wechselt nicht eine Sprache, man wechselt die Seite.
   Deshalb eine Liste mit Namen und Flagge statt eines Links daneben.

   Sie klappt nach *oben* auf: die Fußzeile steht am Fuß der Seite, nach
   unten wäre kein Platz. */
.sprachwahl {
	position: relative;
	font-size: 12px;
	line-height: 1;
}

.sprachwahl__jetzt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(0,0,0,0.5);
	cursor: pointer;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	transition: border-color 0.12s ease;
	/* das Dreieck, das ein <summary> von sich aus setzt, ist in jedem
	   Browser ein anderes; hier steht ein eigenes dahinter. */
	list-style: none;
}

.sprachwahl__jetzt::-webkit-details-marker {
	display: none;
}

.sprachwahl__jetzt::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.7;
	transition: transform 0.15s ease;
}

.sprachwahl[open] .sprachwahl__jetzt::after {
	transform: rotate(180deg);
}

.sprachwahl__jetzt:hover,
.sprachwahl[open] .sprachwahl__jetzt {
	border-color: rgba(0,0,0,0.4);
}

.sprachwahl__liste {
	position: absolute;
	bottom: calc(100% + 10px);
	left: -6px;
	z-index: 40;
	margin: 0;
	padding: 6px;
	list-style: none;
	min-width: max-content;
	border-radius: 14px;
	background: var(--sheet-bg);
	border: 0.5px solid var(--sheet-border);
	-webkit-backdrop-filter: blur(56px) saturate(200%) brightness(1.05);
	backdrop-filter: blur(56px) saturate(200%) brightness(1.05);
	box-shadow: var(--sheet-shadow);
}

.sprachwahl__eintrag {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 9px;
	white-space: nowrap;
	color: var(--ink);
	text-decoration: none;
	/* die Fußzeile unterstreicht ihre Links - hier nicht, hier ist die
	   Zeile selbst die Fläche, die man trifft. */
	border-bottom: 0;
}

.app-footer .sprachwahl__eintrag {
	border-bottom: 0;
}

.sprachwahl__eintrag:hover,
.sprachwahl__eintrag:focus-visible {
	background: rgba(0,0,0,0.06);
}

.app-footer .sprachwahl__eintrag:hover,
.app-footer .sprachwahl__eintrag:focus-visible {
	border-color: transparent;
}

/* die Seite, auf der man schon ist: sie steht mit da, aber sie führt
   nirgendwohin. */
.sprachwahl__eintrag--jetzt {
	color: rgba(0,0,0,0.45);
	cursor: default;
}

.flagge {
	display: block;
	flex: none;
	border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
	.sprachwahl__jetzt {
		color: rgba(255,255,255,0.45);
		border-bottom-color: rgba(255,255,255,0.2);
	}

	.sprachwahl__jetzt:hover,
	.sprachwahl[open] .sprachwahl__jetzt {
		border-color: rgba(255,255,255,0.4);
	}

	.sprachwahl__eintrag:hover,
	.sprachwahl__eintrag:focus-visible {
		background: rgba(255,255,255,0.09);
	}

	.sprachwahl__eintrag--jetzt {
		color: rgba(255,255,255,0.4);
	}
}

/* ─── Content Pages ────────────────────────────────────── */
.page-content {
	margin-top: 16px;
	padding-bottom: 16px;
}

.page-content .board {
	padding: 18px 0;
}

/* die überschriften der unterseiten stehen in der schrift des logos.
   sie war bisher dem kopf vorbehalten; auf einer seite, die vom würfeln
   handelt, trägt sie den ton besser als die systemschrift. pixelschrift
   baut breiter und wirkt größer als eine schrift derselben punktgröße,
   deshalb ein paar punkte kleiner als vorher. */
.page-content h1 {
	margin: 0 0 14px;
	font-family: "Silkscreen", monospace;
	font-weight: 400;
	font-size: clamp(21px, 4vw, 27px);
	line-height: 1.15;
	letter-spacing: 0;
}

.page-content h2 .wuerfel,
.page-content h2 svg {
	vertical-align: -2px;
	margin-right: 4px;
}

.page-content .page-content__lead {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-muted);
}

.page-content h2 {
	margin: 26px 0 10px;
	font-size: 18px;
	line-height: 1.2;
}

/* die regelsätze unter einer überschrift: kleiner als h2, damit sie als
   teil des abschnitts lesbar bleiben, und nicht fett wie eine zweite h2 */
.page-content h3 {
	margin: 20px 0 6px;
	font-size: 16px;
	line-height: 1.25;
}

.page-content p,
.page-content li {
	font-size: 15px;
	line-height: 1.6;
}

.page-content p {
	margin: 0 0 5px;
}

.page-content ul,
.page-content ol {
	margin: 0 0 14px 18px;
	padding: 0;
}

.page-content li + li {
	margin-top: 6px;
}

.page-content__links {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.page-content__links p:last-child {
	margin-bottom: 0;
}

.page-content__links a:active {
	opacity: 0.7;
}

.points-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 14px 0 18px;
}

.points-table {
	min-width: 520px;
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.points-table th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
	text-align: center;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* wie im block: die zeilen trennt der wechsel der fläche, keine linie. */
.points-table td {
	padding: 9px 10px;
	text-align: center;
	white-space: nowrap;
	background: var(--zeile);
}

.points-table tbody tr:nth-child(even) td {
	background: var(--zeile-z);
}

.points-table th:first-child,
.points-table td:first-child {
	text-align: left;
}

/* die erste spalte trägt die beschriftung, in der machart des blocks */
.points-table td:first-child {
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.points-table tbody tr:first-child td:first-child { border-top-left-radius: 8px; }
.points-table tbody tr:first-child td:last-child  { border-top-right-radius: 8px; }
.points-table tbody tr:last-child  td:first-child { border-bottom-left-radius: 8px; }
.points-table tbody tr:last-child  td:last-child  { border-bottom-right-radius: 8px; }

/* die zielspalte - drei gleiche pro zahl - ist die gewinnerspalte des
   blocks: eingefärbt statt umrandet, und sie wechselt mit den zeilen. */
.points-table th.points-table__target {
	color: var(--amber-text);
}

.points-table td.points-table__target {
	font-weight: 600;
	color: var(--amber-text);
	background: var(--amber-fill);
}

.points-table tbody tr:nth-child(even) td.points-table__target {
	background: var(--amber-fill-z);
}

.points-table--lower { min-width: 640px; }

.points-table--lower th:nth-child(1),
.points-table--lower td:nth-child(1),
.points-table--lower th:nth-child(2),
.points-table--lower td:nth-child(2),
.points-table--lower th:nth-child(3),
.points-table--lower td:nth-child(3) {
	text-align: left;
}

/* die spalte mit der voraussetzung darf umbrechen. ohne das schob ein
   langer satz - "nochmals 5 gleiche, nachdem die generala schon steht" -
   die würfelspalte aus dem sichtbaren bereich, und die tabelle war nur
   noch seitwärts zu lesen. */
.points-table--lower td:nth-child(2) {
	white-space: normal;
	min-width: 190px;
}


/* ─── Der Kopf eines Spielmodus ────────────────────────── */
/* das symbol sitzt in einer zelle, wie sie der block überall setzt, und
   rechts steht die kennzahl des modus in der schrift des logos - eine
   überschrift, die schon sagt, worum es geht. */
.page-content h2.modus-kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
}

.modus-kopf__symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: var(--zeile-zs);
	flex-shrink: 0;
}

.modus-kopf__symbol svg {
	margin: 0;
	vertical-align: 0;
}

.modus-kopf__name {
	min-width: 0;
}

/* die kennzahl schiebt sich an den rechten rand und trennt sich vom namen
   durch eine linie, die den ganzen freien platz dazwischen einnimmt */
.modus-kopf__marke {
	margin-left: auto;
	padding-left: 12px;
	font-family: "Silkscreen", monospace;
	font-size: 11px;
	font-weight: 400;
	color: var(--text-muted);
	white-space: nowrap;
}

/* ─── Würfel im Fließtext und in den Tabellen ──────────── */
/* dieselbe zeichnung wie das symbol des klassischen modus: ein gerundetes
   quadrat mit punkten. sie steht überall dort, wo ein wurf gemeint ist -
   und macht aus einer zeile "3 gleiche + 2 gleiche" ein bild davon. */
.wuerfel {
	display: inline-block;
	vertical-align: -3px;
	color: var(--ink);
}

/* die würfel, die nicht zur kombination gehören, treten zurück: so ist auf
   einen blick zu sehen, welche vier des wurfs die zwei paare sind. */
.wuerfel--blass {
	color: color-mix(in srgb, var(--ink) 28%, transparent);
}

.wurf {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}

/* in der tabelle steht der beispielwurf in seiner eigenen spalte und darf
   dort nicht mit der beschriftung verwechselt werden */
.points-table td.wurf-zelle,
.rules-table td.wurf-zelle {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ─── Würfelseite ──────────────────────────────────────── */
.dice-page {
	padding: calc(8px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(100svh - 60px);
	border-top: 1px solid var(--ink);
	justify-content: center;
	gap: 0;
}

.dice-page__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	padding: 20px 0 40px;
}

.dice-page__roll {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.dice-page__roll-btn {
	appearance: none;
	border: none;
	border-radius: 999px;
	background: var(--ink);
	color: var(--bg);
	font: inherit;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: 16px 48px;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 0.12s ease, opacity 0.12s ease;
	-webkit-tap-highlight-color: transparent;
}

.dice-page__roll-btn:active {
	transform: scale(0.88);
	opacity: 0.7;
}

@media (hover: hover) {
	.dice-page__roll-btn:hover {
		opacity: 0.85;
	}
}

.dice-page__secondary {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.dice-page__status {
	margin: 0;
}

/* ─── 3D Würfel ────────────────────────────────────────── */
.die-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.die-scene {
	width: 72px;
	height: 72px;
	perspective: 360px;
	perspective-origin: 50% 25%;
}

.die-cube {
	width: 72px;
	height: 72px;
	position: relative;
	transform-style: preserve-3d;
	filter:
		drop-shadow(0 14px 20px rgba(0,0,0,0.20))
		drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}

.die-wrap.is-held .die-cube {
	filter: drop-shadow(0 3px 6px rgba(0,0,0,0.10));
}

.die-face {
	position: absolute;
	width: 72px;
	height: 72px;
	border-radius: 14px;
	box-sizing: border-box;
	backface-visibility: hidden;
	border: 0.5px solid rgba(0,0,0,0.07);
	overflow: hidden;
	background: #ffffff;
}

.die-face--front  { transform: rotateY(  0deg) translateZ(36px); }
.die-face--back   { transform: rotateY(180deg) translateZ(36px); }
.die-face--right  { transform: rotateY( 90deg) translateZ(36px); }
.die-face--left   { transform: rotateY(-90deg) translateZ(36px); }
.die-face--top    { transform: rotateX( 90deg) translateZ(36px); }
.die-face--bottom { transform: rotateX(-90deg) translateZ(36px); }

@media (prefers-color-scheme: dark) {
	.die-face              { border-color: rgba(255,255,255,0.08); }
	.die-face:nth-child(1) { background: #2e2e2e; }
	.die-face:nth-child(2) { background: #1a1a1a; }
	.die-face:nth-child(3) { background: #252525; }
	.die-face:nth-child(4) { background: #181818; }
	.die-face:nth-child(5) { background: #2a2a2a; }
	.die-face:nth-child(6) { background: #1e1e1e; }
}

.die-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #0f0f0f;
	flex-shrink: 0;
	transform: translate(-50%, -50%);
}

@media (prefers-color-scheme: dark) {
	.die-dot { background: #efefef; }
}

.die-shadow {
	width: 56px;
	height: 10px;
	border-radius: 50%;
	background: rgba(0,0,0,0.16);
	filter: blur(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (prefers-color-scheme: dark) {
	.die-shadow { background: rgba(0,0,0,0.45); }
}

.die-wrap.is-held .die-shadow {
	opacity: 0.4;
	transform: scaleX(0.65);
}

.die-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-muted);
	transition: color 0.15s ease;
}

.die-wrap.is-held .die-label {
	color: var(--ink);
}

@keyframes die-roll {
	0%   { transform: var(--rs); }
	20%  { transform: rotateX(var(--rx1)) rotateY(var(--ry1)) rotateZ(var(--rz1)) translateY(-10px); }
	45%  { transform: rotateX(var(--rx2)) rotateY(var(--ry2)) rotateZ(0deg) translateY(-18px); }
	70%  { transform: rotateX(var(--rx3)) rotateY(var(--ry3)) rotateZ(0deg) translateY(-5px); }
	85%  { transform: rotateX(var(--rxf)) rotateY(var(--ryf)) rotateZ(0deg) translateY(3px); }
	93%  { transform: rotateX(var(--rxf)) rotateY(var(--ryf)) rotateZ(0deg) translateY(-2px); }
	100% { transform: rotateX(var(--rxf)) rotateY(var(--ryf)) rotateZ(0deg); }
}

.die-cube.is-rolling {
	animation: die-roll var(--dur, 0.72s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes shadow-roll {
	0%   { transform: scaleX(0.9);  opacity: 0.75; }
	45%  { transform: scaleX(0.45); opacity: 0.25; }
	85%  { transform: scaleX(1.1);  opacity: 0.85; }
	100% { transform: scaleX(1);    opacity: 0.75; }
}

.die-shadow.is-rolling {
	animation: shadow-roll var(--dur, 0.72s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* ─── Shared Sheet Styles ──────────────────────────────── */
/* Confirm, Overlay und Menu Panel nutzen alle dieselben Variablen */
.confirm__sheet,
.overlay__sheet {
	background: var(--sheet-bg);
	border: 0.5px solid var(--sheet-border);
	-webkit-backdrop-filter: blur(56px) saturate(200%) brightness(1.05);
	backdrop-filter: blur(56px) saturate(200%) brightness(1.05);
	box-shadow: var(--sheet-shadow);
}

/* ─── Confirm Dialog ───────────────────────────────────── */
.confirm {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	overflow-y: auto;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	background: rgba(0,0,0,0);
	transition:
		opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1),
		backdrop-filter 0.25s ease,
		-webkit-backdrop-filter 0.25s ease,
		background 0.25s ease,
		visibility 0s linear 0.25s;
}

.confirm.is-visible {
	opacity: 1;
	visibility: visible;
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	background: rgba(0,0,0,0.08);
	transition:
		opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1),
		backdrop-filter 0.25s ease,
		-webkit-backdrop-filter 0.25s ease,
		background 0.25s ease,
		visibility 0s linear 0s;
}

@media (prefers-color-scheme: dark) {
	.confirm.is-visible { background: rgba(0,0,0,0.35); }
}

.confirm__sheet {
	width: min(100%, 380px);
	padding: 20px;
	margin-bottom: max(0px, env(safe-area-inset-bottom));
	border-radius: 18px;
	transform: scale(0.95) translateY(8px);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm.is-visible .confirm__sheet {
	transform: scale(1) translateY(0);
}

.confirm__text {
	font-size: 15px;
	line-height: 1.45;
	margin-bottom: 16px;
}

.confirm__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* ─── Input Overlay ────────────────────────────────────── */
.overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 12px;
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	background: rgba(0,0,0,0);
	transition:
		opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
		backdrop-filter 0.3s ease,
		-webkit-backdrop-filter 0.3s ease,
		background 0.3s ease,
		visibility 0s linear 0.3s;
}

.overlay.is-visible {
	opacity: 1;
	visibility: visible;
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	background: rgba(0,0,0,0.08);
	transition:
		opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
		backdrop-filter 0.3s ease,
		-webkit-backdrop-filter 0.3s ease,
		background 0.3s ease,
		visibility 0s linear 0s;
}

@media (prefers-color-scheme: dark) {
	.overlay.is-visible { background: rgba(0,0,0,0.4); }
}

.overlay__sheet {
	width: min(100%, 520px);
	padding: 14px;
	margin-bottom: max(0px, env(safe-area-inset-bottom));
	border-radius: 20px 20px 12px 12px;
	transform: translateY(24px) scale(0.98);
	transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}

.overlay.is-visible .overlay__sheet {
	transform: translateY(0) scale(1);
}

.overlay__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.overlay__title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 4px;
}

.overlay__subtitle {
	font-size: 13px;
	line-height: 1.3;
	color: var(--text-muted);
}

.overlay__display {
	min-height: 68px;
	border-radius: 12px;
	border: 0.5px solid rgba(0,0,0,0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	font-size: 32px;
	font-weight: 600;
	background: rgba(0,0,0,0.03);
	color: var(--ink);
}

@media (prefers-color-scheme: dark) {
	.overlay__display {
		background: rgba(255,255,255,0.05);
		border-color: rgba(255,255,255,0.06);
	}
}

.overlay__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.overlay__key--wide   { grid-column: span 2; }
.overlay__key--strong { font-weight: 600; }
.overlay__key--full   { grid-column: 1 / -1; }

.overlay__hint {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	color: var(--text-muted);
}

/* ─── Unified Interactive Surfaces ─────────────────────── */
.app__button,
.board__icon {
	border: 0.5px solid rgba(0,0,0,0.09);
	box-shadow: inset 0 1px 0 rgba(255,255,255,1);
	background: rgba(0,0,0,0.04);
	color: var(--ink);
	border-radius: 999px;
	transition: transform 0.12s ease, background 0.12s ease;
}

@media (prefers-color-scheme: dark) {
	.app__button,
	.board__icon {
		border-color: rgba(255,255,255,0.1);
		background: rgba(255,255,255,0.08);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
	}
}

@media (hover: hover) {
	.app__button:hover,
	.board__icon:hover {
		background: rgba(255,255,255,0.9);
	}

	@media (prefers-color-scheme: dark) {
		.app__button:hover,
		.board__icon:hover {
			background: rgba(255,255,255,0.12);
		}
	}
}

.app__button:active,
.board__icon:active {
	transform: scale(0.96);
	background: rgba(0,0,0,0.06);
	box-shadow: none;
}

@media (prefers-color-scheme: dark) {
	.app__button:active,
	.board__icon:active {
		background: rgba(255,255,255,0.05);
	}
}

.overlay__close,
.overlay__key,
.confirm__btn {
	cursor: pointer;
	border: 0.5px solid rgba(0,0,0,0.09);
	box-shadow: inset 0 1px 0 rgba(255,255,255,1);
	background: rgba(0,0,0,0.04);
	color: var(--ink);
	border-radius: 999px;
	transition: transform 0.12s ease, background 0.12s ease;
}

@media (prefers-color-scheme: dark) {
	.overlay__close,
	.overlay__key,
	.confirm__btn {
		border-color: rgba(255,255,255,0.1);
		background: rgba(255,255,255,0.08);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
	}
}

@media (hover: hover) {
	.overlay__close:hover,
	.overlay__key:hover,
	.confirm__btn:hover {
		background: rgba(0,0,0,0.07);
	}

	@media (prefers-color-scheme: dark) {
		.overlay__close:hover,
		.overlay__key:hover,
		.confirm__btn:hover {
			background: rgba(255,255,255,0.13);
		}
	}
}

.overlay__close:active,
.overlay__key:active,
.confirm__btn:active {
	transform: scale(0.96);
	background: rgba(0,0,0,0.1);
	box-shadow: none;
}

.overlay__key {
	border-radius: 14px;
	min-height: 56px;
	padding: 10px;
	font-size: 18px;
}

.confirm__btn {
	padding: 10px 16px;
	font-size: 14px;
}

.overlay__close {
	width: 34px;
	height: 34px;
	font-size: 18px;
	line-height: 1;
	padding: 0;
}

.confirm__btn--primary,
.overlay__key--ok {
	font-weight: 600;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (prefers-color-scheme: dark) {
	.confirm__btn--primary,
	.overlay__key--ok {
		background: rgba(255,255,255,0.88);
		color: #000;
	}
}

.confirm__btn--primary:active,
.overlay__key--ok:active {
	background: rgba(0,0,0,0.45);
}

@media (prefers-color-scheme: dark) {
	.confirm__btn--primary:active,
	.overlay__key--ok:active {
		background: rgba(255,255,255,0.7);
	}
}

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 430px) {

	.app {
		padding-left: 10px;
		padding-right: 10px;
	}

	.seo-copy {
		padding-left: 8px;
		padding-right: 8px;
	}

	.app-footer {
		padding-left: 8px;
		padding-right: 8px;
	}

	.app__topbar {
		margin-bottom: 10px;
		gap: 8px;
	}

	.app__title {
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 44vw;
	}

	.app__subtitle {
		display: none;
	}

	.app__button {
		font-size: 14px;
		padding: 9px 12px;
	}

	.board__icon {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}

	.board__meta {
		padding: 8px 10px;
	}

	.board__cell {
		min-height: 42px;
		padding: 7px 4px;
		font-size: 14px;
	}

	/* die beschriftung bleibt auch hier klein. sie stand auf vierzehn, so
	   lange sie gemischt gesetzt war — in versalien ist dieselbe zeile
	   länger, und ausgerechnet auf dem schmalsten schirm wäre sie damit
	   sicher gekürzt worden. */
	.board__cell--label {
		font-size: 11px;
		padding-left: 12px;
		/* so hoch wie `.board__cell` hier: 42 statt 44. und das polster oben
		   und unten noch einmal auf null: die regel für `.board__cell` ein
		   stück weiter oben setzt es mit der kurzschreibweise neu, und sie
		   steht später in der datei als die grundregel der beschriftung —
		   bei gleicher spezifität gewinnt sie. ohne diese zeilen kämen unter
		   430 punkten die sieben punkte zurück, und die zeile spränge auf 56. */
		padding-top: 0;
		padding-bottom: 0;
		line-height: 42px;
	}

	.board__cell--label-small {
		font-size: 11px;
	}

	.board__cell--summary {
		font-size: 14px;
	}

	.board__cell--summary.board__cell--label {
		font-size: 11px;
	}

	.board__cell--header {
		font-size: 11px;
	}

	.board__header-name {
		font-size: 16px;
	}

	.overlay__sheet {
		padding: 12px;
	}

	.overlay__display {
		min-height: 60px;
		font-size: 28px;
	}

	.overlay__key {
		min-height: 52px;
		font-size: 17px;
	}

	/* Overlay-Aktionsbuttons: leeren 2/3, abbrechen 1/3 */
	.overlay__key--wide {
		grid-column: span 2;
	}

	/* Nur Aktionsbuttons (leeren, streichen via --wide) kleinere Schrift */
	.overlay__key--wide:not(.overlay__key--ok) {
		font-size: 14px;
		min-height: 46px;
	}

	.page-content h1 {
		font-size: 24px;
	}

	.die-scene,
	.die-cube,
	.die-face {
		width: 64px;
		height: 64px;
	}

	.die-face--front  { transform: rotateY(  0deg) translateZ(32px); }
	.die-face--back   { transform: rotateY(180deg) translateZ(32px); }
	.die-face--right  { transform: rotateY( 90deg) translateZ(32px); }
	.die-face--left   { transform: rotateY(-90deg) translateZ(32px); }
	.die-face--top    { transform: rotateX( 90deg) translateZ(32px); }
	.die-face--bottom { transform: rotateX(-90deg) translateZ(32px); }
}

@media (min-width: 921px) {
	.app {
		padding-top: 24px;
	}
}

/* ─── PWA Standalone ───────────────────────────────────── */
@media (display-mode: standalone) {
	/* Statusbar-Bereich: Topbar scrollt mit, aber braucht oben Safe-Area-Platz */
	.app {
		padding-top: calc(env(safe-area-inset-top) + 12px);
	}
}

/* ─── Logo in der Spielerleiste (bei gescrollter Topbar) ── */
.board__head-logo {
	font-family: 'Silkscreen', monospace;
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--ink);
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 100%;
}

body.topbar-hidden .board__head-logo {
	opacity: 1;
	pointer-events: auto;
}

/* ─── Regelseite ───────────────────────────────────────── */
.rules-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 14px 0 24px;
}

.rules-card {
	background: rgba(0,0,0,0.04);
	border-radius: 12px;
	padding: 16px;
	border: 0.5px solid rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: dark) {
	.rules-card {
		background: rgba(255,255,255,0.04);
		border-color: rgba(255,255,255,0.08);
	}
}

.rules-card__number {
	font-family: "Silkscreen", monospace;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 6px;
	letter-spacing: 0;
}

.rules-card__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.rules-card__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

/* ein beispielwurf am fuß der karte, abgesetzt wie die zeile unter einer
   überschrift - er sagt in einem bild, worum es in dem regelsatz geht */
.rules-card__wurf {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--line-subtle);
}

.rules-card__wurf-text {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.rules-table {
	width: 100%;
	/* vier spalten seit dem beispielwurf: kategorie, bedingung, punkte, würfel */
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
	margin: 14px 0 24px;
}

.rules-table--simple {
	min-width: 0;
}

.rules-table th {
	text-align: left;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--line);
}

/* keine linie zwischen den zeilen, sondern der wechsel der fläche - so
   trennt der block seine zeilen, und dieselben vier stufen stehen dafür
   in den design tokens bereit. */
.rules-table td {
	padding: 11px 12px;
	vertical-align: middle;
	line-height: 1.45;
	background: var(--zeile);
}

.rules-table tbody tr:nth-child(even) td {
	background: var(--zeile-z);
}

.rules-table tbody tr:first-child td:first-child  { border-top-left-radius: 8px; }
.rules-table tbody tr:first-child td:last-child   { border-top-right-radius: 8px; }
.rules-table tbody tr:last-child td:first-child   { border-bottom-left-radius: 8px; }
.rules-table tbody tr:last-child td:last-child    { border-bottom-right-radius: 8px; }

/* die erste spalte ist die beschriftung - dieselbe machart wie die
   beschriftungsspalte des blocks: versalien, klein, leicht gesperrt. */
.rules-table td:first-child {
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ink) 80%, transparent);
	white-space: nowrap;
	padding-right: 20px;
}

.rules-table td:nth-child(2) {
	color: var(--text-muted);
}

.rules-table .rules-table__points {
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
}

/* die würfelspalte schließt die zeile ab und braucht den platz nicht */
.rules-table td.wurf-zelle,
.points-table td.wurf-zelle {
	width: 1%;
	white-space: nowrap;
}

/* die punktzahl als kleines schild. sie war eine pille - der block kennt
   keine runden formen, seine zellen sind leicht gerundete quadrate. */
.rules-tag {
	display: inline-block;
	background: var(--summe-zs);
	border-radius: 6px;
	padding: 4px 9px;
	font-family: "Silkscreen", monospace;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
}

.rules-bonus {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--amber-fill);
	border: 0.5px solid var(--amber-border);
	border-radius: 12px;
	padding: 16px;
	margin: 14px 0 24px;
}

.rules-bonus__icon {
	font-size: 28px;
	line-height: 1;
	flex-shrink: 0;
}

.rules-bonus__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--amber-text);
	margin: 0;
}

.rules-bonus__text strong {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

.rules-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 14px 0 24px;
}

.rules-step {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	align-items: flex-start;
}

@media (prefers-color-scheme: dark) {
	.rules-step {
		border-bottom-color: rgba(255,255,255,0.06);
	}
}

.rules-step:last-child {
	border-bottom: none;
}

/* die schrittzahlen waren kreise. der block kennt keine kreise - er ist
   aus zellen gebaut, und eine zelle ist ein leicht gerundetes quadrat. */
.rules-step__num {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--zeile-zs);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Silkscreen", monospace;
	font-size: 12px;
	font-weight: 400;
	flex-shrink: 0;
	margin-top: 1px;
}



.rules-step__text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-muted);
	margin: 0;
	padding-top: 4px;
}

.rules-step__text strong {
	color: var(--ink);
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
}

/* ─── Share Sheet ──────────────────────────────────────── */
.share-sheet__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 20px;
}

.share-sheet__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.share-sheet__title {
	font-size: 16px;
	font-weight: 600;
}

.share-sheet__qr {
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
	/* QR-Code immer auf hellem Hintergrund — besser scannbar */
	background: #ffffff;
	padding: 8px;
}

.share-sheet__qr img,
.share-sheet__qr canvas {
	display: block;
	border-radius: 6px;
}

.share-sheet__code {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-align: center;
	line-height: 1;
}

.share-sheet__hint {
	font-size: 12px;
	color: var(--text-muted);
	text-align: center;
	line-height: 1.5;
	margin-top: -8px;
}

.share-sheet__hint strong {
	font-weight: 600;
	color: var(--ink);
}

/* ─── Shared Reset Dialog ──────────────────────────────── */
.shared-reset__sheet {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.shared-reset__text {
	font-size: 15px;
	line-height: 1.45;
}

.shared-reset__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.shared-reset__btn {
	width: 100%;
	justify-content: center;
	text-align: center;
	padding: 13px 16px;
	border-radius: 12px;
	font-size: 15px;
}

/* ─── Live Dot ─────────────────────────────────────────── */
#share-button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	background: currentColor;
	opacity: 0.35;
	transition: background 0.3s ease, opacity 0.3s ease;
}

.live-dot--active {
	background: #ff3b30;
	opacity: 1;
	animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(255,59,48,0.5); }
	70%  { box-shadow: 0 0 0 5px rgba(255,59,48,0);   }
	100% { box-shadow: 0 0 0 0   rgba(255,59,48,0);   }
}

/* ─── Battle Modus ─────────────────────────────────────── */

/* Pending-Zelle — muss noch versucht werden.
   Sie geht dem Zeilen- und Spaltenwechsel vor: was ein anderer aufgezwungen
   hat, ist eine Aufforderung und keine Auszeichnung. Dafür steht hier das
   `!important` — nicht aus Bequemlichkeit, sondern weil die Regel eine
   Ausnahme *sein* soll. */
.board__cell--pending {
	background: hsl(from var(--bg) calc(h + 180) 60% 90%) !important;
	color:       hsl(from var(--bg) calc(h + 180) 50% 30%) !important;
	font-weight: 700;
}

@media (prefers-color-scheme: dark) {
	.board__cell--pending {
		background: hsl(from var(--bg) calc(h + 180) 40% 18%) !important;
		color:       hsl(from var(--bg) calc(h + 180) 60% 75%) !important;
	}
}

/* Modus-Badge im Board-Meta */
#mode-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	opacity: 0.8;
}

#mode-badge svg {
	flex-shrink: 0;
}

/* ─── Modus-Auswahl ────────────────────────────────────── */
.mode-select-wrap {
	margin-bottom: 14px;
}

/* die überschrift über einer liste - "spielmodus", "regelsatz". im
   dialog stehen zwei listen untereinander, ohne wort dazwischen wüsste
   man nicht, was die zweite fragt. */
.mode-select__titel {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin: 12px 0 6px;
}

.mode-select-wrap > .mode-select__titel:first-child {
	margin-top: 0;
}

/* der regelsatz, zugeklappt: ein kompaktes feld in der optik der
   moduskarte - dieselbe rundung, dieselbe haarlinie - mit dem gewählten
   satz links und einem pfeil rechts. ein tipp ersetzt es durch die
   karte mit allen dreien, die dann stehen bleibt. */
.mode-select__feld {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	border-radius: 12px;
	border: 0.5px solid rgba(0,0,0,0.12);
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.mode-select__feld:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* die zahl der felder vor dem namen, im feld wie in der karte */
.mode-select__zahl {
	display: inline-block;
	min-width: 22px;
	margin-right: 8px;
	color: var(--text-muted);
}

.mode-select__pfeil::before {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--text-muted);
	border-bottom: 1.5px solid var(--text-muted);
	transform: translateY(-2px) rotate(45deg);
}

@media (prefers-color-scheme: dark) {
	.mode-select__feld {
		border-color: rgba(255,255,255,0.12);
	}
}

/* der regelsatz trägt statt eines symbols die zahl seiner felder */
.mode-list__zahl {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Direkte Liste aller Modi */
.mode-list {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	border: 0.5px solid rgba(0,0,0,0.12);
	overflow: hidden;
}

@media (prefers-color-scheme: dark) {
	.mode-list {
		border-color: rgba(255,255,255,0.12);
	}
}

.mode-list__item {
	appearance: none;
	width: 100%;
	display: grid;
	grid-template-columns: 24px 1fr 18px;
	gap: 0 10px;
	align-items: center;
	padding: 11px 12px;
	border: none;
	border-bottom: 0.5px solid rgba(0,0,0,0.08);
	background: transparent;
	cursor: pointer;
	text-align: left;
	transition: background 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {
	.mode-list__item {
		border-bottom-color: rgba(255,255,255,0.08);
	}
}

.mode-list__item:last-child { border-bottom: none; }
.mode-list__item:active { background: rgba(0,0,0,0.08); }

@media (hover: hover) {
	.mode-list__item:hover {
		background: rgba(0,0,0,0.04);
	}

	@media (prefers-color-scheme: dark) {
		.mode-list__item:hover {
			background: rgba(255,255,255,0.06);
		}
	}
}

.mode-list__item--active {
	background: rgba(0,0,0,0.06);
}

@media (prefers-color-scheme: dark) {
	.mode-list__item--active {
		background: rgba(255,255,255,0.08);
	}
}

.mode-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
}

.mode-list__item--active .mode-list__icon { opacity: 1; }

.mode-list__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mode-list__label {
	font-size: 13px;
	font-weight: 600;
	color: #000;
	line-height: 1.2;
}

@media (prefers-color-scheme: dark) {
	.mode-list__label { color: #fff; }
}

.mode-list__desc {
	font-size: 11px;
	line-height: 1.4;
	color: #666;
}

@media (prefers-color-scheme: dark) {
	.mode-list__desc { color: #999; }
}

/* Häkchen für aktiven Modus */
.mode-list__check {
	width: 18px;
	height: 18px;
	justify-self: center;
}

.mode-list__item--active .mode-list__check {
	background: no-repeat center / contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	.mode-list__item--active .mode-list__check {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E");
	}
}

/* Battle: gesperrte Felder */
.board__cell--locked {
	cursor: not-allowed !important;
	pointer-events: none;
	color: rgba(0,0,0,0.15) !important;
	background: var(--paper) !important;
}

@media (prefers-color-scheme: dark) {
	.board__cell--locked {
		color: rgba(255,255,255,0.12) !important;
	}
}

/* Gesperrte Zellen — Pixel-Art Schloss */
.board__cell--locked svg {
	fill: rgba(0,0,0,0.2);
	image-rendering: pixelated;
}

@media (prefers-color-scheme: dark) {
	.board__cell--locked svg {
		fill: rgba(255,255,255,0.18);
	}
}

/* ─── Tooltip System ───────────────────────────────────── */
.has-tip {
	cursor: help;
	text-decoration: underline dotted rgba(0,0,0,0.25);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
	.has-tip {
		text-decoration-color: rgba(255,255,255,0.2);
	}
}

/* Mode-Badge als Tooltip-Trigger */
#mode-badge.has-tip {
	cursor: help;
	border-bottom: none;
}

.tip {
	position: fixed;
	z-index: 100;
	max-width: 260px;
	padding: 8px 11px;
	border-radius: 10px;
	background: #f5f5f5;
	border: 0.5px solid rgba(0,0,0,0.1);
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tip.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.15s ease, visibility 0s linear 0s;
}

@media (prefers-color-scheme: dark) {
	.tip {
		background: #1c1c1e;
		border-color: rgba(255,255,255,0.1);
		box-shadow: 0 4px 16px rgba(0,0,0,0.35);
	}
}

.tip__text {
	font-size: 12px;
	line-height: 1.5;
	color: #555;
}

@media (prefers-color-scheme: dark) {
	.tip__text {
		color: #aaa;
	}
}

.tip__link {
	font-size: 11px;
	color: #888;
	text-decoration: none;
	transition: color 0.12s ease;
}

.tip__link:hover,
.tip__link:active {
	color: #333;
}

@media (prefers-color-scheme: dark) {
	.tip__link {
		color: #777;
	}

	.tip__link:hover,
	.tip__link:active {
		color: #ccc;
	}
}

/* ─── Battle: Verdopplung ──────────────────────────────── */
.board__cell .cell-x2 {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-left: 3px;
	padding: 1px 3px;
	border-radius: 4px;
	background: hsl(from var(--bg) calc(h + 180) 55% 55%);
	color: #fff;
	vertical-align: middle;
	line-height: 1;
}

@media (prefers-color-scheme: dark) {
	.board__cell .cell-x2 {
		background: hsl(from var(--bg) calc(h + 180) 50% 50%);
		color: #fff;
	}
}

.board__cell .cell-pending,
.board__cell .cell-val {
	font-weight: 700;
	vertical-align: middle;
}

/* Verdoppelte Zelle: roh ×2 = ergebnis */
.board__cell .cell-raw {
	font-size: 11px;
	opacity: 0.55;
	vertical-align: middle;
}

.board__cell .cell-eq {
	font-size: 10px;
	opacity: 0.4;
	margin: 0 2px 0 3px;
	vertical-align: middle;
}

.board__cell .cell-val {
	font-size: inherit;
}

/* ─── Darts Modus ──────────────────────────────────────── */
.board__cell--darts-rest {
	flex-direction: column;
	gap: 1px;
	line-height: 1.1;
	/* Reststand-Zeile klebt am unteren Bildschirmrand */
	position: sticky;
	bottom: 0;
	z-index: 15;
	background: var(--bg);
	border-top: 2px solid var(--line);
	/* iOS: eigener Layer, sonst rendert Safari sticky-bottom erst nach dem ersten Scroll */
	transform: translateZ(0);
	will-change: transform;
}

.board__cell--darts-rest-label {
	flex-direction: row;
	align-items: center;
}

.darts-rest__main {
	font-size: 17px;
	font-weight: 700;
}

.darts-rest__earned {
	font-size: 9px;
	font-weight: 400;
	opacity: 0.5;
	letter-spacing: 0.01em;
}

/* Mobile: Box überdeckt den Bereich unter der sticky Rest-Zeile (Safe-Area / Safari-Leiste) */
.darts-bottom-cover {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(env(safe-area-inset-bottom) + 40px);
	background: var(--bg);
	z-index: 14;
	pointer-events: none;
	display: none;
	transform: translateZ(0);
}

body.mode-darts .darts-bottom-cover {
	display: block;
}

/* PWA (Homescreen): keine Browser-Leiste — Box nur in Safe-Area-Höhe */
@media (display-mode: standalone) {
	.darts-bottom-cover {
		height: env(safe-area-inset-bottom);
	}
}

/* Bust-Hinweis im Overlay */
.overlay__hint--bust {
	color: #ff3b30 !important;
	font-weight: 600;
}

.overlay__display--bust {
	animation: bust-flash 0.6s ease;
}

@keyframes bust-flash {
	0%, 100% { background: rgba(0,0,0,0.03); }
	30%      { background: rgba(255,59,48,0.18); }
}

@media (prefers-color-scheme: dark) {
	@keyframes bust-flash {
		0%, 100% { background: rgba(255,255,255,0.05); }
		30%      { background: rgba(255,59,48,0.28); }
	}
}