/* ==========================================================================
   Pixel / Minecraft theme layer for hendrydong.github.io
   Loaded AFTER custom.css. Self-contained and reversible: delete the single
   <link> to assets/css/pixel.css in index.html to return to the clean theme.
   Everything blocky: pixel fonts, hard edges, beveled panels, stepped motion.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Pixelify+Sans:wght@400;500;600;700&family=Press+Start+2P&display=swap');

:root {
	--px-font:     "Pixelify Sans", "Segoe UI", monospace;
	--px-display:  "Press Start 2P", "Pixelify Sans", monospace;
	--px-body:     "DotGothic16", "Segoe UI", sans-serif;  /* readable bitmap pixel */
	--px-line:     #23272e;          /* dark block outline */
	--px-hi:       rgba(255,255,255,.55);  /* top-left highlight bevel */
	--px-sh:       rgba(0,0,0,.28);        /* bottom-right shadow bevel */
	--px-drop:     4px 4px 0 rgba(20,24,32,.16);
}

/* --- Everything is a block: kill all rounded corners ---------------------- */
*, *::before, *::after { border-radius: 0 !important; }

/* --- Pixel type ---------------------------------------------------------- */
#main > section#top > .container > header > h2,
#main > section#top > .container > header > h2 strong {
	font-family: var(--px-display);
	font-weight: 400;
	letter-spacing: 0;
}
#logo h1#title,
#main > section > .container > header > h2,
#research h3, #teaching h3,
.news-container h3,
#nav ul li a span,
.pub-list li > strong:first-child,
.hero-sub,
.news-date, .show-more,
.pub-list li a[href],
.teaching-list li strong, .awards-list li strong,
.service-list {
	font-family: var(--px-font);
}
/* Pixelify is tall & light — bump weight so headings read as solid blocks */
#main > section > .container > header > h2,
#research h3, #teaching h3,
.news-container h3,
.pub-list li > strong:first-child { font-weight: 600; }

/* Body text uses DotGothic16 — a true bitmap font that reads as clearly
   "pixel" while staying legible for dense author lists (VT323 looked too
   smooth). Nudge size up a touch and keep the line-height open. */
body, input, textarea, select {
	font-family: var(--px-body);
	font-weight: 400;
	letter-spacing: 0;
}
#about > .container > p,
#research > .container > p,
#contact .container p,
.news-item,
.teaching-list li, .awards-list li, .service-list li,
.pub-list li i, .pub-list li font strong { font-size: 1.06em; line-height: 1.7; }

/* Hero name: Press Start 2P is chunky, so scale it down and give it room */
#top h2.alt {
	font-size: clamp(1.5rem, 4.4vw, 2.15rem) !important;
	line-height: 1.5 !important;
	text-shadow: 3px 3px 0 rgba(0,0,0,.45);
}
.hero-sub { letter-spacing: .02em; }

/* Blinking block cursor after the subtitle — classic terminal/pixel touch */
.hero-sub::after {
	content: "\2588";
	margin-left: .18em;
	color: var(--accent);
	animation: px-blink 1s steps(1, end) infinite;
}

/* --- Beveled block panels (cards, news, list rows) ------------------------ */
.pub-list li,
.news-container,
.teaching-list li:hover,
.awards-list li:hover {
	border: 3px solid var(--px-line);
	box-shadow:
		inset 2px 2px 0 var(--px-hi),
		inset -2px -2px 0 var(--px-sh),
		var(--px-drop);
}
.pub-list li { transition: none; }        /* snap, don't glide */
.pub-list li:hover {
	transform: translate(-2px, -2px);
	border-left-color: var(--px-line);
	box-shadow:
		inset 2px 2px 0 var(--px-hi),
		inset -2px -2px 0 var(--px-sh),
		6px 6px 0 rgba(20,24,32,.18);
}

/* --- Block buttons / pills with a tactile "press" ------------------------ */
.pub-list li a[href],
.show-more {
	border: 2px solid var(--px-line);
	box-shadow:
		inset 1.5px 1.5px 0 var(--px-hi),
		inset -1.5px -1.5px 0 var(--px-sh);
	transition: none;
}
.pub-list li a[href]:hover,
.show-more:hover {
	transform: translate(1px, 1px);      /* pressed into the page */
	box-shadow:
		inset -1.5px -1.5px 0 var(--px-hi),
		inset 1.5px 1.5px 0 var(--px-sh);
}

/* --- Date pill reads as an inset stone tag ------------------------------- */
.news-date {
	border: 2px solid var(--px-line);
	box-shadow: inset 1px 1px 0 var(--px-hi), inset -1px -1px 0 var(--px-sh);
}

/* --- Section heading underline → a row of pixel blocks ------------------- */
#main > section > .container > header > h2::after {
	height: 8px;
	width: 4.5em;
	background: var(--accent);
	background-image: repeating-linear-gradient(90deg,
		var(--accent) 0 8px, transparent 8px 14px);
}

/* --- Sidebar: stone-block edge + blocky nav ----------------------------- */
#header { box-shadow: inset -3px 0 0 rgba(0,0,0,.35); }
#nav ul li a { margin: 2px .6em; border: 2px solid transparent; }
#nav ul li a:hover { border-color: rgba(255,255,255,.12); }
#nav ul li a.active {
	border-color: rgba(0,0,0,.4);
	box-shadow: inset 2px 2px 0 rgba(255,255,255,.14),
		inset -2px -2px 0 rgba(0,0,0,.4);
}

