/* ============================================================
   Sudoku (spielid 25)
   ============================================================
   Mobile first. Das Gitter ist ein CSS-Grid aus 81 Knöpfen und skaliert über
   eine einzige Variable (--sd-feld): Alles darin — Schriftgrößen, Notizen,
   Linienstärken — hängt daran, damit das Brett auf jedem Bildschirm stimmig
   bleibt, ohne dass irgendwo eine feste Pixelzahl klemmt.

   Barrierefreiheit: Zustände werden nie allein über Farbe transportiert.
   Fehler bekommen zusätzlich eine Umrandung und eine Schräg-Schraffur,
   Vorgaben eine andere Schriftstärke, ausgewählte Felder einen Rahmen.
   ============================================================ */

.sd-wrap {
	--sd-feld: clamp(30px, 10.2vw, 58px);
	--sd-linie: #C9BFA0;
	--sd-linie-stark: #6E6448;
	--sd-zelle: #FFFDF6;
	--sd-zelle-vorgabe: #F2EBD6;
	--sd-mark: #FFF3B8;
	--sd-mark-stark: #FFE066;
	--sd-mark-einheit: #FBF7E4;
	--sd-fehler: #FFDAD6;

	max-width: calc(var(--sd-feld) * 9 + 40px);
	margin: 0 auto;
}

/* ---------- Kopfzeile mit Punkten, Zeit, Fehlern, Stufe ---------- */

.sd-hud {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .4rem;
	margin-bottom: .8rem;
}

.sd-hud-box {
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: .45rem .3rem;
	text-align: center;
	min-width: 0;
}

.sd-hud-label {
	display: block;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-soft);
}

.sd-hud-value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1rem, 4.2vw, 1.45rem);
	color: var(--jungle-dark);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sd-hud-value.sd-warn { color: var(--danger); }

/* Punktezuwachs kurz aufleuchten lassen */
.sd-hud-value.sd-puls {
	animation: sdPuls .45s ease-out;
}
@keyframes sdPuls {
	0%   { transform: scale(1);    color: var(--jungle-dark); }
	35%  { transform: scale(1.22); color: var(--banana-deep); }
	100% { transform: scale(1);    color: var(--jungle-dark); }
}

/* ---------- Bühne: Brett + Overlay ---------- */

.sd-buehne { position: relative; }

.sd-brett {
	display: grid;
	grid-template-columns: repeat(9, var(--sd-feld));
	grid-template-rows: repeat(9, var(--sd-feld));
	gap: 0;
	width: max-content;
	margin: 0 auto;
	background: var(--sd-linie-stark);
	padding: 3px;
	border-radius: 14px;
	box-shadow: var(--shadow-lift);
	touch-action: manipulation;
}

.sd-zelle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: var(--sd-feld);
	height: var(--sd-feld);
	background: var(--sd-zelle);
	font-family: var(--font-display);
	font-size: calc(var(--sd-feld) * .58);
	color: var(--jungle-dark);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	/* dünne Innenlinien */
	border-right: 1px solid var(--sd-linie);
	border-bottom: 1px solid var(--sd-linie);
}

/* kräftige Blockgrenzen: nach jeder dritten Spalte/Zeile */
.sd-zelle[data-spalte="2"],
.sd-zelle[data-spalte="5"] { border-right: 3px solid var(--sd-linie-stark); }
.sd-zelle[data-spalte="8"] { border-right: none; }
.sd-zelle[data-zeile="2"],
.sd-zelle[data-zeile="5"]  { border-bottom: 3px solid var(--sd-linie-stark); }
.sd-zelle[data-zeile="8"]  { border-bottom: none; }

/* Ecken abrunden, damit das Brett nicht über den Rahmen läuft */
.sd-zelle[data-i="0"]  { border-top-left-radius: 11px; }
.sd-zelle[data-i="8"]  { border-top-right-radius: 11px; }
.sd-zelle[data-i="72"] { border-bottom-left-radius: 11px; }
.sd-zelle[data-i="80"] { border-bottom-right-radius: 11px; }

/* --- Zustände --- */

.sd-zelle.sd-vorgabe {
	background: var(--sd-zelle-vorgabe);
	font-weight: 700;
	color: var(--ink);
	cursor: default;
}

/* selbst gesetzte, richtige Ziffern in Dschungelgrün */
.sd-zelle.sd-eigen { color: var(--jungle); }

