:root {
	--eclecty-bg: #121212;
	--eclecty-score-bg: #1a1a1a;
	--eclecty-accent: #ff4d4d;
	--eclecty-border: #333;
	--eclecty-muted: #666;
	--eclecty-shadow: rgba(0,0,0,0.2);
	--eclecty-font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

#eclecty-review-box {
	display: flex;
	gap: 2.5rem;
	align-items: center;
	border: 1px dashed var(--eclecty-border);
	padding: 1.5rem;
	margin-top: 2rem;
	box-shadow: 0 0 20px var(--eclecty-shadow);
	border-radius: 4px;
	transition: background 0.3s ease, border 0.3s ease;
	line-height: 1.5;

	/* Dark Mode Shadow */
	.mode--alt--b & {
		box-shadow: 0 0 20px var(--eclecty-shadow);
	}

	/* Light Mode Shadow Remove */
	body:not(.mode--alt--b) & {
		box-shadow: 0 0 20px rgba(0,0,0,0);
	}

	.eclecty-review-content {
		flex: 1;
		order: 1;
	}

	.eclecty-review-score {
		flex: 0 0 120px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--eclecty-score-bg);
		border-radius: 4px;
		position: relative;
		order: 2;
		transition: background 0.3s ease, border 0.3s ease;
	}

	.eclecty-score-label-top,
	.eclecty-score-label-bottom {
		position: absolute;
		font-size: 0.6rem;
		text-transform: uppercase;
		font-weight: 800;
		letter-spacing: 0.1em;
		color: var(--eclecty-muted);
		opacity: 0.6;
		width: 100%;
		text-align: center;
	}

	.eclecty-score-label-top {
		top: 4px;
	}

	.eclecty-score-label-bottom {
		bottom: 4px;
	}

	&.eclecty-flavor-classic .eclecty-score-label-bottom {
		color: #f1c40f;
		opacity: 1;
	}

	&.eclecty-flavor-essential .eclecty-score-label-bottom {
		color: #c0c0c0;
		opacity: 1;
	}

	.eclecty-review-icon {
		font-size: 3rem;
		line-height: 1;
		margin: 0;
	}

	.eclecty-review-album-name {
		font-size: 1.8rem;
		font-weight: 800;
		margin: 0 0 0.2rem;
		letter-spacing: -0.03em;
		line-height: 1.1;
	}

	.eclecty-review-artist {
		font-size: 1rem;
		font-weight: 700;
		margin: 0;
		color: var(--eclecty-muted);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.eclecty-review-meta-preview {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.75rem;
		color: var(--eclecty-muted);
		margin-top: 0.5rem;
		padding-top: 0.5rem;
		border-top: 1px dashed var(--eclecty-border);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	.eclecty-review-meta-left a {
		color: inherit;
		text-decoration: underline;
		text-decoration-style: dotted;
		transition: color 0.2s ease;

		&:hover {
			color: var(--eclecty-accent);
		}
	}

	/* Animations */
	&.eclecty-tier-3:not(.eclecty-flavor-classic):not(.eclecty-flavor-essential):not(.has-custom-emoji) .eclecty-review-icon {
		animation: so-so 2.5s infinite ease-in-out;
	}

	&.eclecty-tier-5:not(.eclecty-flavor-classic):not(.eclecty-flavor-essential):not(.has-custom-emoji) .eclecty-review-icon {
		animation: flicker 3.5s infinite alternate ease-in-out;
	}

	&.eclecty-flavor-classic:not(.has-custom-emoji) .eclecty-review-icon {
		animation: flicker-classic 3.5s infinite alternate ease-in-out, spin 8s infinite linear;
	}

	&.eclecty-flavor-essential:not(.has-custom-emoji) .eclecty-review-icon {
		animation: flicker-essential 3.5s infinite alternate ease-in-out, spin 8s infinite linear;
	}
}

/* Animations Keyframes */
@keyframes flicker {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px var(--eclecty-accent)); }
	50% { transform: scale(1); filter: drop-shadow(0 0 5px var(--eclecty-accent)); }
}

@keyframes flicker-classic {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px #f1c40f); }
	50% { transform: scale(1); filter: drop-shadow(0 0 5px #f39c12); }
}

@keyframes flicker-essential {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px #00d2ff); }
	50% { transform: scale(1); filter: drop-shadow(0 0 5px #3a7bd5); }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes so-so {
	0%, 100% { transform: rotateX(0deg); }
	25% { transform: rotateX(-20deg); }
	75% { transform: rotateX(20deg); }
}

/* Responsive */
@media (max-width: 600px) {
	#eclecty-review-box {
		flex-direction: column-reverse;
		gap: 1.5rem;
		text-align: center;
		aspect-ratio: 2 / 1;

		.eclecty-review-score {
			margin: 0 auto;
			aspect-ratio: 1 / 1;
		}

		.eclecty-review-meta-preview {
			flex-direction: row;
			font-size: 0.5rem;
			gap: 0.5rem;
		}
	}
}