/*
 * charaktere.css — Die Survivor-Auswahl.
 *
 * Nur Tokens aus `querschnitt/design/tokens.css` (→ BAUANLEITUNG §6).
 * Rohe Farben und px-Literale gibt es hier nicht; die einzige Ausnahme
 * ist die 1px-Haarlinie, die den Kartenrahmen trägt.
 *
 * Grundmotiv wie überall: die abgeschnittene Ecke. Die Karten sind
 * gefast — deshalb kann ihr Leuchten NICHT aus `box-shadow` kommen
 * (clip-path schneidet den Schatten mit weg). Es kommt aus einem
 * `filter: drop-shadow` auf der umgebenden Zelle, die selbst nicht
 * beschnitten ist. Das ist der einzige Trick in dieser Datei.
 */

.auswahl {
	display: flex;
	flex-direction: column;
	gap: var(--raum-5);
}

/* ------------------------------------------------------------------
 * Kopf — Titel und Name der Partie
 * ------------------------------------------------------------------ */
.auswahl__kopfinhalt {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--raum-5);
}

.auswahl__ueberzeile {
	margin-bottom: var(--raum-2);
	color: var(--signal);
}

.auswahl__titel {
	text-transform: uppercase;
}

.auswahl__namensfeld {
	flex: 1 1 20rem;
	max-width: 30rem;
}

/* ------------------------------------------------------------------
 * Filterleiste
 * ------------------------------------------------------------------ */
.auswahl__filterinhalt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--raum-3) var(--raum-5);
	padding: var(--raum-3) var(--raum-4);
}

.auswahl__suche {
	flex: 1 1 14rem;
	max-width: 22rem;
}

.auswahl__gruppe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--raum-2) var(--raum-3);
}

/* Filterknöpfe sind Fingerziele, nicht nur Text (→ BAUANLEITUNG §7). */
.auswahl__filter .umschalter__wahl {
	display: inline-flex;
	align-items: center;
	min-height: var(--griff);
}

.auswahl__treffer {
	margin-left: auto;
	color: var(--plasma-hell);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Ladezustand
 * ------------------------------------------------------------------ */
.auswahl__laderaster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
	gap: var(--raum-4);
}

.auswahl__ladekachel {
	/* So hoch wie eine echte Karte: Bild 2:3 plus Fuss. */
	aspect-ratio: 766 / 1180;
	clip-path: polygon(
		var(--schnitt) 0,
		100% 0,
		100% calc(100% - var(--schnitt)),
		calc(100% - var(--schnitt)) 100%,
		0 100%,
		0 var(--schnitt)
	);
}

.auswahl__ladetext {
	max-width: none;
	margin-top: var(--raum-4);
	text-align: center;
}

.auswahl__fehlertext {
	color: var(--text-still);
	font-size: var(--grad-klein);
}

.auswahl__leer[hidden] {
	display: none;
}

/* ------------------------------------------------------------------
 * Katalog-Raster
 * ------------------------------------------------------------------ */
.auswahl__katalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
	gap: var(--raum-4);
	list-style: none;
	padding: 0;
	margin: 0;
}

.auswahl__zelle {
	--karten-schein: transparent;

	display: flex;
	filter: drop-shadow(0 0 0.6rem var(--karten-schein));
	transition: filter var(--zeit-normal) var(--kurve-aus);
}

.auswahl__zelle:hover {
	--karten-schein: color-mix(in srgb, var(--plasma) 38%, transparent);
}

.auswahl__zelle--gewaehlt {
	--karten-schein: color-mix(in srgb, var(--signal) 55%, transparent);
}

.auswahl__zelle--gewaehlt:hover {
	--karten-schein: color-mix(in srgb, var(--signal-hell) 70%, transparent);
}

/* ------------------------------------------------------------------
 * Survivorkarte
 *
 * Aufbau wie `.tafel`: aussen die Rahmenfarbe, innen 1px versetzt die
 * eigentliche Fläche. Der Rahmen ist das, was die Auswahl anzeigt.
 * ------------------------------------------------------------------ */
.katalogkarte {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Ohne das strecken sich die Teile im <button> nicht auf die volle
	 * Breite — Chromium richtet Knopf-Inhalte von Haus aus mittig aus. */
	align-items: stretch;
	width: 100%;
	padding: 1px;
	background: var(--linie-wach);
	color: var(--text);
	text-align: left;
	filter: saturate(0.75) brightness(0.85);
	transition:
		transform var(--zeit-normal) var(--kurve-aus),
		filter var(--zeit-normal) var(--kurve-aus),
		background var(--zeit-normal) var(--kurve-aus);
	clip-path: polygon(
		var(--schnitt) 0,
		100% 0,
		100% calc(100% - var(--schnitt)),
		calc(100% - var(--schnitt)) 100%,
		0 100%,
		0 var(--schnitt)
	);
}

