/* Only show selection styling when selection is allowed */
.selection-allowed .selectable-word {
	cursor: pointer;
	transition: all 0.3s ease;
}

.selection-allowed .selectable-word:hover {
	font-weight: 600;
	color: var(--primary-color);
}

.selectable-word.selected {
	font-weight: 700;
	color: var(--primary-color);
	text-shadow: 0 0 8px rgba(155, 77, 202, 0.3);
	transform: scale(1.05);
}

/* Fade non-selected content when words are selected */
.matching-line:has(.selectable-word.selected) .selectable-word:not(.selected) {
	opacity: 0.4;
	filter: blur(0.5px);
}

.matching-line:has(.selectable-word.selected) ~ .prev-line,
.matching-line:has(.selectable-word.selected) ~ .next-line {
	opacity: 0.3;
	filter: blur(1px);
}

.prev-line:has(~ .matching-line .selectable-word.selected),
.next-line:has(~ .matching-line .selectable-word.selected) {
	opacity: 0.3;
	filter: blur(1px);
}