/* Skat – Kartentisch für drei.
   Alle Regeln sind auf .skt gescoped, damit kein Theme-CSS kollidiert. */

.skt {
	--skt-felt:   #1e5b40;   /* Tischtuch */
	--skt-felt2:  #17472f;
	--skt-paper:  #f3f1ea;
	--skt-ink:    #222a26;
	--skt-muted:  #6f7d75;
	--skt-line:   #d6d2c6;

	--skt-card:   #fdfcf8;   /* Kartenrücken/-vorderseite */
	--skt-edge:   #cfc9b8;
	--skt-rot:    #b8352c;   /* Herz, Karo */
	--skt-schwarz:#23292b;   /* Pik, Kreuz */
	--skt-trumpf: #c9a227;   /* Trumpfmarkierung */
	--skt-aktiv:  #2f8f6b;

	--skt-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--skt-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	container-type: inline-size;
	container-name: skt;

	background: var(--skt-paper);
	color: var(--skt-ink);
	font-family: var(--skt-sans);
	border: 1px solid var(--skt-line);
	border-radius: 12px;
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
}

.skt *,
.skt *::before,
.skt *::after { box-sizing: border-box; }

.skt__inner { padding: clamp(14px, 4cqi, 26px); }

/* ---------- Kopf ---------- */

.skt__head { margin-bottom: 12px; }

.skt__eyebrow {
	font-family: var(--skt-mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--skt-muted);
	margin: 0 0 4px;
}

.skt__title {
	font-size: clamp(21px, 6cqi, 32px);
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
}

.skt__missing {
	margin: 0;
	padding: 14px;
	border: 1px dashed var(--skt-line);
	border-radius: 10px;
	color: var(--skt-muted);
	font-size: 14px;
}

/* ---------- Rundenwahl ---------- */

.skt__setup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.skt__setupLabel {
	font-family: var(--skt-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--skt-muted);
}

/* ---------- Punktestand ---------- */

.skt__scores {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-bottom: 12px;
}

.skt__player {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 6px 11px;
	border: 1px solid var(--skt-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	line-height: 1;
}

.skt__player.is-turn {
	border-color: var(--skt-aktiv);
	box-shadow: 0 0 0 2px rgba(47, 143, 107, 0.16);
}

.skt__player.is-you .skt__pname { font-weight: 700; }

.skt__prolle {
	font-family: var(--skt-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--skt-muted);
}

.skt__player.is-solo .skt__prolle { color: var(--skt-trumpf); font-weight: 700; }

.skt__pscore {
	font-family: var(--skt-mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--skt-aktiv);
}

.skt__pscore.is-neg { color: var(--skt-rot); }

/* ---------- Tisch ----------
   Drei Plätze rund um das Tuch: eigener Platz unten, die Gegner oben. */

.skt__felt {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"links rechts"
		"stich stich"
		"neben neben"
		"unten unten"
		"hand  hand";
	gap: clamp(8px, 2cqi, 14px);
	background:
		radial-gradient(120% 90% at 50% 12%, rgba(255, 255, 255, 0.09), transparent 60%),
		linear-gradient(180deg, var(--skt-felt), var(--skt-felt2));
	border-radius: 14px;
	padding: clamp(10px, 3cqi, 20px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.22);
}

.skt__seat--links  { grid-area: links; }
.skt__seat--rechts { grid-area: rechts; justify-self: end; }
.skt__seat--unten  { grid-area: unten; justify-self: center; }

.skt__trick {
	grid-area: stich;
	min-height: clamp(86px, 26cqi, 132px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 2cqi, 14px);
}

.skt__nebenLinks  { grid-area: neben; justify-self: start; }
.skt__nebenRechts { grid-area: neben; justify-self: end; }

/* ---------- Spielerkarte am Platz ---------- */

.skt__player {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	max-width: 100%;
	padding: 7px 11px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.22);
	color: #eef4f0;
	font-size: 13px;
	line-height: 1.25;
}

.skt__player.is-turn {
	border-color: var(--skt-trumpf);
	box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.35);
	background: rgba(0, 0, 0, 0.3);
}

.skt__pkopf { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }

