:root {
	--borg-green: #4eff44;
	--dark-bg: #080a08;
	--panel-bg: rgba(8, 15, 8, 0.95);
}

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: var(--dark-bg);
	overflow: hidden;
	font-family: 'Courier New', monospace;
	display: flex;
	justify-content: center;
	align-items: center;
}

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

.grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(78, 255, 68, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 255, 68, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	z-index: -1;
}

.neural-svg {
	width: 1000px;
	height: 800px;
	overflow: visible;
}

/* Animationen */
@keyframes borgBlink {
	0%, 100% {
		filter: brightness(0.7) drop-shadow(0 0 5px rgba(78, 255, 68, 0.4));
	}
	50% {
		filter: brightness(1.6) drop-shadow(0 0 15px var(--borg-green));
	}
}

.node {
	transition: all 0.3s;
}

.node.clickable {
	cursor: pointer;
}

.node.clickable:hover {
	stroke-width: 4px;
	filter: brightness(1.8) drop-shadow(0 0 20px var(--borg-green));
}

.blink-1 {
	animation: borgBlink 3.5s infinite;
}

.blink-2 {
	animation: borgBlink 4.5s infinite;
	animation-delay: 1s;
}

.blink-3 {
	animation: borgBlink 2.8s infinite;
	animation-delay: 0.5s;
}

.core-ring {
	animation: coreRotate 40s linear infinite;
	stroke-dasharray: 10 15;
	transform-origin: center;
}

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

/* HUD & UI */
.info-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 320px;
	background: var(--panel-bg);
	backdrop-filter: blur(10px);
	border: 1.5px solid var(--borg-green);
	border-radius: 30px 5px;
	padding: 25px;
	color: var(--borg-green);
	z-index: 100;
	visibility: hidden;
	transition: all 0.4s cubic-bezier(0.17, 0.88, 0.32, 1.28);
}

.info-panel.active {
	transform: translate(-50%, -50%) scale(1);
	visibility: visible;
}

.btn-close {
	background: rgba(78, 255, 68, 0.1);
	border: 1px solid var(--borg-green);
	color: var(--borg-green);
	padding: 8px;
	width: 100%;
	cursor: pointer;
	margin-top: 15px;
	border-radius: 0 0 10px 0;
}

.status-log {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 250px;
	height: 120px;
	font-size: 10px;
	color: var(--borg-green);
	opacity: 0.5;
	overflow: hidden;
	pointer-events: none;
	line-height: 1.2;
	text-shadow: 0 0 5px var(--borg-green);
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black);
	mask-image: linear-gradient(to bottom, transparent, black 20%, black);
}

/* FX */
.radar-ring {
	stroke: var(--borg-green);
	stroke-width: 1;
	fill: none;
	opacity: 0;
	pointer-events: none;
}

.radar-active {
	animation: radarSweep 8s infinite linear;
}

@keyframes radarSweep {
	0% {
		r: 0;
		opacity: 0.5;
	}
	100% {
		r: 800;
		opacity: 0;
	}
}

.ghost-element {
	opacity: 0.12;
	pointer-events: none;
}

.data-pulse {
	opacity: 0;
	animation: pulseFade 1s forwards;
}

@keyframes pulseFade {
	to {
		opacity: 1;
	}
}

.path-highlight {
	stroke-width: 5px !important;
	stroke: #fff !important;
	opacity: 1 !important;
	filter: drop-shadow(0 0 8px var(--borg-green)) !important; /* Extra Glühen */
	transition: all 0.2s ease;
}

/* font */
.borg-script {
	position: absolute;
	display: flex;
	gap: 15px;
	filter: drop-shadow(0 0 4px var(--borg-green));
	opacity: 0.7;
}

.left-column {
	left: 40px;
	top: 20%;
	flex-direction: column;
}

.right-row {
	right: 60px;
	top: 50px;
	flex-direction: row;
}

/* Basis für ein Schriftzeichen-Modul */
.glyph {
	position: relative;
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: glyphFlicker 4s infinite alternate;
}

/* Die verschiedenen mathematischen Kreisformen der Borg */
.char-circle {
	width: 100%;
	height: 100%;
	border: 2px solid var(--borg-green);
	border-radius: 50%;
}

.char-circle.broken {
	border-bottom-color: transparent;
	animation: spinGlyph 8s linear infinite;
}

.char-arc {
	width: 100%;
	height: 100%;
	border: 2px solid transparent;
	border-radius: 50%;
}
.char-arc.top { border-top-color: var(--borg-green); }
.char-arc.bottom { border-bottom-color: var(--borg-green); }
.char-arc.left { border-left-color: var(--borg-green); }
.char-arc.right { border-right-color: var(--borg-green); }

.char-dot {
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: var(--borg-green);
	border-radius: 50%;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
}

.char-dot.inner {
	right: auto;
	top: auto;
	transform: none;
	width: 4px;
	height: 4px;
}

/* Text-Animationen für das Interface-Feeling */
@keyframes glyphFlicker {
	0%, 90%, 100% { opacity: 0.8; }
	93%, 97% { opacity: 0.3; }
}

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

.pulse {
	animation: pulseGlyph 2s infinite ease-in-out;
}

@keyframes pulseGlyph {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(0.8); opacity: 0.5; }
}

.terminal-status {
	position: absolute;
	bottom: 30px;
	color: var(--borg-green);
	font-size: 12px;
	letter-spacing: 2px;
	opacity: 0.6;
	text-shadow: 0 0 5px var(--borg-green);
}

.interactive-text {
	cursor: pointer;
	color: var(--borg-green);
	font-weight: bold;
	padding: 0 5px;
	transition: all 0.2s ease;
}

.interactive-text:hover {
	background-color: var(--borg-green);
	color: #000;
	text-shadow: none;
}


.burst-pulse {
	fill: #ffffff !important;               /* Strahlendes Weiß im Kern */
	stroke: var(--borg-green) !important;   /* Grüner border */
	stroke-width: 1px;
	opacity: 1 !important;
	filter: drop-shadow(0 0 4px var(--borg-green)) !important; /* Intensiver Borg-Glow */
	z-index: 10;
}


.burst-pulse-css {
	fill: #ffffff !important;
	stroke: var(--borg-green) !important;
	stroke-width: 1.5px;
	filter: drop-shadow(0 0 5px var(--borg-green)) !important;

	animation: moveAlongPath 0.5s linear forwards;
}

@keyframes moveAlongPath {
	from {
		offset-distance: 0%;
	}
	to {
		offset-distance: 100%;
	}
}