/* per Tipp aufgedeckt: erkennbar, aber nicht wie ein Fehler */
.sd-zelle.sd-tipp {
	color: var(--sky-deep);
	text-shadow: 0 0 1px rgba(0, 0, 0, .18);
}

/* Einheit (Zeile/Spalte/Block) der aktiven Zelle */
.sd-zelle.sd-einheit { background: var(--sd-mark-einheit); }

/* alle Felder mit derselben Ziffer */
.sd-zelle.sd-gleich {
	background: var(--sd-mark);
	font-weight: 700;
}

.sd-zelle.sd-aktiv {
	background: var(--sd-mark-stark);
	box-shadow: inset 0 0 0 3px var(--banana-deep);
	z-index: 2;
}

/* falsche Eingabe: Farbe UND Schraffur UND Rahmen — nie Farbe allein */
.sd-zelle.sd-falsch {
	color: var(--danger);
	background:
		repeating-linear-gradient(135deg,
			var(--sd-fehler) 0 6px,
			#FFC9C4 6px 12px);
	box-shadow: inset 0 0 0 2px var(--danger);
	animation: sdWackeln .3s ease-in-out;
}
@keyframes sdWackeln {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

/* frisch gesetzte richtige Ziffer kurz aufblühen lassen */
.sd-zelle.sd-treffer { animation: sdTreffer .4s ease-out; }
@keyframes sdTreffer {
	0%   { transform: scale(.55); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/* Einheit gerade vervollständigt */
.sd-zelle.sd-welle { animation: sdWelle .7s ease-out; }
@keyframes sdWelle {
	0%   { background: var(--banana); }
	100% { background: var(--sd-zelle); }
}

/* --- Notizen (Kandidaten) --- */

.sd-notizen {
	position: absolute;
	inset: 2px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	font-family: var(--font-body);
	font-size: calc(var(--sd-feld) * .26);
	line-height: 1;
	color: var(--ink-soft);
	pointer-events: none;
}

.sd-notizen span {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sd-notizen span.sd-notiz-hell { color: var(--banana-deep); font-weight: 700; }

/* --- Punkteflug über der Zelle --- */

.sd-flug {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--jungle);
	text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 8px rgba(255, 255, 255, .8);
	pointer-events: none;
	animation: sdFlug 1s ease-out forwards;
	z-index: 5;
}
.sd-flug.sd-flug-minus { color: var(--danger); }
@keyframes sdFlug {
	0%   { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
	20%  { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
	100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}

/* ---------- Overlay (Stufenwahl, Ergebnis) ---------- */

.sd-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(43, 43, 32, .55);
	backdrop-filter: blur(3px);
	border-radius: 14px;
	padding: .6rem;
	z-index: 10;
}

.sd-overlay[hidden] { display: none; }   /* eigene display-Regel braucht diese Gegenregel */

.sd-overlay-inhalt {
	background: var(--white);
	border-radius: var(--radius-big);
	box-shadow: var(--shadow-lift);
	padding: 1.1rem 1rem;
	text-align: center;
	max-width: 100%;
	max-height: 100%;
	overflow-y: auto;
}

.sd-overlay-titel {
	font-family: var(--font-display);
	color: var(--jungle-dark);
	font-size: clamp(1.15rem, 4.5vw, 1.6rem);
	margin: 0 0 .3rem;
}

.sd-overlay-text {
	margin: 0 0 .8rem;
	font-size: .9rem;
	color: var(--ink-soft);
}

.sd-stufen {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
}

.sd-stufe {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	padding: .6rem .5rem;
	border-radius: var(--radius);
	background: linear-gradient(160deg, var(--banana) 0%, var(--banana-dark) 100%);
	box-shadow: 0 3px 0 var(--banana-deep);
	text-align: center;
	transition: transform .12s ease, box-shadow .12s ease;
}
.sd-stufe:hover, .sd-stufe:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 var(--banana-deep);
}
.sd-stufe:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--banana-deep); }

.sd-stufe-name {
	display: block;
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--ink);
}
.sd-stufe-info {
	display: block;
	font-size: .72rem;
	color: rgba(43, 43, 32, .7);
}

/* Ergebnis-Zahlen im Overlay */
.sd-ergebnis-zahl {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 8vw, 2.8rem);
	color: var(--banana-deep);
	line-height: 1.1;
}
.sd-ergebnis-liste {
	list-style: none;
	margin: .6rem 0;
	padding: 0;
	font-size: .88rem;
	text-align: left;
	display: inline-block;
}
.sd-ergebnis-liste li { margin: .15rem 0; }
.sd-ergebnis-liste b { color: var(--jungle-dark); }