.skt__pname {
	font-weight: 700;
	max-width: 11em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.skt__player.is-you .skt__pname { color: #fff; }

.skt__pbot {
	font-family: var(--skt-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 1px 6px;
}

.skt__pzeile { display: flex; align-items: baseline; gap: 8px; }

.skt__prolle {
	font-family: var(--skt-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	min-height: 1em;
}

.skt__player.is-solo .skt__prolle { color: var(--skt-trumpf); font-weight: 700; }

.skt__pscore {
	font-family: var(--skt-mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #9fe0c2;
	margin-left: auto;
}

.skt__pscore.is-neg { color: #f3a49b; }

.skt__pinfo {
	font-family: var(--skt-mono);
	font-size: 11px;
	color: var(--skt-trumpf);
	min-height: 1.2em;
}

/* Verdeckte Karten der Gegner als schmale Streifen. */
.skt__pcards { display: flex; gap: 2px; margin-top: 2px; }

.skt__mini {
	width: 7px;
	height: 11px;
	flex: 0 0 auto;
	border-radius: 2px;
	background: repeating-linear-gradient(45deg, #2f4f6b 0 3px, #26415a 3px 6px);
	border: 1px solid #1d3346;
}

/* Hinweis auf dem leeren Tuch, etwa „Noch keine Karte im Stich". Braucht eine
   eigene Klasse: als Kind eines Flex-Kastens würde der Text sonst auf die
   Breite des längsten Wortes zusammenschrumpfen. */
.skt__leer {
	flex: 0 1 auto;
	max-width: 100%;
	text-align: center;
	font-size: clamp(12px, 3.2cqi, 14px);
	color: rgba(255, 255, 255, 0.55);
}

/* Beschriftung an Skat und letztem Stich. */
.skt__slot { display: flex; flex-direction: column; gap: 4px; }

.skt__slotLabel {
	font-family: var(--skt-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.66);
	white-space: nowrap;
}

.skt__skat, .skt__last { display: flex; gap: 6px; align-items: center; }

.skt__reihe { display: flex; gap: 4px; }

/* ---------- Karten ----------
   Die Farbzeichen sind eigene SVG-Formen, keine Schriftzeichen: ♠ ♥ ♦ ♣ sind
   zugleich Emoji, und Handys ignorieren dann die CSS-Farbe.

   Vierfarbenblatt wie im deutschen Onlineskat üblich – Kreuz schwarz,
   Pik grün, Herz rot, Karo orange. Mit .skt--zweifarbig wird daraus das
   klassische zweifarbige Blatt. */

.skt {
	--skt-karo:  #d98324;
	--skt-herz:  #c22f28;
	--skt-pik:   #1f7a4a;
	--skt-kreuz: #23292b;
}

.skt__card {
	position: relative;
	width: var(--skt-kb, clamp(50px, 14cqi, 80px));
	aspect-ratio: 5 / 7.2;
	border-radius: 7%/5%;
	border: 1px solid var(--skt-edge);
	background: linear-gradient(180deg, #fff, var(--skt-card));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	padding: 0;
	margin: 0;
	font: inherit;
	line-height: 1;
	cursor: default;
	overflow: hidden;
	flex: 0 0 auto;
	-webkit-tap-highlight-color: transparent;
	color: var(--skt-kreuz);
}

.skt__card--klein { --skt-kb: clamp(32px, 9cqi, 50px); }

/* ---------- Kartenbilder ----------
   Die Bilder bringen Rand, Ecken und Rundung schon mit und haben
   durchsichtige Ecken. Darum hier kein eigener Rahmen und kein Kasten-
   schatten (der wäre eckig), sondern ein Schatten entlang der Bildkante. */

/* Auch die Rückseiten im Bildblatt-Format, damit in einer Reihe alle
   Karten gleich hoch sind. */
.skt--bilder .skt__card { aspect-ratio: 2 / 3; }

.skt__card--foto {
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.skt__foto {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}


.skt__card[data-farbe="0"] { color: var(--skt-karo); }
.skt__card[data-farbe="1"] { color: var(--skt-herz); }
.skt__card[data-farbe="2"] { color: var(--skt-pik); }
.skt__card[data-farbe="3"] { color: var(--skt-kreuz); }

/* Zweifarbig: rot bleibt rot, Pik und Kreuz werden schwarz. */
.skt--zweifarbig .skt__card[data-farbe="0"] { color: var(--skt-herz); }
.skt--zweifarbig .skt__card[data-farbe="2"] { color: var(--skt-kreuz); }

.skt__sym { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Ecken */
.skt__ecke {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	width: 22%;
	line-height: 1;
}

.skt__ecke--ol { top: 4%; left: 5%; }
.skt__ecke--ur { bottom: 4%; right: 5%; transform: rotate(180deg); }

.skt__eckRang {
	font-weight: 800;
	font-size: clamp(9px, 3.1cqi, 15px);
	letter-spacing: -0.03em;
}

.skt__sym--eck { width: 78%; height: auto; aspect-ratio: 1; }

/* Augenfeld */
.skt__augen {
	position: absolute;
	left: 27%;
	right: 27%;
	top: 12%;
	bottom: 12%;
}

.skt__auge {
	position: absolute;
	width: 34%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}

.skt__auge.is-gedreht { transform: translate(-50%, -50%) rotate(180deg); }

/* Ass: ein großes Zeichen */
.skt__gross {
	position: absolute;
	inset: 24% 26%;
	display: block;
}

/* Bube, Dame, König */
.skt__bild {
	position: absolute;
	inset: 15% 21%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4%;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.035);
}

.skt__bildRang {
	font-weight: 800;
	font-size: clamp(15px, 5.4cqi, 27px);
	letter-spacing: -0.04em;
}

.skt__sym--bild { width: 42%; height: auto; aspect-ratio: 1; }

/* Rückseite */
.skt__card--zu {
	background:
		repeating-linear-gradient(45deg, #2f4f6b 0 5px, #26415a 5px 10px);
	border-color: #1d3346;
}

/* Trumpf in der eigenen Hand */
.skt__card.is-trumpf { box-shadow: 0 0 0 2px var(--skt-trumpf), 0 1px 3px rgba(0, 0, 0, 0.3); }

/* spielbar */
.skt__card.is-spielbar { cursor: pointer; transition: transform 0.12s ease; }
.skt__card.is-spielbar:hover,
.skt__card.is-spielbar:focus-visible { transform: translateY(-9px); }

/* gesperrt */
.skt__card.is-tot { opacity: 0.4; }

/* zum Drücken gewählt */
.skt__card.is-gewaehlt {
	box-shadow: 0 0 0 3px var(--skt-aktiv), 0 2px 6px rgba(0, 0, 0, 0.3);
	transform: translateY(-9px);
}

/* Beim Bildblatt kein Ring: er würde die runden Ecken eckig umfahren.
   Trumpf und gewählte Karte bekommen stattdessen einen Balken darunter. */
.skt__card--foto.is-trumpf,
.skt__card--foto.is-gewaehlt { box-shadow: none; }

.skt__card--foto.is-trumpf::after,
.skt__card--foto.is-gewaehlt::after {
	content: '';
	position: absolute;
	left: 9%;
	right: 9%;
	bottom: -5px;
	height: 3px;
	border-radius: 3px;
	background: var(--skt-trumpf);
}

.skt__card--foto.is-gewaehlt::after { background: var(--skt-aktiv); }

.skt__card:focus-visible { outline: 2px solid var(--skt-aktiv); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.skt__card.is-spielbar:hover,
	.skt__card.is-spielbar:focus-visible,
	.skt__card.is-gewaehlt { transform: none; }
}

/* Karte im Stich mit Namensschild */
.skt__played {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.skt__playedBy {
	font-family: var(--skt-mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.82);
	max-width: 82px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Farbe im Ansage-Knopf */
.skt__btn--farbe { display: inline-flex; align-items: center; gap: 6px; }
.skt__sym--knopf { width: 13px; height: 13px; flex: 0 0 auto; }
.skt__btn--farbe[data-farbe="0"] .skt__sym--knopf { fill: var(--skt-karo); }
.skt__btn--farbe[data-farbe="1"] .skt__sym--knopf { fill: var(--skt-herz); }
.skt__btn--farbe[data-farbe="2"] .skt__sym--knopf { fill: var(--skt-pik); }
.skt__btn--farbe[data-farbe="3"] .skt__sym--knopf { fill: var(--skt-kreuz); }
/* Zum Bildblatt passen zwei Farben, weil die Karten selbst zweifarbig sind. */
.skt--zweifarbig .skt__btn--farbe[data-farbe="0"] .skt__sym--knopf,
.skt--bilder .skt__btn--farbe[data-farbe="0"] .skt__sym--knopf { fill: var(--skt-herz); }
.skt--zweifarbig .skt__btn--farbe[data-farbe="2"] .skt__sym--knopf,
.skt--bilder .skt__btn--farbe[data-farbe="2"] .skt__sym--knopf { fill: var(--skt-kreuz); }
.skt__btn--farbe.is-on .skt__sym--knopf { fill: #fff; }


/* ---------- Eigene Hand ---------- */

/* .skt__hand steht weiter unten im Abschnitt „Eigene Hand als Fächer". */

/* ---------- Status und Bedienung ---------- */

.skt__status {
	margin: 12px 0 0;
	font-size: clamp(13px, 3.4cqi, 15px);
	line-height: 1.45;
	min-height: 1.45em;
}

.skt__status.is-win  { color: var(--skt-aktiv); font-weight: 700; }
.skt__status.is-lose { color: var(--skt-rot); font-weight: 700; }
.skt__status.is-warn { color: var(--skt-rot); }

.skt__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	min-height: 38px;
}

.skt__ctrlLabel {
	font-family: var(--skt-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--skt-muted);
}

.skt__btn {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 10px 15px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: var(--skt-felt);
	color: var(--skt-paper);
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.skt__btn:hover { background: #2a7a56; }

.skt__btn:focus-visible { outline: 2px solid var(--skt-aktiv); outline-offset: 2px; }

.skt__btn[disabled] { opacity: 0.4; cursor: default; }
.skt__btn[disabled]:hover { background: var(--skt-felt); }

.skt__btn--ghost {
	background: transparent;
	color: var(--skt-ink);
	border-color: var(--skt-line);
}

.skt__btn--ghost:hover { background: rgba(0, 0, 0, 0.05); }

.skt__btn--chip {
	background: transparent;
	color: var(--skt-muted);
	border-color: var(--skt-line);
	padding: 7px 12px;
	font-size: 12px;
}

.skt__btn--chip.is-on {
	background: var(--skt-felt);
	color: var(--skt-paper);
	border-color: var(--skt-felt);
}

/* ---------- Ergebnis ---------- */

.skt__ergebnis {
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid var(--skt-line);
	border-left: 4px solid var(--skt-trumpf);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	line-height: 1.55;
}

.skt__ergebnis dt {
	font-family: var(--skt-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--skt-muted);
}

.skt__ergebnis dd { margin: 0 0 6px; }

/* ---------- Verlauf ---------- */

.skt__logBox {
	margin-top: 12px;
	font-size: 13px;
	color: var(--skt-muted);
}

.skt__logBox summary { cursor: pointer; }

.skt__log {
	margin: 8px 0 0;
	padding-left: 20px;
	max-height: 180px;
	overflow-y: auto;
}

.skt__log li { margin-bottom: 3px; line-height: 1.4; }

.skt__hint {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--skt-muted);
}

/* ---------- Enge Spalten ---------- */

@container skt (max-width: 400px) {
	.skt__inner { padding: 12px; }
	.skt__hint { display: none; }
	.skt__setupLabel { display: none; }
	.skt__side { flex-direction: row; width: 100%; justify-content: space-between; }
}

/* ---------- Einrichtung: Modus, Blätter, Stärke ---------- */

.skt__setup { flex-direction: column; align-items: stretch; gap: 8px; }

.skt__setupRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.skt__setupRow[hidden] { display: none; }

/* ---------- Eigene Hand als Fächer ----------
   Sie liegt mit auf dem Tuch (Grid-Bereich „hand" in .skt__felt), damit die
   Karten auf dem Tisch liegen und nicht darunter. */

.skt__hand {
	grid-area: hand;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 0;
	/* Der Umbrucher ist eine eigene, 0 px hohe Zeile – der Abstand zählt
	   deshalb zweimal und ergibt zusammen etwa 10 px zwischen den Reihen. */
	row-gap: 5px;
	min-height: 90px;
	padding-top: 10px;
	padding-bottom: 8px;   /* Platz für den Trumpfbalken unter der Karte */
}

/* Die Karten überlappen leicht – so bleibt ein Zehnerblatt in einer Reihe.
   Die Maße sind so gewählt, dass 10 Karten samt Überlappung immer in die
   Innenbreite des Tuchs passen (Container minus Innenabstand von .skt__inner
   und .skt__felt, zusammen bis zu 92 px). Nachgerechnet von
   ../../../../tests skt_breite_test.js – bei Änderungen dort prüfen. */
.skt__hand .skt__card { --skt-kb: clamp(60px, 11.5cqi, 84px); }
.skt__hand .skt__card + .skt__card { margin-left: clamp(-26px, -3.7cqi, -6px); }
.skt__hand .skt__card:hover,
.skt__hand .skt__card.is-gewaehlt { z-index: 3; }
.skt__hand .skt__card { z-index: 1; }
.skt__hand .skt__card.is-spielbar { z-index: 2; }

/* Die Umbruchstelle in der Hand: normal unsichtbar, auf schmalen Bildschirmen
   ein Umbruch über die ganze Zeile. */
.skt__umbruch { display: none; }

/* Karten im Stich größer – dorthin schaut man. */
.skt__trick .skt__card { --skt-kb: clamp(58px, 18cqi, 100px); }

/* Schmale Bildschirme: die Hand in zwei Reihen, dafür deutlich größere
   Karten. Der Punkt liegt bei 580 px, weil eine Zehnerreihe erst darüber Karten von
   mindestens 66 px ergibt – ab da ist der Eckenindex lesbar. */
@container skt (max-width: 580px) {
	.skt__umbruch { display: block; flex: 0 0 100%; height: 0; margin: 0; }
	.skt__hand .skt__card { --skt-kb: clamp(52px, 21.5cqi, 92px); }
	.skt__hand .skt__card + .skt__card { margin-left: -7.2cqi; }
	.skt__trick .skt__card { --skt-kb: clamp(54px, 21cqi, 84px); }
	.skt__felt { padding: 8px; }
}

.skt__blattWahl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 10px;
}