/* ── Das Symbol in einer Überschrift ─────────────────────────────────────────── */

.tssd-playmark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: .1em;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sd-gold-dark);
	vertical-align: middle;
	cursor: help;
}

.tssd-playmark::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-pill);
	background: var(--sd-surface-2);
}

.tssd-playmark--play {
	color: var(--sd-ok-ink);
}

.tssd-playmark--play::before {
	border-color: var(--sd-ok-line);
	background: var(--sd-ok-bg);
}

/* REOPEN 2026-09-16 — AUCH IN DER ÜBERSCHRIFT STEHT DAS SYMBOL RECHTS.
   „mach alle icons immer rechts an der gleichen position, unabhängig von der länge
   der texte". Gemessen auf /sudoku-varianten/: das Symbol hing bei x = 533 bzw. 622,
   weil „Samurai-Sudoku" und „Super-Sudoku (große Gitter)" verschieden lang sind.
   Jetzt hängt es am rechten Rand der Überschrift — dort, wo auch ihre Linie endet.

   Absolut gesetzt statt `margin-left: auto`, weil die Überschriften unterschiedlich
   gebaut sind: die Abschnitts-Überschrift der Übersicht ist eine Flex-Zeile, die
   Seitenüberschrift ein zentrierter Block. Eine Regel für beide.

   Der Platz dafür wird auf BEIDEN Seiten freigehalten, damit eine mittig gesetzte
   Überschrift mittig bleibt; die linksbündige Flex-Überschrift nimmt sich ihn gleich
   darunter wieder. */
h1:has(> .tssd-playmark),
h2:has(> .tssd-playmark),
h3:has(> .tssd-playmark) {
	position: relative;
	padding-inline: 52px;
}

.tssd-home-h2:has(> .tssd-playmark) {
	padding-inline-start: 0;
}

h1 > .tssd-playmark,
h2 > .tssd-playmark,
h3 > .tssd-playmark {
	position: absolute;
	right: 4px;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
}

.tssd-playmark:focus-visible {
	outline: none;
}

.tssd-playmark:focus-visible::before {
	box-shadow: var(--sd-focus);
}

.tssd-playmark__ico {
	position: relative;   /* ueber dem gezeichneten Kreis */
	display: block;
}

/* Das Fähnchen. Gleiche Bauart wie `.sd-link-removed[data-tip]` in tokens.css:
   der Text steht im Attribut und wird von CSS gezeichnet. Das ist hier Pflicht und
   nicht Geschmack — die Marke hängt in der <h1 itemprop="headline">, und ein Kind
   mit Textinhalt gehörte zur Überschrift (siehe TSSD_Variant_Playability::badge). */
.tssd-playmark[data-tip]:hover::after,
.tssd-playmark[data-tip]:focus::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 30;
	width: max-content;
	max-width: min(280px, 70vw);
	margin-bottom: 8px;
	padding: 8px 11px;
	transform: translateX(-50%);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	box-shadow: var(--sd-shadow-md);
	color: var(--sd-text);
	font-family: var(--sd-font);
	font-size: var(--sd-fs-xs);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	pointer-events: none;
}

/* ── Das Symbol an einem Menüpunkt ───────────────────────────────────────────── */

/* REOPEN 2026-09-16: ALLE Symbole stehen RECHTS an derselben Stelle, unabhängig
   davon, wie lang die Beschriftung ist. Vorher klebte jedes hinter seinem Text und
   die Spalte tanzte — gemessen im Menü „Sudoku ausdrucken": 314, 323, 337, 344,
   345, 349, 358 px. Im Untermenü der Varianten standen sie längst bündig (beide
   bei 595 px), und genau so soll es überall aussehen: „dann wirkt es ruhiger und
   besser platziert."

   `margin-left: auto` in der Flex-Zeile des Menüpunkts erledigt das ohne feste
   Breite — das Symbol wandert an den rechten Rand des Verweises, egal wie breit
   der Menükasten gerade ist. `flex-shrink: 0`, damit es dort nicht gequetscht wird,
   und ein Mindestabstand zum Text, falls eine Beschriftung doch einmal bis dorthin
   reicht. */
.tssd-playchip {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 8px;
	color: var(--sd-gold-dark);
	vertical-align: middle;
}

.tssd-playchip--play {
	color: var(--sd-ok-ink);
}

.tssd-playchip[data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 30;
	width: max-content;
	max-width: min(260px, 70vw);
	margin-bottom: 8px;
	padding: 8px 11px;
	transform: translateX(-50%);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	box-shadow: var(--sd-shadow-md);
	color: var(--sd-text);
	font-family: var(--sd-font);
	font-size: var(--sd-fs-xs);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	pointer-events: none;
}