/* ---------- Video-Overlay (Extra-Tipp) ---------- */

.sd-video-status {
	min-height: 1.4em;
	margin: .5rem 0 .8rem;
	font-weight: 600;
	color: var(--jungle-dark);
}

.sd-video-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.sd-video-knoepfe .btn { margin: 0; }
.sd-video-knoepfe .btn[hidden] { display: none; }

/* ---------- Ziffernleiste ---------- */

.sd-ziffern {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: .25rem;
	margin: .8rem auto 0;
	max-width: calc(var(--sd-feld) * 9 + 16px);
}

.sd-ziffer {
	all: unset;
	box-sizing: border-box;
	/* Ohne min-width:0 schrumpft ein Grid-Element nie unter seine
	   Inhaltsbreite — dadurch lief die Ziffernleiste auf schmalen Handys
	   über den rechten Rand hinaus (gemessen bei 375 px: bis x=391). */
	min-width: 0;
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	min-height: 46px;
	border-radius: 12px;
	background: var(--white);
	box-shadow: 0 2px 0 rgba(43, 43, 32, .18);
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 5vw, 1.6rem);
	color: var(--jungle-dark);
	-webkit-tap-highlight-color: transparent;
	transition: transform .1s ease, background .15s ease;
}
.sd-ziffer:hover:not(:disabled), .sd-ziffer:focus-visible { background: var(--sd-mark); }
.sd-ziffer:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

.sd-ziffer.sd-ziffer-aktiv {
	background: var(--banana);
	box-shadow: 0 2px 0 var(--banana-deep);
}

/* Restzähler: wie oft die Ziffer noch fehlt */
.sd-ziffer-rest {
	font-family: var(--font-body);
	font-size: .6rem;
	color: var(--ink-soft);
	line-height: 1;
	margin-top: 1px;
}

/* fertige Ziffer: bleibt sichtbar, aber deutlich abgesetzt */
.sd-ziffer:disabled {
	cursor: default;
	opacity: .38;
	box-shadow: none;
	background: var(--sd-zelle-vorgabe);
}
.sd-ziffer:disabled .sd-ziffer-rest::after { content: ' ✓'; }

/* ---------- Aktionsknöpfe ---------- */

.sd-aktionen {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .3rem;
	margin: .7rem auto 0;
	max-width: calc(var(--sd-feld) * 9 + 16px);
}

.sd-akt {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: .45rem .2rem;
	border-radius: 12px;
	background: var(--white);
	box-shadow: 0 2px 0 rgba(43, 43, 32, .14);
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform .1s ease, background .15s ease;
}
.sd-akt:hover, .sd-akt:focus-visible { background: var(--sand); }
.sd-akt:active { transform: translateY(2px); box-shadow: none; }

/* Gesperrt — z. B. der Tipp, solange kein leeres Feld gewählt ist.
   Bewusst nicht nur blass: Der Knopf bleibt fokussierbar-erkennbar und der
   Titel erklärt, was fehlt. */
.sd-akt:disabled {
	opacity: .42;
	cursor: not-allowed;
	box-shadow: none;
}
.sd-akt:disabled:hover { background: var(--white); }
.sd-akt:disabled:active { transform: none; }
.sd-akt[aria-pressed="true"] {
	background: var(--jungle);
	box-shadow: 0 2px 0 var(--jungle-dark);
}
.sd-akt[aria-pressed="true"] .sd-akt-text { color: var(--white); }

.sd-akt-icon { font-size: 1.15rem; line-height: 1.1; }
.sd-akt-text { font-size: .66rem; color: var(--ink-soft); }

.sd-status {
	text-align: center;
	margin: .8rem 0 0;
	min-height: 1.5em;
	font-size: .92rem;
	color: var(--ink-soft);
}
.sd-status.sd-status-gut  { color: var(--jungle); font-weight: 600; }
.sd-status.sd-status-warn { color: var(--danger); font-weight: 600; }

/* ---------- Erklärtext ---------- */

