/*
 * Yahoo Ads template styles
 *
 * This file styles the template-side ad containers such as #adView and #adBanner.
 * It controls where the Yahoo ad area appears inside the WebGL template,
 * but it does not fully control the real ad creative rendered by the Yahoo SDK.
 *
 * In production:
 * - The template controls the outer slot position and layout.
 * - Yahoo SDK / ad content controls most inner ad markup and rendering.
 */

/* ========================================================================== */
/* SLOT CONTAINERS                                                            */
/* Position the shared Yahoo containers used by banner and fullscreen slots.  */
/* ========================================================================== */
/* Template-controlled slot containers */
#adView,
#adBanner {
	position: absolute;
	z-index: 20;
	pointer-events: none;
}

#adView {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

/* Keep the banner centered above the safe area while the game remains visible. */
#adBanner {
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
	transform: translateX(-50%);
	width: min(100%, 360px);
	display: flex;
	justify-content: center;
}

/* Hide empty mount points so blank slots do not affect layout or input. */
#adView:empty,
#adBanner:empty {
	display: none;
}

/* Allow only actual ad content to receive pointer input. */
#adView > *,
#adBanner > * {
	pointer-events: auto;
	max-width: 100%;
}