/* ── K-ENGINE :: retro-terminal landing ──────────────────────────── */
:root {
	--bg:      #0a0e0a;
	--fg:      #33ff66;       /* phosphor green */
	--dim:     #1f8a3d;
	--amber:   #ffb000;
	--muted:   #2a552f;
	--accent:  #7dffaf;
	--font: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono",
	        "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: clamp(13px, 1.6vw, 16px);
	line-height: 1.6;
	letter-spacing: 0.02em;
	display: flex;
	flex-direction: column;
	align-items: center;          /* horizontal centering */
	padding: 2rem 1rem;
}

/* Fixed-width wrapper so long content can't skew the centering.
   margin-block:auto centers vertically when short, top-aligns when tall. */
.crt {
	width: min(46rem, 100%);
	margin-block: auto;
}

@media (prefers-reduced-motion: no-preference) {
	body::before {
		/* subtle CRT scanlines */
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		background: repeating-linear-gradient(
			to bottom,
			rgba(0,0,0,0) 0,
			rgba(0,0,0,0) 2px,
			rgba(0,0,0,0.18) 3px
		);
		z-index: 9;
	}
}

.screen {
	width: 100%;
	text-shadow: 0 0 4px rgba(51,255,102,0.35);
}

/* ── Logo ── */
.logo {
	color: var(--accent);
	font-size: clamp(6px, 1.7vw, 12px);
	line-height: 1.1;
	margin: 0 0 1rem;
	overflow-x: auto;
	white-space: pre;
}

.tagline {
	color: var(--amber);
	margin: 0 0 2rem;
	font-size: 1rem;
}

.cursor {
	display: inline-block;
	background: var(--amber);
	color: var(--bg);
	width: 0.6em;
	margin-left: 0.1em;
	animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ── BBS menu ── */
.menu {
	margin: 0 0 2.5rem;
	white-space: nowrap;
	overflow-x: auto;
}
.menu-head, .menu-foot { color: var(--dim); }

.entry {
	display: flex;
	align-items: baseline;
	gap: 0.6ch;
	padding: 0.15rem 0.5rem;
	color: var(--fg);
	text-decoration: none;
	border-left: 2px solid transparent;
}
.entry:hover, .entry:focus {
	background: rgba(51,255,102,0.08);
	border-left-color: var(--amber);
	outline: none;
}
.entry .key { color: var(--amber); }
.entry .name { color: var(--accent); }
.entry .dots {
	flex: 1;
	border-bottom: 1px dotted var(--muted);
	transform: translateY(-0.25em);
	min-width: 2ch;
}
.status { font-size: 0.85em; padding: 0 0.5ch; }
.status.wip  { color: var(--amber); }
.status.soon { color: var(--muted); }
.status.live { color: var(--fg); font-weight: 700; }

/* ── Cards ── */
.card {
	border: 1px solid var(--muted);
	border-radius: 2px;
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
	background: rgba(51,255,102,0.03);
}
.card h2 { margin: 0 0 0.5rem; color: var(--accent); font-size: 1.05rem; }
.card p  { margin: 0; color: var(--fg); }
.card em { color: var(--muted); font-style: normal; }
.card .links { margin-top: 0.6rem; font-size: 0.9em; }
.card .links a { color: var(--amber); text-decoration: none; }
.card .links a:hover { text-decoration: underline; }
.card code {
	background: rgba(51,255,102,0.1);
	padding: 0.05em 0.4ch;
	border-radius: 2px;
}

/* ── Status bar ── */
.status-bar {
	margin-top: 2.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--muted);
	color: var(--muted);
	font-size: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5ch;
	align-items: center;
}
.status-bar .sep { color: var(--dim); }
.status-bar a { color: var(--amber); text-decoration: none; }
.status-bar a:hover { text-decoration: underline; }

:target { scroll-margin-top: 1rem; }

/* ── Devlog ── */
.crumb { margin: 0 0 1rem; font-size: 0.9rem; }
.crumb a, .status-bar a[href="/"] { color: var(--amber); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.logo--sm { font-size: clamp(5px, 1.4vw, 10px); color: var(--accent); }

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

.post {
	border: 1px solid var(--muted);
	border-left: 2px solid var(--dim);
	border-radius: 2px;
	padding: 1rem 1.25rem 1.25rem;
	background: rgba(51,255,102,0.03);
}
.post-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1ch;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px dotted var(--muted);
}
.post-date { color: var(--muted); font-size: 0.85rem; }
.post-project {
	color: var(--amber);
	font-size: 0.75rem;
	border: 1px solid var(--dim);
	padding: 0 0.6ch;
	border-radius: 2px;
}
.post-title { margin: 0; flex-basis: 100%; font-size: 1.1rem; }
.post-title a { color: var(--accent); text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post p { margin: 0 0 0.75rem; }
.post p:last-child { margin-bottom: 0; }
.post-video {
	width: 100%;
	margin-top: 0.75rem;
	border: 1px solid var(--muted);
	border-radius: 2px;
	background: #000;
}
.empty { color: var(--muted); }