diff --git a/app/now/loading.tsx b/app/now/loading.tsx
index 899bf3c..4ca221e 100644
--- a/app/now/loading.tsx
+++ b/app/now/loading.tsx
@@ -75,8 +75,15 @@ export default function Loading() {
             </div>
           </section>
 
-          <section className="border-b border-site-border-subtle py-16">
+          <section className="pt-16">
             <SectionHeader />
+            <div className="grid grid-cols-3 gap-3 sm:grid-cols-5 lg:gap-6">
+              <Skeleton className="aspect-[2/3]" />
+              <Skeleton className="aspect-[2/3]" />
+              <Skeleton className="aspect-[2/3]" />
+              <Skeleton className="aspect-[2/3]" />
+              <Skeleton className="aspect-[2/3]" />
+            </div>
           </section>
         </div>
       </main>
diff --git a/app/now/page.tsx b/app/now/page.tsx
index 796a7fe..7ab9bcb 100644
--- a/app/now/page.tsx
+++ b/app/now/page.tsx
@@ -3,7 +3,6 @@ import Link from 'next/link';
 import { PageWrapper } from '../components/PageWrapper';
 import { faSpotify } from '@fortawesome/free-brands-svg-icons';
 import {
-  faArrowRight,
   faBullseye,
   faCode,
   faGamepad,
@@ -20,7 +19,6 @@ import {
   ActivityFeed,
   ArtistCard,
   CodingRhythm,
-  FeaturedTrack,
   GameCard,
   LanguageStack,
   LolLiveGame,
@@ -29,11 +27,7 @@ import {
   StarredRepos,
 } from '@/features/now/components';
 import { getGithubDev, getGithubStarred } from '@/lib/github';
-import {
-  getLastfmRecentStats,
-  getLastfmTopArtists,
-  getLastfmTopTracks,
-} from '@/lib/lastfm';
+import { getLastfmRecentStats, getLastfmTopArtists } from '@/lib/lastfm';
 import { getLolLiveGame } from '@/lib/lol';
 import { SITE_NAME, SITE_URL } from '@/lib/site';
 import { getSteamGames } from '@/lib/steam';
@@ -106,20 +100,12 @@ type LastfmData = {
   tracks: LastfmTrack[];
 };
 
-const computeTrackData = (topTracks: LastfmTrack[], lastfm: LastfmData) => {
-  const recentTracks = getUniqueTracks(
-    [lastfm.lastPlayed, ...lastfm.tracks].filter(Boolean) as LastfmTrack[],
+const computeTrackData = (lastfm: LastfmData) =>
+  getUniqueTracks(
+    [lastfm.nowPlaying, lastfm.lastPlayed, ...lastfm.tracks].filter(
+      Boolean,
+    ) as LastfmTrack[],
   );
-  const featuredTrack = topTracks[0] ?? recentTracks[0];
-  const recentTrackList = featuredTrack
-    ? recentTracks.filter(
-        (track) =>
-          track.name !== featuredTrack.name ||
-          track.artist !== featuredTrack.artist,
-      )
-    : recentTracks;
-  return { recentTracks, featuredTrack, recentTrackList };
-};
 
 const getUniqueTracks = (tracks: LastfmTrack[]) => {
   const seen = new Set<string>();
@@ -135,29 +121,30 @@ const getUniqueTracks = (tracks: LastfmTrack[]) => {
 };
 
 export default async function NowPage() {
-  const [lastfm, artists, topTracks, dev, steam, starred, lolLiveGame] =
-    await Promise.all([
+  const [lastfm, artists, dev, steam, starred, lolLiveGame] = await Promise.all(
+    [
       getLastfmRecentStats().catch(() => ({
         nowPlaying: null,
         lastPlayed: null,
         tracks: [],
       })),
       getLastfmTopArtists({ period: '1month' }).catch(() => []),
-      getLastfmTopTracks({ period: '1month' }).catch(() => []),
       getGithubDev().catch(() => null),
-      getSteamGames().catch(() => ({ games: [], source: 'recent' as const })),
+      getSteamGames().catch(() => ({
+        games: [],
+        source: 'recent' as const,
+        updatedAt: null,
+      })),
       getGithubStarred().catch(() => []),
       getLolLiveGame().catch(() => null),
-    ]);
+    ],
+  );
 
   const hasDevData = Boolean(
     dev && (dev.rhythm || dev.languages.length > 0 || dev.activity.length > 0),
   );
 
-  const { featuredTrack, recentTrackList } = computeTrackData(
-    topTracks,
-    lastfm,
-  );
+  const recentTracks = computeTrackData(lastfm);
 
   return (
     <PageWrapper>
@@ -264,45 +251,19 @@ export default async function NowPage() {
               id="listening-title"
               title="No repeat do mês"
               subtitle={LISTENING_DESCRIPTION}
-              action={
-                <Link
-                  href="https://www.last.fm/user/johnenderson"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={SECTION_ACTION_CLASS}
-                >
-                  Ver no Last.fm →
-                </Link>
-              }
             />
 
             <div className="grid gap-12 lg:grid-cols-[1fr_32rem]">
-              <section
-                aria-labelledby="monthly-tracks-title"
-                className="flex h-full flex-col"
-              >
+              <section aria-labelledby="recent-tracks-title">
                 <h3
-                  id="monthly-tracks-title"
-                  className="m-0 mb-5 text-lg font-bold text-site-foreground"
-                >
-                  Trilha do mês
-                </h3>
-
-                {featuredTrack ? (
-                  <div className="mb-5 max-w-md">
-                    <FeaturedTrack track={featuredTrack} />
-                  </div>
-                ) : null}
-
-                <h4
                   id="recent-tracks-title"
-                  className="m-0 mb-3 text-sm font-bold uppercase tracking-[0.08em] text-site-body-muted"
+                  className="m-0 mb-5 text-lg font-bold text-site-foreground"
                 >
                   Mais recentes
-                </h4>
-                {recentTrackList.length > 0 ? (
-                  <ul className="m-0 flex max-w-md flex-1 list-none flex-col justify-between gap-2 p-0">
-                    {recentTrackList.slice(0, 4).map((track, index) => (
+                </h3>
+                {recentTracks.length > 0 ? (
+                  <ul className="m-0 flex max-w-md list-none flex-col gap-1 p-0">
+                    {recentTracks.slice(0, 7).map((track, index) => (
                       <RecentTrack
                         key={`${track.name}-${track.artist}-${
                           track.playedAt ?? track.url
@@ -314,9 +275,7 @@ export default async function NowPage() {
                   </ul>
                 ) : (
                   <p className="m-0 text-site-body-muted">
-                    {featuredTrack
-                      ? 'Sem outras músicas recentes para mostrar.'
-                      : 'Sem músicas recentes para mostrar.'}
+                    Sem músicas recentes para mostrar.
                   </p>
                 )}
               </section>
@@ -356,6 +315,17 @@ export default async function NowPage() {
                 )}
               </section>
             </div>
+
+            <div className="mt-6 flex justify-end">
+              <Link
+                href="https://www.last.fm/user/johnenderson"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={SECTION_ACTION_CLASS}
+              >
+                Ver no Last.fm →
+              </Link>
+            </div>
           </section>
 
           <section aria-labelledby="playing-title" className="pt-16">
@@ -370,6 +340,7 @@ export default async function NowPage() {
               id="playing-title"
               title="Provável recaída"
               subtitle={PLAYING_DESCRIPTION}
+              updatedAt={steam.updatedAt}
             />
 
             {lolLiveGame && (
@@ -382,48 +353,27 @@ export default async function NowPage() {
             )}
 
             {steam.games.length > 0 ? (
-              <div className="flex flex-col gap-5">
-                <div className="grid grid-cols-3 gap-3 sm:grid-cols-5 lg:gap-6">
-                  {steam.games.map((game) => (
-                    <GameCard key={game.appid} game={game} />
-                  ))}
-                </div>
-                <div className="flex justify-end">
-                  <Link
-                    href={STEAM_PROFILE_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-2 border-b border-site-primary pb-0.5 text-sm font-bold text-site-primary no-underline transition-colors hover:border-site-primary-hover hover:text-site-primary-hover"
-                  >
-                    Ver no Steam
-                    <FontAwesomeIcon
-                      icon={faArrowRight}
-                      aria-hidden="true"
-                      className="text-xs"
-                    />
-                  </Link>
-                </div>
+              <div className="grid grid-cols-3 gap-3 sm:grid-cols-5 lg:gap-6">
+                {steam.games.map((game) => (
+                  <GameCard key={game.appid} game={game} />
+                ))}
               </div>
             ) : (
-              <div className="flex items-center justify-between gap-4">
-                <p className="m-0 text-site-body-muted">
-                  Nenhum jogo para mostrar.
-                </p>
-                <Link
-                  href={STEAM_PROFILE_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 border-b border-site-primary pb-0.5 text-sm font-bold text-site-primary no-underline transition-colors hover:border-site-primary-hover hover:text-site-primary-hover"
-                >
-                  Steam fica aqui
-                  <FontAwesomeIcon
-                    icon={faArrowRight}
-                    aria-hidden="true"
-                    className="text-xs"
-                  />
-                </Link>
-              </div>
+              <p className="m-0 text-site-body-muted">
+                Nenhum jogo para mostrar.
+              </p>
             )}
+
+            <div className="mt-6 flex justify-end">
+              <Link
+                href={STEAM_PROFILE_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={SECTION_ACTION_CLASS}
+              >
+                {steam.games.length > 0 ? 'Ver no Steam' : 'Steam fica aqui'} →
+              </Link>
+            </div>
           </section>
         </div>
       </main>
diff --git a/app/page.tsx b/app/page.tsx
index 3c6f33b..707596b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,6 @@ import { AnimationLayout } from '@/base/components/Layout/AnimationLayout';
 import { Navbar } from '@/base/components/Navbar';
 import { ArticlesList } from '@/features/articles/components/ArticlesList';
 import { About } from '@/features/home/components/About';
-import { LastfmCard } from '@/features/home/components/Activity';
 import { DevPulse } from '@/features/home/components/DevPulse';
 import { Hero } from '@/features/home/components/Hero';
 import { ProjectsShowcase } from '@/features/home/components/Projects';
@@ -51,7 +50,6 @@ export default function Page() {
             <About />
             <DevPulse />
             <ProjectsShowcase />
-            <LastfmCard />
             <ArticlesList />
           </div>
         </main>
diff --git a/src/base/components/LiveDot.tsx b/src/base/components/LiveDot.tsx
new file mode 100644
index 0000000..b272ff5
--- /dev/null
+++ b/src/base/components/LiveDot.tsx
@@ -0,0 +1,7 @@
+/** Ponto pulsante "ao vivo" — usado no selo "ouvindo agora" da navbar e em listas de faixas. */
+export const LiveDot = ({ className = '' }: { className?: string }) => (
+  <span
+    aria-hidden="true"
+    className={`rounded-full bg-spotify motion-safe:animate-pulse ${className}`}
+  />
+);
diff --git a/src/base/components/Navbar/NowPlayingBadge.tsx b/src/base/components/Navbar/NowPlayingBadge.tsx
index 75adc9e..a88b301 100644
--- a/src/base/components/Navbar/NowPlayingBadge.tsx
+++ b/src/base/components/Navbar/NowPlayingBadge.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 
 import useSWR from 'swr';
 
+import { LiveDot } from '@/base/components/LiveDot';
 import { LastfmTrack } from '@/types/Lastfm';
 
 type NowPlayingResponse = {
@@ -49,13 +50,6 @@ const NowPlayingArt = ({
   );
 };
 
-const LiveDot = ({ className = '' }: { className?: string }) => (
-  <span
-    aria-hidden="true"
-    className={`rounded-full bg-spotify motion-safe:animate-pulse ${className}`}
-  />
-);
-
 type NowPlayingBadgeProps = {
   /** 'full' = capa + faixa + artista (desktop). 'compact' = só a capa (mobile). */
   variant: 'full' | 'compact';
diff --git a/src/base/components/SectionHeader/SectionHeader.tsx b/src/base/components/SectionHeader/SectionHeader.tsx
index 658e2e4..0f4763b 100644
--- a/src/base/components/SectionHeader/SectionHeader.tsx
+++ b/src/base/components/SectionHeader/SectionHeader.tsx
@@ -1,6 +1,10 @@
 import type { ReactNode } from 'react';
 
+import { faCalendarCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import { SectionIcon } from '@/base/components/SectionIcon';
+import { formatRelativeTime } from '@/lib/formatRelativeTime';
 
 /** Estilo único dos links de ação das seções ("Ver todos", "@usuario"…). */
 export const SECTION_ACTION_CLASS =
@@ -16,6 +20,8 @@ type SectionHeaderProps = {
   /** Link/ação alinhada à direita (ex.: "Ver todos"). */
   action?: ReactNode;
   className?: string;
+  /** ISO da última sincronização. Quando informado, mostra o selo "Atualizado há X". */
+  updatedAt?: string | null;
 };
 
 /**
@@ -30,6 +36,7 @@ export const SectionHeader = ({
   subtitle,
   action,
   className = '',
+  updatedAt,
 }: SectionHeaderProps) => (
   <header
     className={`mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 ${className}`}
@@ -48,6 +55,19 @@ export const SectionHeader = ({
           {subtitle}
         </p>
       ) : null}
+      {updatedAt ? (
+        <p className="m-0 mt-2 inline-flex items-center gap-1.5 rounded-full border border-site-border-subtle px-2.5 py-1 text-xs font-medium text-site-body-muted">
+          <FontAwesomeIcon
+            icon={faCalendarCheck}
+            aria-hidden="true"
+            className="text-sm"
+          />
+          Atualizado{' '}
+          <strong className="font-semibold text-site-foreground">
+            {formatRelativeTime(updatedAt)}
+          </strong>
+        </p>
+      ) : null}
     </div>
 
     {action ? <div className="shrink-0">{action}</div> : null}
diff --git a/src/features/home/components/Activity/LastfmCard.tsx b/src/features/home/components/Activity/LastfmCard.tsx
deleted file mode 100644
index 4bf9c7c..0000000
--- a/src/features/home/components/Activity/LastfmCard.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { CSSProperties, ReactNode, useState } from 'react';
-
-import useSWR from 'swr';
-
-import { Card } from '@/base/components/Card';
-import {
-  SECTION_ACTION_CLASS,
-  SectionHeader,
-} from '@/base/components/SectionHeader';
-import { LastfmStats, LastfmTrack } from '@/types/Lastfm';
-
-type LastfmNowPlayingResponse = {
-  nowPlaying: LastfmTrack | null;
-};
-
-const jsonFetcher = (url: string) => fetch(url).then((r) => r.json());
-
-const MusicIcon = ({ size = 18 }: { size?: number }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="2"
-    aria-hidden="true"
-  >
-    <path d="M9 18V5l12-2v13" />
-    <circle cx="6" cy="18" r="3" />
-    <circle cx="18" cy="16" r="3" />
-  </svg>
-);
-
-const DiscIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="18"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="2"
-    aria-hidden="true"
-  >
-    <circle cx="12" cy="12" r="10" />
-    <circle cx="12" cy="12" r="2" />
-    <path d="M7 12a5 5 0 0 1 5-5" />
-    <path d="M17 12a5 5 0 0 1-5 5" />
-  </svg>
-);
-
-const LiveBadge = () => (
-  <span className="inline-flex items-center gap-1.5 rounded-full border border-spotify/30 bg-spotify/10 px-2 py-0.5 text-xs font-semibold leading-5 text-spotify">
-    <span className="h-1.5 w-1.5 rounded-full bg-spotify motion-safe:animate-pulse" />{' '}
-    ao vivo
-  </span>
-);
-
-const FadeIn = ({
-  children,
-  className,
-  delay = 0,
-  duration = 300,
-}: {
-  children: ReactNode;
-  className?: string;
-  delay?: number;
-  duration?: number;
-}) => (
-  <div
-    className={['site-fade-in', className].filter(Boolean).join(' ')}
-    style={
-      {
-        '--fade-in-delay': `${delay}ms`,
-        '--fade-in-duration': `${duration}ms`,
-      } as CSSProperties
-    }
-  >
-    {children}
-  </div>
-);
-
-const TrackArtwork = ({
-  eager = false,
-  track,
-  size = 64,
-}: {
-  eager?: boolean;
-  track: LastfmTrack;
-  size?: number;
-}) => {
-  const [failed, setFailed] = useState(false);
-
-  if (!track.imageUrl || failed) {
-    return (
-      <div
-        className="flex shrink-0 items-center justify-center rounded bg-site-card-hover text-site-body-muted"
-        style={{ width: size, height: size }}
-      >
-        <MusicIcon size={Math.max(16, size / 2.5)} />
-      </div>
-    );
-  }
-
-  return (
-    <Image
-      src={track.imageUrl}
-      alt={track.album ?? track.name}
-      width={size}
-      height={size}
-      loading={eager ? 'eager' : 'lazy'}
-      priority={eager}
-      unoptimized
-      className="shrink-0 rounded transition-transform duration-200 group-hover:scale-[1.03] group-focus-within:scale-[1.03]"
-      style={{ width: size, height: size }}
-      onError={() => setFailed(true)}
-    />
-  );
-};
-
-const TrackRow = ({ track }: { track: LastfmTrack }) => (
-  <li className="interactive-row group flex min-w-0 items-center gap-3 rounded p-1">
-    <TrackArtwork track={track} size={40} />
-    <div className="flex min-w-0 flex-col">
-      <Link
-        href={track.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="truncate text-sm font-medium no-underline transition-colors hover:text-site-primary-hover focus-visible:text-site-primary-hover focus-visible:outline-none"
-        title={track.name}
-      >
-        {track.name}
-      </Link>
-      <p className="m-0 truncate text-xs text-site-body-muted">
-        {track.artist}
-      </p>
-    </div>
-  </li>
-);
-
-export const LastfmCard = () => {
-  const { data: nowPlayingData, isLoading: loadingNowPlaying } =
-    useSWR<LastfmNowPlayingResponse>('/api/lastfm/now-playing', jsonFetcher, {
-      revalidateOnFocus: false,
-    });
-  const { data: recent, isLoading: loadingRecent } = useSWR<LastfmStats>(
-    '/api/lastfm/recent',
-    jsonFetcher,
-    { revalidateOnFocus: false },
-  );
-
-  const loading = loadingNowPlaying || loadingRecent;
-  const lastfm: LastfmStats | null = recent
-    ? { ...recent, nowPlaying: nowPlayingData?.nowPlaying ?? null }
-    : null;
-
-  const featuredTrack = lastfm?.nowPlaying ?? lastfm?.lastPlayed ?? null;
-  const title = lastfm?.nowPlaying ? 'Ouvindo agora' : 'Última música';
-
-  return (
-    <section
-      id="activity"
-      className="mt-12 border-t border-site-border-subtle pt-12 md:mt-14 md:pt-14"
-    >
-      <SectionHeader
-        icon={<MusicIcon size={16} />}
-        title="Música"
-        action={
-          <Link
-            href="https://www.last.fm/user/johnenderson"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={SECTION_ACTION_CLASS}
-          >
-            Ver no Last.fm →
-          </Link>
-        }
-      />
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
-        <FadeIn className="col-span-1 md:col-span-2" duration={500}>
-          <Card interactive className="flex h-full flex-col gap-4 p-4 sm:p-5">
-            <div className="flex flex-wrap items-center justify-between gap-2">
-              <div className="flex items-center gap-2">
-                <h3 className="m-0 text-base font-semibold text-site-foreground">
-                  {title}
-                </h3>
-                <DiscIcon />
-              </div>
-              {lastfm?.nowPlaying ? <LiveBadge /> : null}
-            </div>
-
-            {loading && (
-              <div className="h-16 w-full animate-pulse rounded bg-site-card-hover" />
-            )}
-
-            {!loading && featuredTrack && (
-              <>
-                <div className="flex min-w-0 flex-1 items-center gap-3 sm:gap-4">
-                  <TrackArtwork eager track={featuredTrack} size={96} />
-                  <div className="flex min-w-0 flex-col gap-0.5">
-                    <Link
-                      href={featuredTrack.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="truncate text-lg font-bold no-underline transition-colors hover:text-site-primary-hover focus-visible:text-site-primary-hover focus-visible:outline-none"
-                      title={featuredTrack.name}
-                    >
-                      {featuredTrack.name}
-                    </Link>
-                    {featuredTrack.album && (
-                      <p className="m-0 truncate text-sm text-site-body">
-                        {featuredTrack.album}
-                      </p>
-                    )}
-                    <p className="m-0 truncate text-sm text-site-body-muted">
-                      {featuredTrack.artist}
-                    </p>
-                  </div>
-                </div>
-                <Link
-                  href={featuredTrack.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-auto w-fit text-xs font-medium text-site-body-muted no-underline transition-colors hover:text-site-primary-hover focus-visible:text-site-primary-hover focus-visible:outline-none"
-                >
-                  Ver no Last.fm
-                </Link>
-              </>
-            )}
-
-            {!loading && !featuredTrack && (
-              <p className="m-0 text-sm text-site-body-muted">
-                Nenhuma música recente encontrada.
-              </p>
-            )}
-          </Card>
-        </FadeIn>
-
-        <FadeIn className="col-span-1 md:col-span-2" delay={100} duration={500}>
-          <Card
-            interactive
-            className="flex h-full min-h-36 flex-col gap-4 p-4 sm:p-5"
-          >
-            <div className="flex items-center gap-2">
-              <h3 className="m-0 text-base font-semibold text-site-foreground">
-                Últimas faixas
-              </h3>
-              <MusicIcon />
-            </div>
-
-            {loading && (
-              <div className="space-y-3">
-                {[0, 1, 2].map((item) => (
-                  <div
-                    key={item}
-                    className="h-10 animate-pulse rounded bg-site-card-hover"
-                  />
-                ))}
-              </div>
-            )}
-
-            {!loading && lastfm && lastfm.tracks.length > 0 && (
-              <ul className="m-0 flex list-none flex-col gap-3 p-0">
-                {lastfm.tracks.slice(0, 4).map((track, index) => (
-                  <TrackRow
-                    key={`${track.name}-${track.artist}-${
-                      track.playedAt ?? track.url
-                    }-${index}`}
-                    track={track}
-                  />
-                ))}
-              </ul>
-            )}
-
-            {!loading && (!lastfm || lastfm.tracks.length === 0) && (
-              <p className="m-0 text-sm text-site-body-muted">
-                Sem histórico recente para mostrar.
-              </p>
-            )}
-          </Card>
-        </FadeIn>
-      </div>
-    </section>
-  );
-};
diff --git a/src/features/home/components/Activity/index.tsx b/src/features/home/components/Activity/index.tsx
deleted file mode 100644
index 32932e4..0000000
--- a/src/features/home/components/Activity/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { LastfmCard } from './LastfmCard';
diff --git a/src/features/now/components/CardTooltip.tsx b/src/features/now/components/CardTooltip.tsx
index 403915e..7d64328 100644
--- a/src/features/now/components/CardTooltip.tsx
+++ b/src/features/now/components/CardTooltip.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, useSyncExternalStore } from 'react';
+import { MouseEvent, ReactNode, useState, useSyncExternalStore } from 'react';
 
 import * as Tooltip from '@radix-ui/react-tooltip';
 
@@ -8,6 +8,9 @@ const subscribe = () => () => {};
 const getClientSnapshot = () => true;
 const getServerSnapshot = () => false;
 
+/** Sem hover de verdade (touch) — primeiro toque só mostra o tooltip, segundo toque navega. */
+const usesCoarsePointer = () => window.matchMedia('(hover: none)').matches;
+
 /**
  * Tooltip padrão dos cards de imagem da página /now.
  *
@@ -15,6 +18,7 @@ const getServerSnapshot = () => false;
  *  - delayDuration={300}  → abre após 300ms de hover (evita flashes ao passar o mouse)
  *  - skipDelayDuration={0} → se mover de um card para outro, abre imediatamente
  *  - disableHoverableContent → fecha ao sair do trigger, sem "entrar" no tooltip
+ *  - em telas de toque, o Root vira controlado e o primeiro tap intercepta a navegação
  */
 export const CardTooltip = ({
   children,
@@ -31,25 +35,45 @@ export const CardTooltip = ({
     getClientSnapshot,
     getServerSnapshot,
   );
+  const [tapOpen, setTapOpen] = useState(false);
 
   if (!isMounted) return children;
 
+  const isTouch = usesCoarsePointer();
+
+  const handleTriggerClick = (event: MouseEvent<HTMLElement>) => {
+    if (!isTouch) return;
+    if (tapOpen) {
+      setTapOpen(false);
+      return;
+    }
+    event.preventDefault();
+    setTapOpen(true);
+  };
+
   return (
     <Tooltip.Provider
       delayDuration={delayDuration}
       skipDelayDuration={0}
       disableHoverableContent
     >
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Root
+        {...(isTouch && { open: tapOpen, onOpenChange: setTapOpen })}
+      >
+        <Tooltip.Trigger asChild onClick={handleTriggerClick}>
+          {children}
+        </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content
             side="bottom"
             align="center"
             sideOffset={6}
-            className="z-20 w-max max-w-[18ch] rounded-md border border-site-border bg-site-popover px-3 py-2 text-center shadow-xl shadow-black/30 backdrop-blur-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1"
+            className="z-20 w-max max-w-[18ch] rounded-md border border-site-border bg-site-popover px-3 py-1.5 text-center shadow-xl shadow-black/30 backdrop-blur-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1"
           >
             {content}
+            <Tooltip.Arrow asChild>
+              <div className="size-2.5 rotate-45 rounded-[2px] bg-site-popover" />
+            </Tooltip.Arrow>
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
diff --git a/src/features/now/components/FeaturedTrack.tsx b/src/features/now/components/FeaturedTrack.tsx
deleted file mode 100644
index a876bf8..0000000
--- a/src/features/now/components/FeaturedTrack.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-
-import { faSpotify } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import { Card } from '@/base/components/Card';
-import { MusicFallback } from '@/features/now/components/MusicFallback';
-import { LastfmTrack } from '@/types/Lastfm';
-
-export const FeaturedTrack = ({ track }: { track: LastfmTrack }) => {
-  const spotifyHref =
-    track.imageSource === 'spotify' && track.spotifyUrl
-      ? track.spotifyUrl
-      : null;
-
-  return (
-    <Card
-      interactive
-      className="grid max-w-md grid-cols-[6.5rem_1fr] items-start gap-4 p-4 transition-colors hover:border-site-primary"
-    >
-      <Link
-        href={spotifyHref ?? track.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label={
-          spotifyHref
-            ? `Abrir ${track.name} no Spotify`
-            : `Abrir ${track.name} no Last.fm`
-        }
-        className="group/cover relative size-[6.5rem] overflow-hidden rounded bg-site-card-hover no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-site-primary"
-      >
-        {track.imageUrl ? (
-          <Image
-            src={track.imageUrl}
-            alt={track.album ?? track.name}
-            fill
-            priority
-            loading="eager"
-            unoptimized
-            sizes="104px"
-            className={`transition-transform duration-200 group-hover/cover:scale-[1.04] ${
-              track.imageSource === 'spotify'
-                ? 'object-contain'
-                : 'object-cover'
-            }`}
-          />
-        ) : (
-          <MusicFallback label={track.name} />
-        )}
-      </Link>
-      <div className="min-w-0">
-        <span className="block truncate text-xs font-bold uppercase leading-none tracking-[0.16em] text-site-primary">
-          Faixa mais tocada
-        </span>
-        <h3 className="m-0 mt-2">
-          <Link
-            href={track.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-block max-w-full truncate align-top text-xl font-bold leading-tight text-site-foreground no-underline decoration-transparent transition-colors hover:text-site-primary-hover focus-visible:text-site-primary-hover focus-visible:outline-none"
-          >
-            {track.name}
-          </Link>
-        </h3>
-        <p className="mb-0 mt-1 truncate text-sm font-semibold leading-tight text-site-body-muted">
-          {track.artist}
-        </p>
-        {track.album ? (
-          <p className="mb-0 mt-1 truncate text-xs font-medium leading-tight text-site-body-muted">
-            {track.album}
-          </p>
-        ) : null}
-        {track.playcount ? (
-          <p className="mb-0 mt-2 text-xs font-bold leading-tight text-site-primary">
-            {track.playcount} plays no mês
-          </p>
-        ) : null}
-        {track.imageSource === 'spotify' ? (
-          <p className="mb-0 mt-2 inline-flex items-center gap-1.5 text-xs font-medium leading-tight text-site-body-muted">
-            <FontAwesomeIcon
-              icon={faSpotify}
-              aria-label="Spotify"
-              role="img"
-              className="text-[#1DB954]"
-            />
-            Capa via Spotify
-          </p>
-        ) : null}
-      </div>
-    </Card>
-  );
-};
diff --git a/src/features/now/components/RecentTrack.tsx b/src/features/now/components/RecentTrack.tsx
index be7fe3a..707e8e7 100644
--- a/src/features/now/components/RecentTrack.tsx
+++ b/src/features/now/components/RecentTrack.tsx
@@ -1,9 +1,27 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { LiveDot } from '@/base/components/LiveDot';
 import { MusicFallback } from '@/features/now/components/MusicFallback';
 import { LastfmTrack } from '@/types/Lastfm';
 
+/** "23:35" se foi hoje, "26/08 23:35" caso contrário. */
+const formatPlayedAt = (playedAt: string) => {
+  const date = new Date(playedAt);
+  const time = date.toLocaleTimeString('pt-BR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  if (date.toDateString() === new Date().toDateString()) return time;
+
+  const day = date.toLocaleDateString('pt-BR', {
+    day: 'numeric',
+    month: 'numeric',
+  });
+  return `${day} ${time}`;
+};
+
 const TrackArtwork = ({
   track,
   priority = false,
@@ -52,6 +70,16 @@ export const RecentTrack = ({
           {track.artist}
         </p>
       </div>
+      <div className="ml-auto flex shrink-0 items-center gap-1.5 text-xs text-site-body-muted">
+        {track.nowPlaying ? (
+          <>
+            <span className="hidden sm:inline">Ouvindo agora</span>
+            <LiveDot className="size-2" />
+          </>
+        ) : track.playedAt ? (
+          <span>{formatPlayedAt(track.playedAt)}</span>
+        ) : null}
+      </div>
     </Link>
   </li>
 );
diff --git a/src/features/now/components/index.ts b/src/features/now/components/index.ts
index df1b42e..efe80ab 100644
--- a/src/features/now/components/index.ts
+++ b/src/features/now/components/index.ts
@@ -2,7 +2,6 @@ export { ActivityFeed } from './ActivityFeed';
 export { ArtistCard } from './ArtistCard';
 export { CardTooltip } from './CardTooltip';
 export { CodingRhythm } from './CodingRhythm';
-export { FeaturedTrack } from './FeaturedTrack';
 export { GameCard } from './GameCard';
 export { LanguageStack } from './LanguageStack';
 export { LolChampionCard } from './LolChampionCard';
diff --git a/src/lib/steam.ts b/src/lib/steam.ts
index 393f1f1..2f42635 100644
--- a/src/lib/steam.ts
+++ b/src/lib/steam.ts
@@ -13,8 +13,8 @@ const debugLog = (...args: unknown[]) => {
 const CACHE_TTL_RECENT = 60 * 60 * 24; // 24h
 // Top all-time: ranking de horas totais não muda do dia pra noite
 const CACHE_TTL_ALLTIME = 60 * 60 * 24 * 7; // 7 dias
-const CACHE_KEY_RECENT = 'steam:recently-played:v3'; // v3: descarta listas curtas gravadas antes do backfill
-const CACHE_KEY_ALLTIME = 'steam:alltime:v3'; // v3: descarta top all-time anterior ao backfill (sem Phasmophobia etc.)
+const CACHE_KEY_RECENT = 'steam:recently-played:v4'; // v4: payload passa a incluir updatedAt
+const CACHE_KEY_ALLTIME = 'steam:alltime:v4'; // v4: payload passa a incluir updatedAt
 
 /** Quantos cards a grade exibe — sempre completamos até esse número. */
 const TARGET_COUNT = 5;
@@ -51,6 +51,14 @@ export type SteamResult = {
   games: SteamGame[];
   /** 'recent' = jogados nas últimas 2 semanas; 'alltime' = mais jogados de todos os tempos */
   source: 'recent' | 'alltime';
+  /** ISO de quando a lista foi sincronizada com a Steam pela última vez; null se nunca sincronizou. */
+  updatedAt: string | null;
+};
+
+/** Payload cacheado — guarda o timestamp junto pra exibir "atualizado há X". */
+type SteamCachePayload = {
+  games: SteamGame[];
+  updatedAt: string;
 };
 
 type SteamApiGame = {
@@ -161,23 +169,26 @@ const fetchTopAllTime = async (
 const getRecentGames = async (
   userId: string,
   apiKey: string,
-): Promise<SteamGame[]> => {
-  const cached = await cacheGet<SteamGame[]>(CACHE_KEY_RECENT);
-  if (cached && cached.length > 0) {
-    debugLog(`cache hit (recent): ${cached.length} jogos`);
+): Promise<SteamCachePayload> => {
+  const cached = await cacheGet<SteamCachePayload>(CACHE_KEY_RECENT);
+  if (cached && cached.games.length > 0) {
+    debugLog(`cache hit (recent): ${cached.games.length} jogos`);
     return cached;
   }
 
   try {
     const recent = await fetchRecentlyPlayed(userId, apiKey);
     debugLog(`api recent: ${recent.length} jogos`);
-    if (recent.length > 0) {
-      await cacheSet(CACHE_KEY_RECENT, recent, CACHE_TTL_RECENT);
-    }
-    return recent;
+    if (recent.length === 0) return { games: [], updatedAt: '' };
+    const payload: SteamCachePayload = {
+      games: recent,
+      updatedAt: new Date().toISOString(),
+    };
+    await cacheSet(CACHE_KEY_RECENT, payload, CACHE_TTL_RECENT);
+    return payload;
   } catch (err) {
     debugLog('erro ao buscar recentes:', err);
-    return [];
+    return { games: [], updatedAt: '' };
   }
 };
 
@@ -185,23 +196,26 @@ const getRecentGames = async (
 const getAllTimeGames = async (
   userId: string,
   apiKey: string,
-): Promise<SteamGame[]> => {
-  const cached = await cacheGet<SteamGame[]>(CACHE_KEY_ALLTIME);
-  if (cached && cached.length > 0) {
-    debugLog(`cache hit (alltime): ${cached.length} jogos`);
+): Promise<SteamCachePayload> => {
+  const cached = await cacheGet<SteamCachePayload>(CACHE_KEY_ALLTIME);
+  if (cached && cached.games.length > 0) {
+    debugLog(`cache hit (alltime): ${cached.games.length} jogos`);
     return cached;
   }
 
   try {
     const alltime = await fetchTopAllTime(userId, apiKey);
     debugLog(`api alltime: ${alltime.length} jogos`);
-    if (alltime.length > 0) {
-      await cacheSet(CACHE_KEY_ALLTIME, alltime, CACHE_TTL_ALLTIME);
-    }
-    return alltime;
+    if (alltime.length === 0) return { games: [], updatedAt: '' };
+    const payload: SteamCachePayload = {
+      games: alltime,
+      updatedAt: new Date().toISOString(),
+    };
+    await cacheSet(CACHE_KEY_ALLTIME, payload, CACHE_TTL_ALLTIME);
+    return payload;
   } catch (err) {
     debugLog('erro ao buscar all-time:', err);
-    return [];
+    return { games: [], updatedAt: '' };
   }
 };
 
@@ -211,26 +225,34 @@ export const getSteamGames = async (): Promise<SteamResult> => {
 
   if (!apiKey || !userId) {
     debugLog('STEAM_API_KEY ou STEAM_USER_ID ausentes');
-    return { games: [], source: 'recent' };
+    return { games: [], source: 'recent', updatedAt: null };
   }
 
   const recent = await getRecentGames(userId, apiKey);
-  if (recent.length >= TARGET_COUNT) {
-    return { games: recent.slice(0, TARGET_COUNT), source: 'recent' };
+  if (recent.games.length >= TARGET_COUNT) {
+    return {
+      games: recent.games.slice(0, TARGET_COUNT),
+      source: 'recent',
+      updatedAt: recent.updatedAt || null,
+    };
   }
 
   // Menos recentes que o alvo: completa com os mais jogados de todos os tempos
   // (sem repetir os que já estão na lista) para a grade nunca ficar incompleta.
   const alltime = await getAllTimeGames(userId, apiKey);
-  const seen = new Set(recent.map((game) => game.appid));
-  const backfill = alltime.filter((game) => !seen.has(game.appid));
-  const games = [...recent, ...backfill].slice(0, TARGET_COUNT);
+  const seen = new Set(recent.games.map((game) => game.appid));
+  const backfill = alltime.games.filter((game) => !seen.has(game.appid));
+  const games = [...recent.games, ...backfill].slice(0, TARGET_COUNT);
 
   debugLog(
-    `final: ${recent.length} recentes + ${
-      games.length - recent.length
+    `final: ${recent.games.length} recentes + ${
+      games.length - recent.games.length
     } backfill`,
   );
 
-  return { games, source: recent.length > 0 ? 'recent' : 'alltime' };
+  return {
+    games,
+    source: recent.games.length > 0 ? 'recent' : 'alltime',
+    updatedAt: recent.updatedAt || alltime.updatedAt || null,
+  };
 };