/* ---------- global backdrop ---------- */
html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: system-ui, sans-serif;
	background: radial-gradient(ellipse at top, #222 0%, #111 100%);
	color: #f5f5f5;
	overflow: hidden;
}
#FamilyChart {
	width: 100vw;
	height: 100vh;
}

/* ---------- card styling ---------- */
.f3-card rect {
	fill: #262626;
	stroke: #00eaff;
	stroke-width: 1.2px;
	rx: 12px;
	ry: 12px;
	transition: filter 0.2s ease;
}
.f3-card:hover rect {
	filter: drop-shadow(0 0 10px #00eaff);
}

/* name & birthday text (SVG) */
.f3-card .card-label .name {
	font-weight: 600;
	color: #fff;
}

/* Birthday cake icon positioned at top right corner */
.f3-card {
	position: relative;
}

.birthday-cake-corner {
	position: absolute;
	top: -35px;
	width: 170px;
	height: 24px;
	z-index: 10;
	pointer-events: none;
	opacity: 0.8;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.birthday-cake-corner svg {
	width: 100%;
	height: 100%;
}

.f3-card:hover .birthday-cake-corner {
	opacity: 1;
	transform: scale(1.1);
}

/* ---------- link (edge) styling ---------- */
.f3-link path {
	stroke: #00eaff;
	stroke-width: 2px;
	stroke-opacity: 0.65;
}
.f3-link path.active {
	stroke-opacity: 1;
	stroke-width: 3px;
}

/* ---------- entrance animation ---------- */
@keyframes fadeSlide {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.f3-card.animate-in {
	animation: fadeSlide 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* hide birth year unless the card is hovered */
.f3-card .card-label .birth {
	display: none !important; /* hidden by default */
}

.f3-card:hover .card-label .birth {
	display: block !important; /* show on hover */
}

/* ---------- people count badge ---------- */
.people-count-badge {
	position: fixed;
	top: 20px;
	right: 20px;
	background: rgba(0, 234, 255, 0.9);
	color: #111;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	backdrop-filter: blur(10px);
	border: 2px solid rgba(0, 234, 255, 0.3);
	z-index: 1000;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
}

.people-count-badge:hover {
	background: rgba(0, 234, 255, 1);
	transform: scale(1.05);
}

/* Slot machine styling */
.slot-machines {
	display: flex;
	gap: 2px;
	margin-right: 6px;
}

.slot-machine {
	position: relative;
	width: 24px;
	height: 24px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.slot-numbers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slot-number {
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	font-size: 16px;
}

.people-text {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: inline;
	margin-left: 2px;
}

.people-text::before {
	content: "👥 ";
	font-size: 14px;
}