OMRThemePreview {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-family: Poppins;
	color: white;
	overflow: hidden;

	.theme-preview-backdrop,
	.theme-background-sample,
	.theme-preview-backdrop-overlay {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.theme-background-sample {
		object-fit: cover;
	}

	.theme-preview-backdrop-overlay {
		background-color: rgba( 4, 5, 8, 0.72 );
	}

	.theme-preview-board {
		position: absolute;
		left: 4%;
		top: 4%;
		width: 92%;
		height: 92%;
		flex-direction: column;
		gap: 18px;
	}

	.theme-preview-header {
		min-height: 95px;
		flex-direction: row;
		align-items: center;
		gap: 22px;
	}

	.theme-logo-sample {
		width: 150px;
		height: 82px;
		object-fit: contain;
	}

	.theme-preview-header-copy {
		flex-grow: 1;
		flex-direction: column;
		justify-content: center;
	}

	.theme-preview-title {
		font-size: 40px;
		line-height: 1;
	}

	.theme-preview-subtitle {
		font-size: 13px;
		letter-spacing: 4px;
		margin-top: 8px;
	}

	.theme-preview-meta {
		font-size: 11px;
		letter-spacing: 2px;
	}

	.theme-preview-columns {
		flex-grow: 1;
		flex-direction: row;
		gap: 18px;
		min-height: 0;
	}

	.theme-preview-column {
		width: 50%;
		flex-direction: column;
		gap: 14px;
		min-height: 0;
	}

	.theme-preview-section {
		position: relative;
		flex-direction: column;
		gap: 10px;
		padding: 16px;
	}

	.theme-preview-heading {
		font-size: 19px;
		letter-spacing: 1px;
	}

	.theme-preview-body {
		font-size: 13px;
		max-width: 620px;
	}

	.theme-preview-number {
		font-size: 28px;
	}

	.theme-text-row,
	.theme-chip-row,
	.theme-border-row {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.theme-text-row label {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 1px;
	}

	.theme-interactive-chip,
	.theme-border-sample {
		min-width: 82px;
		min-height: 34px;
		padding: 8px 10px;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		letter-spacing: 1px;
	}

	.theme-overlay-row,
	.theme-surface-grid {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.theme-overlay-sample {
		width: 23%;
		min-height: 44px;
		padding: 8px;
		align-items: center;
		justify-content: center;
		font-size: 9px;
		letter-spacing: 1px;
	}

	.theme-surface-sample {
		width: 31%;
		min-height: 54px;
		padding: 10px;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		letter-spacing: 1px;
	}

	.theme-health-preview {
		position: relative;
		width: 100%;
		height: 16px;
		overflow: hidden;
	}

	.theme-health-local,
	.theme-health-opponent {
		height: 100%;
	}

	.theme-health-local { width: 72%; }
	.theme-health-opponent { width: 43%; }

	.theme-border-sample {
		background-color: rgba( 255, 255, 255, 0.025 );
	}
}