/*
 * A web build fills the width it is given, at its own shape.
 *
 * The same rules as the Ren'Py plugin's frame, for the same reasons: the play
 * page scrolls, so the width is the limit there; the fullscreen view does not,
 * so the height is. --im3d-wb-aspect comes from the game's Game Width and
 * Game Height.
 */

.im3d-wb-frame {
	aspect-ratio: var(--im3d-wb-aspect, 16 / 9);
	background: #000;
	border: 0;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
}

.im3d-wb-frame:focus {
	outline: none;
}

.im3d-wb-frame.im3d-wb-frame--fullscreen {
	height: 100vh;
	max-height: 100vh;
	max-width: 100vw;
	width: auto;
}

/*
 * The theme puts a 25px bar above the game on the fullscreen view, inside a
 * <center>. Make that wrapper a screen-tall column and give the game what is
 * left, so the view does not scroll by the height of the bar. A WebGL game
 * resizes its canvas to whatever rectangle it gets, so the aspect ratio is let
 * go here.
 */
center:has(> .im3d-wb-frame--fullscreen) {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

center:has(> .im3d-wb-frame--fullscreen) > .im3d-wb-frame--fullscreen {
	aspect-ratio: auto;
	flex: 1 1 auto;
	height: auto;
	max-height: none;
	min-height: 0;
	width: 100%;
}