.sd-regeln {
	max-width: 760px;
	margin: 2.2rem auto 0;
	background: var(--white);
	border-radius: var(--radius-big);
	box-shadow: var(--shadow);
	padding: 1.4rem 1.3rem;
}
.sd-regeln h3 { margin-top: 1.4rem; color: var(--jungle); }
.sd-regeln h4 {
	margin: 1rem 0 .2rem;
	font-family: var(--font-display);
	font-size: 1.02rem;
	color: var(--jungle-dark);
}
.sd-regeln ul { padding-left: 1.2rem; }
.sd-regeln li { margin: .3rem 0; }

/* ---------- Größere Bildschirme ---------- */

@media (min-width: 620px) {
	.sd-wrap { --sd-feld: 58px; }
	.sd-hud { gap: .6rem; }
	.sd-akt-text { font-size: .74rem; }
	.sd-ziffern { gap: .4rem; }
}

/* Auf dem Handy zählt jeder Pixel über dem Brett: Gemessen lagen Titel und
   Untertitel bei 172 px, wodurch die Ziffernleiste unter die Falz rutschte.
   Der Eingriff ist über :has() auf die Sudoku-Seite begrenzt — greift ein
   Browser das nicht, bleibt einfach alles beim Alten. */
@media (max-width: 620px) {
	.section:has(.sd-wrap) .section-head { margin-bottom: 1rem; }
	.section:has(.sd-wrap) .section-head h1 { font-size: 1.55rem; margin-bottom: .15em; }
	.section:has(.sd-wrap) .section-head p { font-size: .88rem; line-height: 1.35; margin: 0; }

	/* etwas größere Tippziele für den Daumen */
	.sd-ziffer { min-height: 52px; }
}

/* Flache Laptop-Bildschirme: Nicht die Breite ist hier der Engpass, sondern die
   HÖHE. Bei 1280×800 lag die Ziffernleiste gemessen bei y=857 — man hätte zum
   Tippen jedes Mal scrollen müssen. Kleineres Brett plus kompakterer Kopf
   bringen Gitter, Ziffern und Knöpfe gemeinsam ins Bild. */
@media (min-width: 621px) and (max-height: 900px) {
	.sd-wrap { --sd-feld: 52px; }
	.section:has(.sd-wrap) .section-head { margin-bottom: .8rem; }
	.section:has(.sd-wrap) .section-head h1 { font-size: 1.9rem; margin-bottom: .1em; }
	.section:has(.sd-wrap) .section-head p { margin: 0; font-size: .95rem; }
	.sd-hud { margin-bottom: .5rem; }
	.sd-ziffern { margin-top: .5rem; }
	.sd-aktionen { margin-top: .45rem; }
}

/* 1280×800 ist die knappste verbreitete Laptop-Größe: Mit 48 px endeten die
   Aktionsknöpfe nachgemessen 14 px unter der Falz, mit 46 px passt alles. */
@media (min-width: 621px) and (max-height: 820px) {
	.sd-wrap { --sd-feld: 46px; }
}

/* Bei sehr flachen Fenstern (Handy quer) das Brett an der Höhe ausrichten,
   damit Gitter und Ziffernleiste zusammen sichtbar bleiben. */
@media (max-height: 560px) and (orientation: landscape) {
	.sd-wrap { --sd-feld: min(6.2vh, 44px); }
	.sd-aktionen, .sd-ziffern { max-width: calc(var(--sd-feld) * 9 + 60px); }
}

@media (prefers-reduced-motion: reduce) {
	.sd-zelle.sd-treffer,
	.sd-zelle.sd-falsch,
	.sd-zelle.sd-welle,
	.sd-hud-value.sd-puls { animation: none; }
	.sd-flug { animation-duration: .01s; }
}

/* ============================================================
   App-Modus (installiert auf dem Homebildschirm)
   ============================================================
   Ziel: Es wird NICHT gescrollt und nichts verrutscht. Die Seite ist genau so
   hoch wie das sichtbare Fenster, das Brett bekommt den Platz, der übrig
   bleibt, und die Bedienleisten sitzen fest.

   --sd-vh setzt sudoku.js aus window.innerHeight (siehe dort): dvh allein
   genügt auf iOS nicht, weil die Leisten dort beim Scrollen ein- und
   ausblenden — und genau dieses Wackeln soll weg.
   ============================================================ */

