/* ================================================
   LAYOUT - App Shell & Main Containers
   ================================================ */

/* App Shell (Main Container) */
.app-shell {
	position: relative;
	width: var(--game-width);
	height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - (var(--shell-frame-padding) * 2));
	max-height: 960px;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(8, 0, 12, 0.92) 0%, rgba(4, 0, 8, 0.96) 100%);
	background-image: url('../assets/bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: clamp(0px, 4vw, 32px);
	border: 1px solid rgba(255, 60, 96, 0.16);
	box-shadow: 0 34px 88px rgba(0, 0, 0, 0.68);
	overflow: hidden;
	isolation: isolate;
}

@media (max-width: 600px) {
	.app-shell {
		width: 100vw;
		height: 100dvh;
		border-radius: inherit;
		border: none;
		box-shadow: none;
	}
}

/* Main Content Area */
main {
	position: relative;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--transition-slow), transform var(--transition-slow);
	text-align: center;
	padding: 0 clamp(1rem, 4vw, 1.75rem);
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gap-lg);
	overflow-y: auto;
	min-height: 0;
}

html.entered main {
	opacity: 1;
	transform: translateY(0);
}