.tree-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.skill-tree {
	width: 100%;
	height: 100%;
}

.wire line {
	stroke: #00ffff;
	stroke-width: 1.8;

	filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.8));
}

.node {
	fill: rgba(15, 20, 25, 0.85);

	stroke: #00ffff;
	stroke-width: 2;

	filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6))
		drop-shadow(0 0 20px rgba(0, 255, 255, 0.25));

	transition: 0.25s;
}

.node:hover {
	fill: rgba(25, 40, 45, 0.95);

	filter: drop-shadow(0 0 14px rgba(0, 255, 255, 1))
		drop-shadow(0 0 30px rgba(0, 255, 255, 0.6));
}

.center {
	stroke-width: 3;
}

@keyframes glowPulse {
	0%,
	100% {
		opacity: 1;
		text-shadow:
			0 0 10px rgba(0, 255, 255, 0.9),
			0 0 25px rgba(0, 255, 255, 0.7),
			0 0 50px rgba(0, 255, 255, 0.5),
			0 0 80px rgba(0, 255, 255, 0.3);
	}
	50% {
		opacity: 0.86;
		text-shadow:
			0 0 14px rgba(0, 255, 255, 1),
			0 0 30px rgba(0, 255, 255, 0.85),
			0 0 60px rgba(0, 255, 255, 0.55),
			0 0 90px rgba(0, 255, 255, 0.35);
	}
}

.coming-soon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	font-family: "Oxanium", sans-serif;
	font-size: 72px;
	font-weight: 600;
	letter-spacing: 8px;

	color: #00ffff;

	text-shadow:
		0 0 10px rgba(0, 255, 255, 0.9),
		0 0 25px rgba(0, 255, 255, 0.7),
		0 0 50px rgba(0, 255, 255, 0.5),
		0 0 80px rgba(0, 255, 255, 0.3);

	animation: glowPulse 2.5s ease-in-out infinite;
	pointer-events: none;
	user-select: none;
	text-align: center;
}

@media (orientation: landscape) and (max-height: 500px) {
	.coming-soon {
		font-size: clamp(28px, 5vw, 56px);
		letter-spacing: 4px;
	}
}