/*
 * Multicharts Universe — Universe Bridge
 *
 * Cross-universe discovery moment. Seven cards in a circular-ish layout
 * around a centered "Discover Your Pattern" motto. Current universe
 * (Market) sits prominent / unclickable.
 */

body.mcu-theme .mcu-universe-bridge {
	position: relative;
	padding-block: var(--space-3xl);
	background:
		radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
		linear-gradient(180deg, var(--color-void) 0%, var(--color-cosmic-night) 50%, var(--color-void) 100%);
	overflow: hidden;
	isolation: isolate;
}

/* Rotating background rays — subtle radial light beams */
body.mcu-theme .mcu-universe-bridge__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.4;
}

body.mcu-theme .mcu-universe-bridge__rays {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200vmin;
	height: 200vmin;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgba(212, 175, 55, 0.08) 30deg,
		transparent 60deg,
		rgba(212, 175, 55, 0.04) 90deg,
		transparent 120deg,
		rgba(212, 175, 55, 0.06) 180deg,
		transparent 220deg,
		rgba(212, 175, 55, 0.05) 280deg,
		transparent 320deg,
		transparent 360deg
	);
	transform: translate(-50%, -50%);
	animation: mcu-bridge-rays 90s linear infinite;
	mask-image: radial-gradient(ellipse at center, transparent 10%, black 30%, black 60%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at center, transparent 10%, black 30%, black 60%, transparent 80%);
}

@keyframes mcu-bridge-rays {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

body.mcu-theme .mcu-universe-bridge__inner {
	position: relative;
	z-index: 1;
}

body.mcu-theme .mcu-universe-bridge__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
}

@media (min-width: 600px) {
	body.mcu-theme .mcu-universe-bridge__list {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 960px) {
	body.mcu-theme .mcu-universe-bridge__list {
		grid-template-columns: repeat(7, 1fr);
	}
}

body.mcu-theme .mcu-universe-bridge__item { margin: 0; padding: 0; list-style: none; }

body.mcu-theme .mcu-universe-bridge__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-md) var(--space-sm);
	text-align: center;
	background: var(--color-cosmic-night);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: transform var(--dur-base) var(--ease-celestial),
	            border-color var(--dur-base) var(--ease-celestial),
	            background var(--dur-base) var(--ease-celestial),
	            color var(--dur-base) var(--ease-celestial);
	min-height: 140px;
	background-size: 100% 100%;
}

body.mcu-theme a.mcu-universe-bridge__card:hover,
body.mcu-theme a.mcu-universe-bridge__card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--color-gold);
	color: var(--color-text-primary);
	background-color: var(--color-stardust);
	box-shadow: var(--glow-gold-sm);
}

body.mcu-theme .mcu-universe-bridge__item.is-current .mcu-universe-bridge__card {
	background: linear-gradient(180deg, rgba(212, 175, 55, 0.12) 0%, var(--color-cosmic-night) 100%);
	border-color: var(--color-gold);
	color: var(--color-text-primary);
	cursor: default;
}

body.mcu-theme .mcu-universe-bridge__emoji {
	font-size: 2rem;
	line-height: 1;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
	margin-bottom: var(--space-xs);
}

body.mcu-theme .mcu-universe-bridge__label {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-tight);
	color: inherit;
	line-height: 1.2;
}

body.mcu-theme .mcu-universe-bridge__item.is-current .mcu-universe-bridge__label {
	color: var(--color-gold-bright);
}

body.mcu-theme .mcu-universe-bridge__sub {
	font-size: 0.6875rem;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-muted);
	line-height: 1.2;
}

body.mcu-theme .mcu-universe-bridge__item.is-current .mcu-universe-bridge__sub {
	color: var(--color-text-secondary);
}

body.mcu-theme .mcu-universe-bridge__here {
	display: inline-block;
	margin-top: var(--space-xs);
	padding: 2px 8px;
	font-size: 0.625rem;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-text-on-gold);
	background: var(--color-gold-bright);
	border-radius: var(--radius-pill);
}

body.mcu-theme .mcu-universe-bridge__motto {
	text-align: center;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	color: var(--color-gold-bright);
	margin: 0;
}

body.mcu-theme .mcu-universe-bridge__motto em {
	background: linear-gradient(135deg, var(--color-gold-bright) 0%, var(--color-gold-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Reduce motion friendly */
@media (prefers-reduced-motion: reduce) {
	body.mcu-theme .mcu-universe-bridge__rays { animation: none; }
}