/**
 * TM Credits overlay styles.
 *
 *   .tm-credit-label.tm-credit-img -> bottom-right of an <img>, horizontal text.
 *   .tm-credit-label.tm-credit-bg  -> center-right of a background element,
 *                                     vertical (rotated) text.
 *
 * Position / transform / max-width are set inline by JS so each label is anchored
 * to its specific image/element and scrolls naturally with the page.
 *
 * Tweak the look via CSS variables on :root.
 */

:root {
	--tm-credit-color: #ffffff;
	--tm-credit-bg: rgba(0, 0, 0, 0.55);
	--tm-credit-font-size: 11px;
	--tm-credit-z: 2147483000;
}

.tm-credit-label {
	z-index: var( --tm-credit-z );
	pointer-events: none;
	user-select: none;

	padding: 3px 8px;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: min( var( --tm-credit-font-size ), 3vw );
	line-height: 1.25;
	color: var( --tm-credit-color );
	background: var( --tm-credit-bg );
	opacity: 0.92;
	letter-spacing: 0.02em;
	box-sizing: border-box;
}

/* Direct <img>: bottom, right-aligned horizontal text, spans the image width. */
.tm-credit-img {
	white-space: normal;
	text-align: right;
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}

/* Background element: center-right, vertical (rotated) text. */
.tm-credit-bg {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
	padding: 8px 3px;
}