/* ==========================================================================
   Changelog Styles
   ========================================================================== */

.changelog {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.changelog-entry {
	background-color: #1e1e1e;
	border-radius: 8px;
	padding: 1.5rem;
	border-left: 4px solid #27ae60;
}

.changelog-version {
	font-size: 1.2rem;
	font-weight: bold;
	color: #e67e22;
	display: inline-block;
}

.changelog-date {
	font-size: 0.9rem;
	color: #888;
	display: inline-block;
	margin-left: 1rem;
}

.changelog-items {
	list-style: none;
	margin-top: 1rem;
}

.changelog-items li {
	padding: 0.5rem 0;
	color: #e0e0e0;
	border-bottom: 1px solid #3a3a3a;
}

.changelog-items li:last-child {
	border-bottom: none;
}

.change-type {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	margin-right: 0.5rem;
}

.change-type.added {
	background-color: #1a3a1a;
	color: #27ae60;
	border: 1px solid #27ae60;
}

.change-type.changed {
	background-color: #3a2a1a;
	color: #e67e22;
	border: 1px solid #e67e22;
}

.change-type.fixed {
	background-color: #1a2a3a;
	color: #3498db;
	border: 1px solid #3498db;
}

.change-type.removed {
	background-color: #3a1a1a;
	color: #e74c3c;
	border: 1px solid #e74c3c;
}

/* ==========================================================================
   Credits Styles
   ========================================================================== */

.credits {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.credits-group {
	background-color: #1e1e1e;
	border-radius: 8px;
	padding: 1.5rem;
	border-left: 4px solid #e67e22;
}

.credits-group-title {
	font-size: 1.1rem;
	font-weight: bold;
	color: #e67e22;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.9rem;
}

.credits-list {
	list-style: none;
}

.credits-list li {
	padding: 0.6rem 0;
	border-bottom: 1px solid #3a3a3a;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.credits-list li:last-child {
	border-bottom: none;
}

.credit-name {
	color: #e0e0e0;
	font-weight: bold;
}

.credit-links {
	display: inline-flex;
	gap: 0.5rem;
	margin-left: auto;
}

.credit-links a {
	color: #27ae60;
	text-decoration: none;
	font-size: 0.85rem;
	padding: 0.2rem 0.6rem;
	background-color: #1a2c1a;
	border: 1px solid #27ae60;
	border-radius: 4px;
	transition: all 0.3s;
}

.credit-links a:hover {
	background-color: #27ae60;
	color: white;
}

.credit-note {
	color: #888;
	font-style: italic;
	font-size: 0.9rem;
}

@media (max-width: 768px) {
	.credits-list li {
		flex-direction: column;
		align-items: flex-start;
	}

	.credit-links {
		margin-left: 0;
		margin-top: 0.5rem;
	}
}