/* ============================================================
   Schwedenrätsel (spielid 31)
   Papierweißes Rätselgitter wie im Heft, Fragefelder sandfarben,
   eingebettet in einen dunkelgrünen Bananario-Rahmen. Reines DOM/CSS.
   Zellgröße über eine Variable: am Handy so groß, wie die Breite es
   erlaubt (dort stehen die Fragen in der Leiste), am Desktop groß genug
   für die Fragetexte im Kästchen.
   ============================================================ */

.sr-spiel {
	--sr-tinte:   #16160f;
	--sr-papier:  #fffdf6;
	--sr-frage:   #ece4c8;
	--sr-linie:   #9c957e;
	--sr-gruen:   #cdeed6;
	--sr-gruen-d: #23934d;
	--sr-rot:     #f7d3d3;
	--sr-rot-d:   #cf3b3b;
	--sr-wort:    #fff3b0;
	--sr-cursor:  #ffd84a;
	--sr-tipp:    #1d5fb4;
	--sr-z: min(calc((100vw - 3.2rem) / 9), 46px);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: .8rem;
	padding: 1rem;
	border-radius: var(--radius-big);
	background: linear-gradient(160deg, #1f5e38 0%, #173f28 60%, #10301e 100%);
	box-shadow: var(--shadow-lift);
}

.sr-kopf {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	width: calc(var(--sr-z) * 9 + 4px);
	max-width: 100%;
	color: #f3f0dc;
	font-size: .95rem;
}
.sr-uhr { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; }
.sr-fortschritt, .sr-tipps-anzeige { font-variant-numeric: tabular-nums; opacity: .9; }

/* ---------- Gitter ---------- */

.sr-brett-wrap { position: relative; }
.sr-brett {
	display: grid;
	grid-template-columns: repeat(var(--sr-n, 9), var(--sr-z));
	grid-auto-rows: var(--sr-z);
	gap: 0;
	border: 2px solid var(--sr-tinte);
	background: var(--sr-tinte);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.sr-laden {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	min-width: calc(var(--sr-z) * 9);
	min-height: calc(var(--sr-z) * 9);
	color: #f3f0dc;
	font-weight: 700;
}
.sr-laden[hidden] { display: none; }
.sr-brett[hidden] { display: none; }

/* Startkarte: Platzhalter in Brettgröße, bis der Spieler startet */
.sr-startkarte {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: calc(var(--sr-z) * 9 + 4px);
	max-width: 100%;
	min-height: calc(var(--sr-z) * 9 + 4px);
	padding: 1rem;
	box-sizing: border-box;
	border: 2px solid var(--sr-tinte);
	border-radius: 6px;
	background: #ece4c8;
	text-align: center;
}
.sr-startkarte[hidden] { display: none; }
.sr-start-icon { font-size: 2.6rem; line-height: 1; }
.sr-start-titel { margin: 0; font-size: 1.2rem; font-weight: 700; }
.sr-start-text { margin: 0 0 .4rem; opacity: .8; }
.sr-startkarte .btn { font-size: 1.1rem; padding: .7em 1.4em; }

.sr-zelle {
	position: relative;
	box-shadow: inset 0 0 0 .5px var(--sr-linie);
	overflow: visible;
	cursor: pointer;
}
.sr-feld { background: var(--sr-papier); }
.sr-buchstabe {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: 700 calc(var(--sr-z) * .56) / 1 var(--font-body);
	color: var(--sr-tinte);
	text-transform: uppercase;
}
.sr-loesung {
	position: absolute;
	right: 2px;
	bottom: 1px;
	font: 700 calc(var(--sr-z) * .28) / 1 var(--font-body);
	color: var(--sr-gruen-d);
}

.sr-feld.sr-wort   { background: var(--sr-wort); }
.sr-feld.sr-cursor { background: var(--sr-cursor); box-shadow: inset 0 0 0 2px var(--sr-tinte); }
.sr-feld.sr-tipp .sr-buchstabe { color: var(--sr-tipp); }
.sr-feld.sr-tipp::after {
	content: '💡';
	position: absolute;
	left: 1px;
	top: 0;
	font-size: calc(var(--sr-z) * .22);
	line-height: 1;
}

/* Fragefelder */
.sr-fragefeld {
	display: flex;
	flex-direction: column;
	background: var(--sr-frage);
	color: var(--sr-tinte);
	z-index: 1;   /* Pfeile ragen in die Nachbarfelder */
}
.sr-fragefeld.sr-leer { background: #b9b29a; cursor: default; }
.sr-fragefeld.sr-quelle { background: #f4d97a; }
.sr-frage {
	/* bewusst NICHT positioniert: die Pfeile richten sich am ganzen
	   Fragefeld aus, auch wenn es zwei Fragen trägt */
	position: static;
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	padding: 2px 3px;
}
.sr-doppelt .sr-frage + .sr-frage { border-top: 1px solid var(--sr-linie); }
.sr-frage-aktiv { background: #f4d97a; }
.sr-frage-text {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font: 600 10px / 1.08 var(--font-body);
	text-align: center;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}
.sr-pfeil {
	position: absolute;
	width: calc(var(--sr-z) * .26);
	height: calc(var(--sr-z) * .26);
	min-width: 10px;
	min-height: 10px;
	z-index: 2;
	pointer-events: none;
}
.sr-pfeil svg { width: 100%; height: 100%; display: block; }
.sr-pfeil path { fill: none; stroke: var(--sr-tinte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Der Pfeil sitzt wie im Rätselheft am Rand des Feldes, in dem das Wort
   beginnt — also außerhalb des Fragekästchens, damit er keinen Text verdeckt. */
.sr-pfeil-r  { left: 100%; top: 50%; transform: translateY(-50%); }
.sr-pfeil-u  { top: 100%; left: 50%; transform: translateX(-50%); }
.sr-pfeil-ur { top: 100%; left: 1px; }
.sr-pfeil-or { bottom: 100%; left: 1px; }
.sr-pfeil-rd { left: 100%; top: 1px; }
.sr-pfeil-ld { right: 100%; top: 1px; }

/* Nach dem Auswerten */
.sr-ausgewertet .sr-zelle { cursor: default; }
.sr-feld.sr-richtig { background: var(--sr-gruen); }
.sr-feld.sr-falsch  { background: var(--sr-rot); }
.sr-feld.sr-falsch .sr-buchstabe { color: var(--sr-rot-d); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- Fragenleiste & Tastatur ---------- */

.sr-frageleiste {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: calc(var(--sr-z) * 9 + 4px);
	max-width: 100%;
	min-height: 3.2em;
	padding: .55rem .8rem;
	border-radius: 10px;
	background: var(--sr-papier);
	color: var(--sr-tinte);
	font-weight: 600;
	line-height: 1.25;
}
.sr-fl-pfeil { flex: 0 0 auto; width: 18px; height: 18px; }
.sr-fl-pfeil svg { width: 100%; height: 100%; display: block; }
.sr-fl-pfeil path { fill: none; stroke: var(--sr-tinte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr-fl-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.sr-fl-laenge { flex: 0 0 auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.sr-tastatur {
	display: grid;
	gap: 5px;
	width: calc(var(--sr-z) * 9 + 4px);
	max-width: 100%;
}
.sr-reihe { display: flex; justify-content: center; gap: 4px; }
.sr-reihe button {
	flex: 1 1 0;
	min-width: 0;
	max-width: 44px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: #f3f0dc;
	color: var(--sr-tinte);
	font: 700 1.05rem / 1 var(--font-body);
	box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
	cursor: pointer;
	touch-action: manipulation;
}
.sr-reihe button:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.sr-reihe .sr-taste-weg { flex: 1.5 1 0; max-width: 66px; background: #e3d9b5; }

.sr-werkzeug { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.sr-werkzeug .btn[disabled] { opacity: .5; cursor: default; }
.sr-meldung { min-height: 1.3em; margin: 0; color: #f3f0dc; text-align: center; }
.sr-meldung-warn { color: #ffd0c4; font-weight: 700; }

/* ---------- Fenster (Ergebnis, Rückfrage) ---------- */

.sr-ergebnis {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(10, 30, 18, .55);
}
.sr-ergebnis[hidden] { display: none !important; }
.sr-ergebnis-karte {
	width: min(420px, 100%);
	padding: 1.4rem 1.3rem 1.2rem;
	border-radius: var(--radius-big);
	background: var(--white);
	box-shadow: var(--shadow-lift);
	text-align: center;
}
.sr-ergebnis-icon { font-size: 2.6rem; line-height: 1; }
.sr-ergebnis-karte h2 { margin: .4rem 0 .2rem; }
.sr-ergebnis-unter { margin: 0 0 .8rem; color: var(--ink-soft); }
.sr-ergebnis-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.sr-ergebnis-werte div { padding: .5rem .3rem; border-radius: 12px; background: var(--sand); }
.sr-ergebnis-werte span { display: block; font-size: .78rem; color: var(--ink-soft); }
.sr-ergebnis-werte b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sr-ergebnis-info { min-height: 1.2em; font-size: .92rem; }
.sr-ergebnis-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ---------- Regeltext ---------- */

.sr-regeln { max-width: 760px; margin: 2rem auto 0; }

/* ---------- Größen ---------- */

/* Handy/Tablet: Fragetexte passen nicht ins Kästchen — nur Pfeile,
   der Text steht in der Fragenleiste. */
@media (max-width: 899px) {
	.sr-frage-text { display: none; }
	.sr-fragefeld:not(.sr-leer)::before {
		content: '?';
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		font: 700 calc(var(--sr-z) * .38) / 1 var(--font-display);
		color: rgba(22, 22, 15, .28);
		pointer-events: none;
	}
}

/* Desktop: große Kästchen mit Fragetext, Tastatur und Leiste daneben */
@media (min-width: 900px) {
	.sr-spiel {
		--sr-z: min(78px, calc((100vw - 26rem) / 9));
		grid-template-columns: auto minmax(240px, 300px);
		grid-template-areas:
			"kopf     kopf"
			"brett    leiste"
			"brett    tasten"
			"brett    werkzeug"
			"brett    meldung";
		grid-template-rows: auto auto auto auto 1fr;
		align-items: start;
		justify-content: center;
		column-gap: 1.4rem;
		padding: 1.4rem;
	}
	.sr-kopf { grid-area: kopf; width: 100%; }
	.sr-brett-wrap { grid-area: brett; }
	.sr-frageleiste { grid-area: leiste; width: 100%; min-height: 5em; align-items: flex-start; font-size: 1.05rem; }
	.sr-tastatur { grid-area: tasten; width: 100%; }
	.sr-reihe button { height: 38px; font-size: .95rem; }
	.sr-werkzeug { grid-area: werkzeug; flex-direction: column; align-items: stretch; width: 100%; }
	.sr-meldung { grid-area: meldung; }
}

/* ---------- Melden „Frage falsch?" (Phase D) ---------- */

.sr-frageleiste { flex-wrap: wrap; }
.sr-melden-knopf {
	flex: 0 0 auto;
	margin-left: auto;
	padding: .3rem .7rem;
	border: 1px solid #c9b98a;
	border-radius: 999px;
	background: #fff6d8;
	color: var(--sr-tinte);
	font: 600 .85rem / 1.2 var(--font-body);
	cursor: pointer;
}
.sr-melden-knopf[hidden] { display: none; }
.sr-melden-knopf:disabled { opacity: .65; cursor: default; }

.sr-melde-karte { text-align: left; }
.sr-melde-karte h2 { text-align: center; }
.sr-melde-frage { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 10px; background: var(--sand); }
.sr-melde-gruende { margin: 0 0 .7rem; padding: 0; border: 0; display: grid; gap: .35rem; }
.sr-melde-gruende legend { font-weight: 700; margin-bottom: .3rem; }
.sr-melde-gruende label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.sr-melde-text { display: grid; gap: .25rem; font-weight: 700; }
.sr-melde-text textarea { width: 100%; font: inherit; font-weight: 400; padding: .4rem .5rem; border-radius: 8px; border: 1px solid #c9c2a8; resize: vertical; }
.sr-melde-status { min-height: 1.2em; margin: .4rem 0; font-weight: 600; color: var(--danger); }

.sr-rueckmeldung {
	max-width: 760px;
	margin: 0 auto 1rem;
	padding: .8rem 1rem;
	border-radius: 14px;
	background: var(--white);
	box-shadow: var(--shadow);
	border-left: 6px solid var(--jungle);
}
.sr-rueckmeldung-abgelehnt { border-left-color: var(--sky-deep); }
.sr-rm-grund { color: var(--ink-soft); font-size: .92rem; }

.sr-meine-meldungen { max-width: 760px; margin: 1.2rem auto 0; }
.sr-meine-meldungen summary { cursor: pointer; font-weight: 700; color: var(--jungle-dark); }
.sr-meine-meldungen .table-wrap { margin-top: .6rem; }

.sr-rueckmeldungen { max-width: 760px; margin: 0 auto 1rem; }
.sr-rueckmeldungen[hidden] { display: none; }
.sr-rueckmeldungen .sr-rueckmeldung { margin-bottom: .6rem; }
.sr-rm-knopf { margin: 0; text-align: right; }

/* ---------- Installierbare App (body.app-modus, inc/app.php) ----------
   Muster Zahlenrätsel: alles auf EINEM Bildschirm, der Body scrollt in der
   App nicht (css/app.css). Die Zellgröße folgt aus Breite UND Höhe (siehe --sr-taste/--sr-z). Fragetexte stehen immer in der
   Leiste (wie am Handy), auch wenn das App-Fenster breit ist. */
body.app-modus { background: #173f28; }
body.app-modus .section {
	max-width: none;
	margin: 0;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
	height: 100dvh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
body.app-modus .sr-spiel {
	/* Tasten wachsen mit der Höhe (40–54 px), das Gitter bekommt den Rest:
	   ~226 px für Kopf, Leiste, Knöpfe, Meldung und Abstände (an 320 × 568 gemessen) + 3 Tastenreihen. */
	--sr-taste: clamp(40px, 6.5dvh, 54px);
	--sr-z: max(24px, min(calc((100vw - 1.4rem) / 9),
	                      calc((100dvh - 226px - 3 * var(--sr-taste) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 9),
	                      52px));
	flex: 1;
	min-height: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: none;
	grid-template-rows: none;
	align-content: start;
	gap: .4rem;
	padding: .45rem .45rem .3rem;
	border-radius: 0;
	box-shadow: none;
}
body.app-modus .sr-spiel > * { grid-area: auto; }
/* Rechts oben liegt der ☰-Knopf der App über dem Kopf. */
body.app-modus .sr-kopf { width: calc(var(--sr-z) * 9 + 4px); padding-right: 46px; font-size: .9rem; }
body.app-modus .sr-frageleiste { width: calc(var(--sr-z) * 9 + 4px); min-height: 2.9em; padding: .4rem .6rem; font-size: .95rem; align-items: center; }
body.app-modus .sr-tastatur { width: calc(var(--sr-z) * 9 + 4px); gap: 4px; }
body.app-modus .sr-reihe button { height: var(--sr-taste); max-width: none; font-size: 1.05rem; }
body.app-modus .sr-werkzeug { flex-direction: row; width: auto; }
body.app-modus .sr-werkzeug .btn { padding: .45rem .8rem; font-size: .95rem; }
body.app-modus .sr-meldung { min-height: 1.1em; font-size: .85rem; }
body.app-modus .sr-frage-text { display: none; }
body.app-modus .sr-fragefeld:not(.sr-leer)::before {
	content: '?';
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: 700 calc(var(--sr-z) * .38) / 1 var(--font-display);
	color: rgba(22, 22, 15, .28);
	pointer-events: none;
}
/* Rückmeldung zu Meldungen: in der App ein Fenster über dem Spiel */
body.app-modus .sr-rueckmeldungen {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	align-content: center;
	max-width: none;
	margin: 0;
	padding: 1rem;
	background: rgba(10, 30, 18, .6);
}
body.app-modus .sr-rueckmeldungen[hidden] { display: none; }