/**
 * Größenregler fürs Vollbild — gemeinsam für alle Canvas-Spiele.
 *
 * EINGEKLAPPT ist er nur ein kleiner Knopf. Das ist kein Schmuck, sondern
 * notwendig: Die Spiele haben oben links, oben rechts und oben mittig jeweils
 * etwas liegen (HUD-Tafeln, Namensschilder, die Karten des oberen Sitzes).
 * Nachgemessen bleibt bei Hokm neben Monirehs Fächer nur eine Lücke von 106 px,
 * der ausgeklappte Regler braucht aber 203 — es gibt schlicht keine Stelle, die
 * in ALLEN Spielen frei ist. Ein 34-px-Knopf passt überall; die breite Leiste
 * erscheint erst, wenn man sie selbst öffnet, und verschwindet danach wieder.
 * (Anlass: Bei Schwimmen verdeckte die Leiste den Namen des oberen Spielers.)
 *
 * Sichtbar wird der Knopf über die Klasse `sichtbar`, die js/canvas-schaerfe.js
 * beim Vollbild-Wechsel setzt. Bewusst NICHT über `:fullscreen` im Selektor:
 * Jedes Spiel hat einen anderen Wrapper-Klassennamen, und ein Selektor mit
 * gemischten Präfixen wird von manchen Browsern komplett verworfen.
 *
 * Die eigentliche Verkleinerung macht jedes Spiel in seiner eigenen CSS-Datei
 * über die Variable --spiel-zoom, zum Beispiel:
 *
 *   width: calc(min(100%, 100dvh * 1060 / 720) * var(--spiel-zoom, 1));
 */

.spiel-zoom { display: none; }

.spiel-zoom.sichtbar {
	display: flex;
	position: absolute;
	/* Direkt unter dem Vollbild-Knopf (der sitzt bei top:10, right:10).
	   Rechts oben ist in allen Spielen die HUD-Tafel — deren rechter Rand ist
	   aber Polsterung ohne Text, ein 34-px-Knopf stört dort nicht. */
	top: 56px;
	right: 10px;
	z-index: 6;
	align-items: center;
	gap: 0.5rem;
	flex-direction: row-reverse;   /* Knopf rechts, Leiste klappt nach links auf */
}

.spiel-zoom-knopf {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 9px;
	background: rgba(28, 16, 6, 0.72);
	color: #F5D6A0;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.spiel-zoom-knopf:hover { background: rgba(48, 28, 10, 0.9); }

.spiel-zoom-feld {
	display: none;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem 0.7rem;
	border-radius: 10px;
	background: rgba(28, 16, 6, 0.86);
	color: #F5D6A0;
	font: 600 13px/1 "Segoe UI", system-ui, sans-serif;
	white-space: nowrap;
}

.spiel-zoom.offen .spiel-zoom-feld { display: flex; }

.spiel-zoom-feld input[type="range"] {
	width: 120px;
	accent-color: #F5C542;
	cursor: pointer;
	margin: 0;
}

.spiel-zoom-feld output {
	min-width: 3.2em;      /* verhindert Zappeln beim Ziehen */
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.spiel-zoom-feld { font-size: 12px; padding: 0.3rem 0.55rem; }
	.spiel-zoom-feld input[type="range"] { width: 92px; }
}