@import url('../default.css');

body.changelog-page {
	margin: 0;
	min-height: 100vh;

	color: var(--text);
	font-family: 'VCR OSD Mono', monospace;
	letter-spacing: 0.8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 18px 48px;
}

.page-header {
	width: min(900px, 100%);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid var(--border);
	background: var(--panel);
	margin-bottom: 30px;
}

.page-title {
	margin: 0;
	font-size: 2.4rem;
	color: var(--accent);
	text-shadow: 0 0 6px rgba(217, 74, 92, 0.35);
}

.back-btn {
	text-decoration: none;
	color: var(--accent);
	border: 2px solid var(--accent);
	padding: 8px 16px;
	background: var(--panel2);
	font-size: 0.9em;
	letter-spacing: 1.2px;
	transition: all 0.3s ease;
	text-shadow: 0 0 6px rgba(255, 59, 88, 0.35);
}

.back-btn:hover {
	background-color: var(--accent);
	color: var(--bg);
	text-shadow: none;
	box-shadow: 0 0 20px rgba(255, 59, 88, 0.5);
}

/* Layout */
.changelog-layout {
	width: min(900px, 100%);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.changelog-cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Cards */
.changelog-card {
	background: var(--panel2);
	border: 2px solid var(--border);
	padding: 0;
	transition: all 0.3s ease;
	overflow: hidden;
}

.changelog-card:hover {
	border-color: var(--accent);
	box-shadow: 0 0 20px rgba(255, 59, 88, 0.15);
}

.changelog-card.highlight {
	border-color: var(--accent);
	box-shadow: 0 0 30px rgba(255, 59, 88, 0.3);
	animation: cardHighlight 2s ease-out;
}

@keyframes cardHighlight {
	0% { box-shadow: 0 0 40px rgba(255, 59, 88, 0.5); }
	100% { box-shadow: 0 0 20px rgba(255, 59, 88, 0.15); }
}

.card-header {
	padding: 18px 22px;
	border-bottom: 1px solid var(--border);
	background: var(--panel);
}

.card-date {
	display: block;
	color: var(--accent);
	font-size: 0.85em;
	letter-spacing: 1px;
	margin-bottom: 6px;
	text-shadow: 0 0 4px rgba(255, 59, 88, 0.3);
}

.card-title {
	margin: 0;
	font-size: 1.4rem;
	color: var(--text);
	letter-spacing: 0.5px;
}

.card-body {
	padding: 18px 22px;
	line-height: 1.6;
	font-size: 0.95rem;
	color: var(--muted);
}

.card-body ul {
	margin: 8px 0;
	padding-left: 20px;
}

.card-body li {
	margin-bottom: 4px;
}

.card-body strong {
	color: var(--text);
}

.card-body em {
	color: var(--accent);
}

.card-body h1,
.card-body h2,
.card-body h3 {
	color: var(--accent);
	margin: 12px 0 6px;
}

/* Scrollbar */
body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-track {
	background: rgba(10, 10, 18, 0.6);
}

body::-webkit-scrollbar-thumb {
	background: rgba(255, 59, 88, 0.45);
	border: 2px solid rgba(10, 10, 18, 0.6);
}

@media (max-width: 900px) {
	.page-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.page-title {
		font-size: 1.8rem;
	}

	.card-title {
		font-size: 1.2rem;
	}
}