// Clue — text or an image on a wall, drawn into the world by WorldPanel.
//
// ⚠️ NO BACKGROUND ON THE ROOT. A clue is meant to look like writing ON the surface it
// was placed against; a panel with its own plate would read as a floating sign and
// defeat the point of mounting it flush to a wall.

.clue {
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px;

	.img {
		width: 100%;
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	// ⚠️ THE ROOT MUST NOT CLIP. `PanelSizeFor` sizes the board from glyph metrics, which
	// are an estimate — a font that renders a touch wider than assumed would have the last
	// character cut off, and a clue with a missing letter is worse than one that overhangs
	// its board by a pixel. The board has no background, so overhang is invisible anyway.
	overflow: visible;

	.txt {
		// ⚠️ Outlined rather than shadowed. A clue can land on a wall of any colour and
		// the mapper cannot preview every angle; an outline keeps it readable on both a
		// white tile and a black one, which a drop shadow does not.
		text-stroke: 2px rgba( 0, 0, 0, 0.85 );
		text-align: center;
		// ⛔ `pre`, NOT `pre-wrap`. With pre-wrap the text WRAPS at the board's width, and
		// the board's HEIGHT was computed for the line count the author wrote — so a width
		// estimate a few percent short turned one line into two and the second was cropped.
		// `pre` honours authored newlines and never wraps on its own, which takes the width
		// estimate out of the correctness path entirely: a board slightly too narrow now
		// overhangs invisibly instead of losing a line.
		white-space: pre;

		// ⚠️ A flex child shrinks to fit by default, which would re-introduce the wrap this
		// is avoiding.
		flex-shrink: 0;
		font-weight: 600;
		font-family: Consolas, monospace;
	}
}