/* CompactCSS source: /apps/awtsmoos-studio/styles/studio-editor-viewport.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @file studio-editor-viewport.css
 * @description Keeps the cinematic stage dominant while placing HUD truth above both render canvases.
 * The Awtsmoos renews frame and depth while Awtsmoos.com makes visible controls physically reachable;
 * native world and portable signs remain below readable stage chrome so image and interaction agree beneath the maker's hand.
 */
.studio-editor-viewport {
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: 14px;
	background:
		linear-gradient(rgba(60, 90, 118, 0.11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(60, 90, 118, 0.11) 1px, transparent 1px),
		#050b12;
	background-size: 28px 28px;
}

.studio-editor-stage-wrap {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, calc((100dvh - 230px) * 16 / 9));
	max-width: 1100px;
	aspect-ratio: 16 / 9;
	border: 1px solid #344c61;
	border-radius: 12px;
	background: #000713;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}

.studio-stage {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 11px;
	background: #030817;
	object-fit: contain;
}

.studio-viewport-hud {
	position: absolute;
	inset: 10px 10px auto;
	z-index: 3;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.studio-viewport-hud-center {
	justify-content: center;
}

.studio-hud-pill,
.studio-hud-object,
.studio-hud-time,
.studio-hud-button {
	padding: 5px 8px;
	border-radius: 8px;
	background: rgba(4, 12, 22, 0.82);
	color: #ddecfa;
	font-size: 11px;
	backdrop-filter: blur(8px);
}

.studio-hud-button {
	min-height: 28px;
	border: 1px solid #3a556d;
	pointer-events: auto;
}