/* --- Avatar: square "player head" with a bevel + gentle bob ------------- */
#header .image.avatar48,
#header .image.avatar48 img {
	image-rendering: pixelated;
	box-shadow: none;
}
#header .image.avatar48 {
	border: 3px solid #12151a;
	box-shadow: inset 2px 2px 0 rgba(255,255,255,.25),
		inset -2px -2px 0 rgba(0,0,0,.45);
}
#logo .image { animation: px-bob 1.9s steps(1, end) infinite; }

/* --- Social icons become little item slots ------------------------------ */
#header .icons a {
	border: 2px solid rgba(255,255,255,.14);
	box-shadow: inset 1px 1px 0 rgba(255,255,255,.12),
		inset -1px -1px 0 rgba(0,0,0,.4);
}
#header .icons a:hover { transform: translate(1px, 1px); }

/* --- Keyframes (stepped for a low-framerate, pixel feel) ----------------- */
@keyframes px-bob {
	0%   { transform: translateY(0); }
	20%  { transform: translateY(-2px); }
	40%  { transform: translateY(-4px); }
	60%  { transform: translateY(-4px); }
	80%  { transform: translateY(-2px); }
	100% { transform: translateY(0); }
}
@keyframes px-blink {
	0%, 50%      { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

/* --- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#logo .image { animation: none; }
	.hero-sub::after { animation: none; opacity: 1; }
}

/* --- Pixel arcade (Flappy / Dino / Tetris switcher) --------------------- */
#arcade .container { text-align: center; }
.arcade-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.arcade-tab {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: var(--px-font); font-weight: 600; font-size: 15px;
	color: var(--ink-700) !important; background-color: var(--bg); background-image: none;
	border: 3px solid var(--px-line); padding: 7px 16px;
	min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
	box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-sh), 3px 3px 0 rgba(20, 24, 32, .16);
}
.arcade-tab:hover { transform: translate(1px, 1px); }
.arcade-tab.is-active {
	color: #fff !important; background: var(--accent);
	box-shadow: inset -2px -2px 0 var(--px-hi), inset 2px 2px 0 var(--px-sh);
	transform: translate(1px, 1px);
}
.arcade-stage { display: flex; justify-content: center; }
.game-panel[hidden] { display: none; }
.game-wrap {
	position: relative; display: inline-block; line-height: 0;
	border: 3px solid var(--px-line);
	box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-sh), var(--px-drop);
}
#flappy, #dino, #tetris {
	display: block; height: auto; image-rendering: pixelated;
	cursor: pointer; outline: none; touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
#flappy { width: 300px; max-width: 78vw; background: #8ecae6; }
#dino { width: 460px; max-width: 90vw; background: #dff0f7; }
#tetris { width: 132px; max-width: 44vw; background: #1a1f27; }
#flappy:focus-visible, #dino:focus-visible, #tetris:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.game-score {
	position: absolute; top: 8px; left: 0; right: 0;
	font-family: var(--px-display); font-size: 18px; color: #fff;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .5); pointer-events: none;
}
.game-msg {
	position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
	font-family: var(--px-font); font-weight: 600; font-size: 15px; line-height: 1.5;
	color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); pointer-events: none; padding: 0 12px;
}
.dino-wrap .game-score, .dino-wrap .game-msg { color: var(--ink-800); text-shadow: 1px 1px 0 rgba(255, 255, 255, .75); }
.game-cap { margin: 14px 0 0 0 !important; font-size: .95em; color: var(--ink-500); }
.game-cap span { color: var(--accent-700); }
.tetris-layout { display: inline-flex; align-items: flex-start; gap: 14px; text-align: left; }
.tetris-side { font-family: var(--px-font); font-weight: 600; color: var(--ink-700); font-size: 14px; line-height: 1.5; }
.tetris-side > div { margin-bottom: 12px; }
.tetris-side span { font-family: var(--px-display); font-size: 15px; color: var(--accent-700); }
.tetris-help { font-weight: 400; color: var(--ink-500); font-size: 12px; line-height: 1.7; }
.tetris-dpad { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dbtn {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: var(--px-font); font-weight: 600; font-size: 18px; line-height: 1;
	min-width: 48px; min-height: 46px; padding: 6px 10px;
	color: var(--ink-700) !important; background-color: var(--bg); background-image: none;
	border: 3px solid var(--px-line); cursor: pointer;
	box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-sh), 3px 3px 0 rgba(20, 24, 32, .16);
	touch-action: manipulation; -webkit-user-select: none; user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.dbtn:active { transform: translate(1px, 1px); box-shadow: inset -2px -2px 0 var(--px-hi), inset 2px 2px 0 var(--px-sh); }
.dbtn-wide { min-width: 74px; font-size: 14px; }

/* --- Mobile ------------------------------------------------------------- */
@media screen and (max-width: 736px) {
	#top h2.alt { font-size: clamp(1.15rem, 6vw, 1.6rem) !important; }
	.arcade-tab { font-size: 13px; padding: 6px 12px; }
}