/* Sicherheitsnetz gegen eingefügte Werbung.
   In der App wird AdSense gar nicht erst geladen (siehe inc/header.php) —
   sollte über einen anderen Weg doch etwas in die Seite geraten, darf es das
   Layout auf keinen Fall verschieben. Der User hatte genau das gemeldet: Eine
   Auto-Anzeige im unteren Drittel schob das Spielfeld oben aus dem Bild. */
body.app-modus ins.adsbygoogle,
body.app-modus .ad-wrap,
body.app-modus .ad-sidebar,
body.app-modus .ad-banner,
body.app-modus iframe[id^="aswift"],
body.app-modus iframe[id^="google_ads"],
body.app-modus .cookie-consent {
	display: none !important;
}

body.app-modus {
	overscroll-behavior: none;          /* kein Ziehen-zum-Neuladen */
	touch-action: manipulation;         /* kein Doppeltipp-Zoom */
	overflow: hidden;
	background: var(--jungle-dark, #1B5E3C);
}

body.app-modus .section {
	max-width: none;
	margin: 0;
	padding: 0;
	height: var(--sd-vh, 100dvh);
	display: flex;
	flex-direction: column;
	/* Notch oben, Home-Balken unten */
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	box-sizing: border-box;
}

body.app-modus .sd-wrap {
	flex: 1;
	min-height: 0;                       /* sonst wächst das Brett aus dem Bild */
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: .4rem .5rem .6rem;
}

body.app-modus .sd-buehne {
	flex: 1;
	min-height: 0;
	display: grid;
	place-items: center;
}

/* Das Brett muss quadratisch bleiben und in BEIDE Richtungen passen. Deshalb
   wird hier die Zellgröße gesetzt und nicht die Breite des Bretts: Das Gitter
   ist ein Grid aus 9 festen Spalten — gibt man dem Container nur eine Breite,
   bleiben die Zellen klein und das Brett wird rechteckig (gemessen: 360 breit,
   350 hoch). Maßgeblich ist die knappere der beiden Richtungen. */
body.app-modus .sd-wrap {
	--sd-feld: min(
		calc((100vw - 1.6rem) / 9),
		calc((var(--sd-vh, 100dvh) - 15.5rem) / 9),
		58px
	);
}

body.app-modus .sd-brett { max-width: 100%; }

/* Eigene App-Leiste statt der Website-Navigation */
.sd-appbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .45rem .7rem;
	background: var(--jungle-dark, #1B5E3C);
	color: var(--white, #fff);
	flex: none;
}

.sd-appbar-titel { font-weight: 800; letter-spacing: .01em; }

.sd-appbar-rechts { display: flex; align-items: center; gap: .35rem; }

.sd-appbar-konto {
	font-size: .82rem;
	opacity: .9;
	max-width: 7rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sd-appbar-btn {
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	background: rgba(255, 255, 255, .14);
	color: inherit;
	border: 0;
	border-radius: 999px;
	width: 2.2rem;
	height: 2.2rem;
	cursor: pointer;
}
.sd-appbar-btn:active { background: rgba(255, 255, 255, .28); }

/* ---------- Blatt-Overlays (Bestenliste, Anmelden) ---------- */

/* Bestenliste und Anmeldung liegen außerhalb der .sd-buehne und damit
   außerhalb des positionierten Elternteils der übrigen Overlays. Sie decken
   deshalb den ganzen Bildschirm ab (fixed), nicht nur das Brett. */
.sd-overlay-blatt {
	position: fixed;
	inset: 0;
	border-radius: 0;
	z-index: 60;
	padding: 1rem;
	padding-top: calc(1rem + env(safe-area-inset-top));
	padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Schließkreuz oben rechts im Blatt — der immer sichtbare, harmlose Ausweg. */
.sd-blatt-zu {
	position: absolute;
	top: .45rem;
	right: .55rem;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--sand, #F2EBD6);
	color: var(--ink, #333);
	cursor: pointer;
}
.sd-blatt-zu:hover,
.sd-blatt-zu:focus-visible { background: var(--sand-dark, #e3d9bd); }

.sd-overlay-blatt .sd-blatt {
	position: relative;      /* Bezug für das Schließkreuz */
	padding-top: 1.5rem;     /* Platz darunter, damit es keine Überschrift verdeckt */
	width: min(30rem, 94vw);
	max-height: 82vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
}

.sd-bl-tabs {
	display: flex;
	gap: .3rem;
	margin: .2rem 0 .8rem;
}
.sd-bl-tabs button {
	flex: 1;
	font: inherit;
	font-size: .82rem;
	padding: .45rem .3rem;
	border: 1px solid var(--sand-dark, #e3d9bd);
	background: var(--white, #fff);
	border-radius: .6rem;
	cursor: pointer;
}
.sd-bl-tabs button.aktiv {
	background: var(--jungle, #2A7A4E);
	border-color: var(--jungle, #2A7A4E);
	color: var(--white, #fff);
	font-weight: 700;
}

.sd-bl-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sd-bl-tabelle th,
.sd-bl-tabelle td { padding: .32rem .4rem; border-bottom: 1px solid var(--sand-dark, #e8e0c8); }
.sd-bl-tabelle th { text-align: left; font-size: .76rem; color: var(--ink-soft, #6b6b5a); }
.sd-bl-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; }
.sd-bl-tabelle tr.ich { background: var(--sand, #FCF6E4); font-weight: 700; }
.sd-bl-leer { color: var(--ink-soft, #777); }
.sd-bl-eigener { margin: .7rem 0 .9rem; font-weight: 700; }

/* ---------- Anmelde-Formular ---------- */

.sd-login-form label {
	display: block;
	margin-bottom: .6rem;
}
.sd-login-form label span {
	display: block;
	font-size: .8rem;
	margin-bottom: .2rem;
	color: var(--ink-soft, #666);
}
.sd-login-form input {
	width: 100%;
	font: inherit;
	/* 16px verhindert, dass iOS beim Antippen ins Feld hineinzoomt */
	font-size: 16px;
	padding: .6rem .7rem;
	border: 1px solid var(--sand-dark, #ded3b4);
	border-radius: .6rem;
	box-sizing: border-box;
}
.sd-login-form .btn { width: 100%; margin-top: .3rem; }

.sd-login-fehler {
	color: #b3261e;
	font-size: .86rem;
	margin: .1rem 0 .5rem;
}

.sd-login-fuss {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .9rem;
}

.sd-link {
	font: inherit;
	font-size: .84rem;
	background: none;
	border: 0;
	padding: 0;
	color: var(--jungle, #2A7A4E);
	text-decoration: underline;
	cursor: pointer;
}

/* Sehr niedrige Fenster (Querformat auf dem Handy): Beschriftungen weg,
   damit das Brett nicht zusammenschrumpft. */
@media (max-height: 620px) {
	body.app-modus .sd-hud-label { display: none; }
	body.app-modus .sd-akt-text  { display: none; }
	body.app-modus .sd-brett     { width: min(100%, calc(var(--sd-vh, 100dvh) - 10rem)); }
}

/* ============================================================
   Hinweis auf die installierbare App
   ============================================================
   Steht direkt unter dem Spielfeld und soll auffallen, ohne zu schreien:
   Banana-gelber Rahmen auf Sand, das echte App-Symbol als Blickfang.
   Im App-Modus wird der Kasten gar nicht erst ausgeliefert (inc/header.php).
   ============================================================ */

.sd-app-tipp {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	max-width: 46rem;
	margin: 1.6rem auto;
	padding: 1rem 1.1rem;
	background: linear-gradient(135deg, var(--sand, #FCF6E4), #FFF9E6);
	border: 2px solid var(--banana, #FFCC29);
	border-radius: var(--radius-big, 18px);
	box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,.08));
}

.sd-app-tipp-icon {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}

.sd-app-tipp-text { min-width: 0; }

.sd-app-tipp h2 {
	margin: 0 0 .35rem;
	font-size: clamp(1.05rem, 3.6vw, 1.3rem);
	color: var(--jungle-dark, #1B5E3C);
}

.sd-app-tipp p { margin: 0 0 .6rem; line-height: 1.55; }

.sd-app-tipp-wege {
	margin: 0;
	padding-left: 1.1rem;
	font-size: .92rem;
	line-height: 1.7;
}

/* Auf dem Handy wandert das Symbol über den Text — nebeneinander bliebe für
   die Anleitung sonst eine zu schmale Spalte. */
@media (max-width: 30rem) {
	.sd-app-tipp {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.sd-app-tipp-wege { text-align: left; display: inline-block; }
}