.katalogkarte:hover,
.katalogkarte:focus-visible {
	background: var(--plasma-tief);
	filter: saturate(1) brightness(1);
	transform: translateY(-0.2rem);
}

.katalogkarte:active {
	transform: translateY(0) scale(0.97);
	transition-duration: var(--zeit-flink);
}

.katalogkarte[aria-pressed="true"] {
	background: var(--signal);
	filter: saturate(1.05) brightness(1.02);
	transform: translateY(-0.15rem);
}

.katalogkarte[aria-pressed="true"]:hover {
	background: var(--signal-hell);
}

/* Ist das Team voll, treten die übrigen Karten zurück. */
.auswahl__katalog--voll .katalogkarte[aria-pressed="false"] {
	filter: saturate(0.3) brightness(0.5);
}

.auswahl__katalog--voll .katalogkarte[aria-pressed="false"]:hover,
.auswahl__katalog--voll .katalogkarte[aria-pressed="false"]:focus-visible {
	filter: saturate(0.6) brightness(0.8);
}

/* --- Bildfläche ---
 * Das Seitenverhältnis ist exakt das der ID-Cards (766 × 887). Vorher
 * stand hier 2/3; `object-fit: cover` hat die Karte dann seitlich
 * beschnitten, und genau dort stehen die Skill-Namen — aus
 * „+1 FREE MACHINE ACTION" wurde „FREE MACHINE ACTION". Mit dem
 * echten Verhältnis bleibt die Karte vollständig. */
.katalogkarte__bild {
	position: relative;
	display: block;
	aspect-ratio: 766 / 887;
	overflow: hidden;
	background: radial-gradient(120% 80% at 50% 0%, var(--tiefe-schwebend), var(--tiefe-erhoben) 70%);
}

.katalogkarte__bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Ersatz für ein fehlendes Bild — gestaltet, nicht kaputt. */
.katalogkarte__ersatz {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--raum-2);
	height: 100%;
	padding: var(--raum-3);
	text-align: center;
	background: repeating-linear-gradient(
		135deg,
		transparent 0 0.55rem,
		color-mix(in srgb, var(--linie-wach) 55%, transparent) 0.55rem 0.62rem
	);
}

.katalogkarte__ersatzzeichen {
	font-size: var(--grad-riese);
	color: var(--text-still);
	opacity: 0.55;
}

.katalogkarte__ersatzname {
	font-family: var(--schrift-display);
	font-size: var(--grad-gross);
	font-weight: 600;
	letter-spacing: var(--laufweite-titel);
	line-height: 1.15;
	color: var(--text-leise);
	text-wrap: balance;
}

/* --- Positionsnummer: die Spielreihenfolge, aus drei Metern lesbar --- */
.katalogkarte__nummer {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	min-height: 2.6rem;
	padding: 0 var(--raum-2);
	background: linear-gradient(150deg, var(--signal-hell), var(--signal) 55%, var(--signal-tief));
	color: var(--text-auf-signal);
	font-size: var(--grad-titel);
	font-weight: 700;
	line-height: 1;
	animation: hochsteigen var(--zeit-normal) var(--kurve-schwung);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--schnitt) 100%, 0 calc(100% - var(--schnitt)));
}

.katalogkarte__nummer[hidden] {
	display: none;
}

/* --- Fuss --- */
.katalogkarte__fuss {
	display: grid;
	/* `minmax(0, 1fr)` statt der Vorgabe `auto`: sonst zieht ein langer
	 * Boxname die Spur breiter als die Karte und die Schilde rutschen
	 * über den Rand hinaus. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--raum-2);
	padding: var(--raum-3);
	background: linear-gradient(to bottom, var(--tiefe-erhoben), var(--tiefe-flaeche));
}

.katalogkarte__name {
	font-family: var(--schrift-display);
	font-size: var(--grad-normal);
	font-weight: 700;
	letter-spacing: var(--laufweite-titel);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.katalogkarte__typ {
	justify-self: start;
}

/* Armor liegt als HUD-Streifen auf der unteren Bildkante — im Fuss
 * würde die Schildreihe dem Boxnamen die halbe Breite wegnehmen. */
.katalogkarte__armor {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	gap: 0.15rem;
	padding: var(--raum-1) var(--raum-2);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--tiefe-grund) 88%, transparent),
		transparent
	);
	color: var(--plasma-hell);
	font-size: var(--grad-normal);
}

/* Gefüllte Schilde lesen sich auf einen Blick als Punktreihe;
 * die reine Strichform verschwimmt in dieser Grösse zu Kringeln.
 * `flex: none`, sonst quetscht der Boxname die Schilde platt. */
.katalogkarte__schild {
	flex: none;
	fill: color-mix(in srgb, currentcolor 30%, transparent);
}

.katalogkarte__box {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-still);
}

/* ------------------------------------------------------------------
 * Auswahl-Leiste — klebt am unteren Rand
 * ------------------------------------------------------------------ */
.auswahl__leiste {
	position: sticky;
	bottom: 0;
	z-index: var(--ebene-klebrig);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--raum-3) var(--raum-5);
	padding: var(--raum-3) var(--raum-4);
	border-top: 1px solid color-mix(in srgb, var(--signal) 45%, var(--linie-wach));
	background: color-mix(in srgb, var(--tiefe-flaeche) 88%, transparent);
	backdrop-filter: blur(0.9rem) saturate(1.2);
	box-shadow: var(--hebung-3);
}

.auswahl__leiste[hidden] {
	display: none;
}

.auswahl__gewaehlte {
	flex: 1 1 24rem;
	min-width: 0;
}

.auswahl__hinweis {
	display: flex;
	align-items: center;
	max-width: none;
	min-height: var(--griff);
	color: var(--text-still);
}

.auswahl__hinweis[hidden] {
	display: none;
}

.auswahl__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--raum-2);
	/* Auf schmalen Geräten stapeln sich die sechs Chips — die Leiste
	 * darf davon nicht den halben Bildschirm fressen. */
	max-height: 28dvh;
	overflow-y: auto;
	list-style: none;
	padding: 0;
	margin: 0;
}

.auswahlchip {
	display: flex;
	align-items: center;
	gap: var(--raum-1);
	padding-right: var(--raum-1);
	background: var(--tiefe-erhoben);
	animation: hereinschieben var(--zeit-normal) var(--kurve-aus);
}

.auswahlchip__nummer {
	align-self: stretch;
	display: grid;
	place-items: center;
	min-width: 1.9rem;
	background: linear-gradient(150deg, var(--signal-hell), var(--signal) 55%, var(--signal-tief));
	color: var(--text-auf-signal);
	font-size: var(--grad-normal);
	font-weight: 700;
	line-height: 1;
}

.auswahlchip__name {
	max-width: 7rem;
	padding: 0 var(--raum-1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--schrift-display);
	font-size: var(--grad-klein);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--laufweite-etikett);
}

.auswahlchip__knopf {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: var(--griff);
	color: var(--text-still);
	font-size: var(--grad-normal);
	transition:
		color var(--zeit-flink) var(--kurve-aus),
		transform var(--zeit-flink) var(--kurve-schwung);
}

.auswahlchip__knopf:hover {
	color: var(--signal-hell);
}

.auswahlchip__knopf--weg:hover {
	color: var(--blut);
}

.auswahlchip__knopf:active {
	transform: scale(0.82);
}

.auswahlchip__knopf[disabled] {
	opacity: 0.25;
	pointer-events: none;
}

/* --- Abschluss: Zähler + Startknopf --- */
.auswahl__abschluss {
	display: flex;
	align-items: center;
	gap: var(--raum-4);
	margin-left: auto;
}

.auswahl__zaehler {
	display: flex;
	align-items: baseline;
	gap: var(--raum-1);
	font-size: var(--grad-gross);
	color: var(--text-still);
	white-space: nowrap;
}

.auswahl__zaehlerwert {
	font-size: var(--grad-titel);
	font-weight: 700;
	color: var(--text);
}

.auswahl__zaehler--voll .auswahl__zaehlerwert {
	color: var(--signal);
}

/* ------------------------------------------------------------------
 * Schmale Geräte — Hochformat-Tablet, Telefon
 * ------------------------------------------------------------------ */
@media (width <= 40rem) {
	.auswahl__katalog,
	.auswahl__laderaster {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}

	.auswahl__treffer {
		margin-left: 0;
	}

	.auswahl__abschluss {
		flex: 1 1 100%;
		margin-left: 0;
	}

	/* Kürzere Namen, damit zwei Chips nebeneinander passen. */
	.auswahlchip__name {
		max-width: 4.5rem;
	}

	.auswahl__abschluss .knopf {
		flex: 1;
	}
}