@mundogamernetwork/shared-ui 1.1.35 → 1.1.37

package/pages/presskit/[slug].vue

@@ -1,1450 +1,275 @@
 <script setup lang="ts">
-import { fetchPublicPressKit, trackPressKitEvent } from '~/services/pressKitService'
-
-definePageMeta({ ssr: false, layout: 'blank' })
-
-const route = useRoute()
-const { t } = useI18n()
-const localePath = useLocalePath()
-
-const slug = route.params.slug as string
-
-const kit = ref<any>(null)
-const loading = ref(true)
-const error = ref(false)
-
-const showTrailer = ref(false)
-const assetFilter = ref('all')
-
-const trailerEmbedUrl = computed(() => {
-	const url = kit.value?.trailer_url
-	if (!url) return null
-	const yt = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/)
-	if (yt) return `https://www.youtube.com/embed/${yt[1]}?autoplay=1`
-	return url
-})
-
-const assets = computed(() => {
-	const all = kit.value?.assets?.data ?? []
-	if (assetFilter.value === 'all') return all
-	return all.filter((a: any) => a.type === assetFilter.value)
-})
-
-const assetTypes = computed(() => {
-	const all = kit.value?.assets?.data ?? []
-	const types = [...new Set(all.map((a: any) => a.type).filter(Boolean))]
-	return types
-})
-
-const socialLinks = computed(() => {
-	const links = kit.value?.social_links ?? {}
-	return Object.entries(links).filter(([, v]) => !!v).map(([k, v]) => ({ label: k, url: v as string }))
-})
-
-const articles = computed(() => kit.value?.articles ?? [])
-const coverage = computed(() => kit.value?.coverage ?? [])
-const showcases = computed(() => kit.value?.showcases ?? [])
-const hasEcosystem = computed(() =>
-	showcases.value.length ||
-	kit.value?.ventures_url ||
-	kit.value?.magazine_feature ||
-	kit.value?.community_url
-)
-
-// Sanitize community URL: legacy data may store /games/[slug] (old route).
-// The canonical community game route is /game/[slug].
-const communityUrl = computed(() =>
-	kit.value?.community_url
-		? kit.value.community_url.replace(/\/games\//, '/game/')
-		: null
-)
-
-onMounted(async () => {
-	try {
-		const { data } = await fetchPublicPressKit(slug)
-		kit.value = data?.data ?? data
+import { trackPressKitEvent } from '../../services/pressKitService';
+
+definePageMeta({ layout: 'blank' });
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const runtimeConfig = useRuntimeConfig();
+const cfg = (runtimeConfig.public?.mgSharedUi || {}) as Record<string, any>;
+// Consuming apps may set apiBaseURL at public root (agency/community/tv pattern)
+// or inside mgSharedUi. pressKitApiUrl overrides both (e.g. community points to agency API).
+const apiBase: string =
+	cfg.pressKitApiUrl ||
+	(runtimeConfig.public as any)?.pressKitApiUrl ||
+	cfg.apiBaseURL ||
+	(runtimeConfig.public as any)?.apiBaseURL ||
+	'';
+
+const agencyBase: string =
+	cfg.agencyBaseUrl ||
+	(runtimeConfig.public as any)?.agencyBaseUrl ||
+	'';
+
+const SUPPORTED_LOCALES = ['en', 'pt-BR', 'es', 'de', 'ro', 'ar-AE'];
+const routePath = route.path.split('/');
+const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
+
+const { data: kitData, error: fetchError, pending } = await useAsyncData(
+	`press-kit-${slug}`,
+	() => $fetch<any>(`${apiBase}/public/press-kits/${slug}`, {
+		params: { include: 'assets,videos,credits,awards,quotes', lang },
+	}),
+	{ lazy: false },
+);
+
+const kit = computed(() => kitData.value?.data || kitData.value || null);
+const loading = pending;
+const error = computed(() => !!fetchError.value || (!pending.value && !kit.value));
+
+onMounted(() => {
+	if (kit.value) {
 		trackPressKitEvent(slug, {
 			event_type: 'view',
 			referrer: document.referrer || undefined,
-		}).catch(() => {})
-	} catch {
-		error.value = true
-	} finally {
-		loading.value = false
-	}
-})
-
-const canonicalUrl = computed(() =>
-	typeof window !== 'undefined' ? window.location.href : ''
-)
-const ogDescription = computed(() =>
-	kit.value?.tagline ?? kit.value?.description?.substring(0, 160) ?? ''
-)
-const ogImage = computed(() =>
-	kit.value?.cover_image_url ?? kit.value?.hero_image_url ?? ''
-)
-
+		}).catch(() => {});
+	}
+});
+
+// Fractal include shape: relation -> { data: [...] }
+const list = (rel: any) => rel?.data || rel || [];
+const assets = computed(() => list(kit.value?.assets));
+const videos = computed(() => list(kit.value?.videos));
+const awards = computed(() => list(kit.value?.awards));
+const quotes = computed(() => list(kit.value?.quotes));
+const team = computed(() => list(kit.value?.credits));
+const features = computed(() => kit.value?.key_features || []);
+// New, optional blocks (rendered only when the API provides them)
+const articles = computed(() => list(kit.value?.articles));
+const coverage = computed(() => list(kit.value?.coverage));
+const showcases = computed(() => list(kit.value?.showcases));
+const hasEcosystem = computed(() => showcases.value.length || kit.value?.ventures_url || kit.value?.magazine_feature || kit.value?.community_url);
+
+const screenshots = computed(() => assets.value.filter((a: any) => ['screenshot', 'artwork', 'gif'].includes(a.type)));
+const brandAssets = computed(() => assets.value.filter((a: any) => ['logo', 'document'].includes(a.type)));
+
+const tpl = computed(() => kit.value?.theme || null);
+const layout = computed(() => kit.value?.layout || 'classic');
+const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
+
+const socials = computed(() => {
+	const s = kit.value?.social_links || {};
+	return Object.entries(s).filter(([, v]) => v).map(([k, v]) => ({ platform: k, url: v as string }));
+});
+
+const facts = computed(() => {
+	const k = kit.value || {};
+	const out: { label: string; value: string; accent?: boolean; href?: string }[] = [];
+	if (k.developer) out.push({ label: 'kit.press.developer', value: k.developer });
+	if (k.publisher) out.push({ label: 'kit.press.publisher', value: k.publisher });
+	if (k.release_date_tba) out.push({ label: 'kit.press.release', value: 'TBA', accent: true });
+	else if (k.release_date) out.push({ label: 'kit.press.release', value: k.release_date, accent: true });
+	if (k.release_status) out.push({ label: 'kit.press.status', value: String(k.release_status).replace(/_/g, ' ') });
+	if (k.price) out.push({ label: 'kit.press.price', value: `${k.price}${k.currency ? ' ' + k.currency : ''}` });
+	if (k.website_url) out.push({ label: 'kit.press.website', value: k.website_url, accent: true, href: k.website_url });
+	if (k.steam_url) out.push({ label: 'Steam', value: k.steam_url, href: k.steam_url });
+	if (k.press_contact_email) out.push({ label: 'kit.press.contact', value: k.press_contact_email, href: `mailto:${k.press_contact_email}` });
+	return out;
+});
+
+function track(type: 'click' | 'download' | 'contact') {
+	trackPressKitEvent(slug, { event_type: type, referrer: document.referrer || undefined }).catch(() => {});
+}
+
+const requestUrl = useRequestURL();
 useHead(() => ({
-	title: kit.value?.name
-		? `${kit.value.name} — Press Kit`
-		: t('press_kit.loading'),
+	title: kit.value ? `${kit.value.name} — Press Kit` : 'Press Kit',
 	meta: [
-		// Standard
-		{ name: 'description', content: ogDescription.value },
-		{ name: 'robots', content: 'index, follow' },
-		// Open Graph
-		{ property: 'og:type', content: 'website' },
-		{ property: 'og:site_name', content: 'Mundo Gamer Agency' },
-		{ property: 'og:title', content: kit.value?.name ?? '' },
-		{ property: 'og:description', content: ogDescription.value },
-		{ property: 'og:image', content: ogImage.value },
-		{ property: 'og:image:width', content: '1200' },
-		{ property: 'og:image:height', content: '630' },
-		{ property: 'og:url', content: canonicalUrl.value },
-		// Twitter / X Card
-		{ name: 'twitter:card', content: 'summary_large_image' },
-		{ name: 'twitter:title', content: kit.value?.name ?? '' },
-		{ name: 'twitter:description', content: ogDescription.value },
-		{ name: 'twitter:image', content: ogImage.value },
+		{ name: 'description', content: kit.value?.tagline || '' },
+		{ property: 'og:title', content: kit.value?.name || 'Press Kit' },
+		{ property: 'og:description', content: kit.value?.tagline || '' },
+		{ property: 'og:image', content: kit.value?.hero_image_url || kit.value?.logo_url || '' },
+		{ property: 'og:type', content: 'article' },
+		{ property: 'og:url', content: requestUrl.href },
 	],
-	link: [
-		{ rel: 'canonical', href: canonicalUrl.value },
-	],
-	script: kit.value ? [
-		{
-			type: 'application/ld+json',
-			innerHTML: JSON.stringify({
-				'@context': 'https://schema.org',
-				'@type': 'VideoGame',
-				name: kit.value.name,
-				description: ogDescription.value,
-				image: ogImage.value,
-				...(kit.value.developer ? { author: { '@type': 'Organization', name: kit.value.developer } } : {}),
-				...(kit.value.publisher ? { publisher: { '@type': 'Organization', name: kit.value.publisher } } : {}),
-				...(kit.value.release_date ? { datePublished: kit.value.release_date } : {}),
-				...(kit.value.steam_url ? { sameAs: [kit.value.steam_url] } : {}),
-				...(kit.value.website_url ? { url: kit.value.website_url } : {}),
-			}),
-		},
-	] : [],
-}))
+}));
 </script>
 
 <template>
-	<div class="pk-page" :data-theme="kit?.theme || 'default'">
-
-		<!-- Loading -->
-		<div v-if="loading" class="pk-loading">
-			<div class="pk-spinner" />
-		</div>
-
-		<!-- Not found -->
-		<div v-else-if="error || !kit" class="pk-error">
-			<h1>{{ $t('press_kit.not_found') }}</h1>
-			<p>{{ $t('press_kit.not_found_message') }}</p>
-			<NuxtLink :to="localePath('/')" class="pk-btn">{{ $t('press_kit.back_home') }}</NuxtLink>
+	<div class="kit-press" :data-tpl="tpl" :data-layout="layout">
+		<div v-if="loading" class="kit-state">{{ $t('kit.loading') }}</div>
+		<div v-else-if="error || !kit" class="kit-state">
+			<h2>{{ $t('kit.press.not_found') }}</h2>
 		</div>
 
 		<template v-else>
-
-			<!-- ═══ Hero ═══════════════════════════════════════════════════ -->
-			<div
-				class="pk-hero"
-				:style="kit.hero_image_url ? { backgroundImage: `url(${kit.hero_image_url})` } : {}"
-			>
-				<div class="pk-hero__overlay">
-					<div class="pk-hero__inner">
-						<div v-if="kit.logo_url" class="pk-hero__logo">
-							<img
-								:src="kit.logo_url"
-								:alt="kit.name"
-								@error="(e: any) => e.target.style.display = 'none'"
-							/>
-						</div>
-						<h1 class="pk-hero__title">{{ kit.name }}</h1>
-						<p v-if="kit.tagline" class="pk-hero__tagline">{{ kit.tagline }}</p>
-						<div class="pk-hero__actions">
-							<button
-								v-if="kit.trailer_url"
-								class="pk-btn pk-btn--outline"
-								@click="showTrailer = true"
-							>
-								{{ $t('press_kit.watch_trailer') }}
-							</button>
-							<a
-								v-if="kit.steam_url"
-								:href="kit.steam_url"
-								target="_blank"
-								rel="noopener"
-								class="pk-btn pk-btn--ghost"
-								@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'steam_wishlist' } })"
-							>
-								{{ $t('press_kit.wishlist_steam') }}
-							</a>
-							<a
-								v-if="kit.epic_url"
-								:href="kit.epic_url"
-								target="_blank"
-								rel="noopener"
-								class="pk-btn pk-btn--ghost"
-								@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'epic_wishlist' } })"
-							>
-								{{ $t('press_kit.wishlist_epic') }}
-							</a>
+			<!-- CAPA / COVER -->
+			<header class="kit-cover">
+				<img v-if="kit.hero_image_url" class="kit-cover-art" :src="kit.hero_image_url" :alt="kit.name" />
+				<div class="kit-cover-inner">
+					<img v-if="kit.cover_image_url" class="kit-cover-poster" :src="kit.cover_image_url" :alt="kit.name" />
+					<div class="kit-cover-text">
+						<span v-if="kit.release_status" class="kit-eyebrow">{{ String(kit.release_status).replace(/_/g, ' ') }}</span>
+						<img v-if="kit.logo_url" class="kit-cover-logo-img" :src="kit.logo_url" :alt="kit.name" />
+						<h1 v-else>{{ kit.name }}</h1>
+						<p v-if="kit.tagline" class="kit-tagline">{{ kit.tagline }}</p>
+						<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>
+						<div class="kit-actions">
+							<a v-if="allowDownload" class="kit-btn kit-btn-primary" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
+							<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
 						</div>
 					</div>
 				</div>
-			</div>
-
-			<!-- ═══ Layout ══════════════════════════════════════════════════ -->
-			<div class="pk-container">
-				<div class="pk-layout">
-
-					<!-- Sidebar -->
-					<aside class="pk-sidebar">
-						<div class="pk-card">
-							<h2 class="pk-card__title">{{ $t('press_kit.fact_sheet') }}</h2>
-							<dl class="pk-dl">
-								<template v-if="kit.developer">
-									<dt>{{ $t('press_kit.developer') }}</dt>
-									<dd>{{ kit.developer }}</dd>
-								</template>
-								<template v-if="kit.publisher">
-									<dt>{{ $t('press_kit.publisher_label') }}</dt>
-									<dd>{{ kit.publisher }}</dd>
-								</template>
-								<template v-if="kit.release_date || kit.release_date_tba">
-									<dt>{{ $t('press_kit.release_date') }}</dt>
-									<dd>{{ kit.release_date_tba ? $t('press_kit.date_tba') : kit.release_date }}</dd>
-								</template>
-								<template v-if="kit.release_status">
-									<dt>{{ $t('press_kit.release_status') }}</dt>
-									<dd>{{ kit.release_status }}</dd>
-								</template>
-								<template v-if="kit.price">
-									<dt>{{ $t('press_kit.price') }}</dt>
-									<dd>{{ kit.price }} {{ kit.currency }}</dd>
-								</template>
-								<template v-if="kit.monetization">
-									<dt>{{ $t('press_kit.monetization') }}</dt>
-									<dd>{{ kit.monetization }}</dd>
-								</template>
-								<template v-if="kit.press_contact_email">
-									<dt>{{ $t('press_kit.press_contact') }}</dt>
-									<dd>
-										<a
-											:href="`mailto:${kit.press_contact_email}`"
-											@click="trackPressKitEvent(slug, { event_type: 'contact' })"
-										>{{ kit.press_contact_email }}</a>
-									</dd>
-								</template>
-							</dl>
-						</div>
-
-						<!-- Links -->
-						<div class="pk-card" v-if="kit.website_url || kit.steam_url || kit.epic_url || kit.ventures_url || communityUrl">
-							<h2 class="pk-card__title">{{ $t('press_kit.available_on') }}</h2>
-							<div class="pk-links">
-								<a v-if="kit.website_url" :href="kit.website_url" target="_blank" rel="noopener" class="pk-link" @click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'website' } })">
-									{{ $t('press_kit.website') }}
-								</a>
-								<a v-if="kit.steam_url" :href="kit.steam_url" target="_blank" rel="noopener" class="pk-link" @click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'steam' } })">
-									Steam
-								</a>
-								<a v-if="kit.epic_url" :href="kit.epic_url" target="_blank" rel="noopener" class="pk-link" @click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'epic' } })">
-									Epic Games
-								</a>
-								<a v-if="kit.ventures_url" :href="kit.ventures_url" target="_blank" rel="noopener" class="pk-link">
-									Ventures
-								</a>
-								<a v-if="communityUrl" :href="communityUrl" target="_blank" rel="noopener" class="pk-link" @click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'community' } })">
-									{{ $t('press_kit.follow_community') }}
-								</a>
+			</header>
+
+			<div class="kit-wrap">
+				<div class="kit-layout">
+					<aside class="kit-sidebar">
+						<div class="kit-card kit-factsheet">
+							<h3 class="kit-fact-title">{{ $t('kit.press.fact_sheet') }}</h3>
+							<div v-for="f in facts" :key="f.label" class="kit-fact">
+								<span class="k">{{ $te(f.label) ? $t(f.label) : f.label }}</span>
+								<a v-if="f.href" class="v accent" :href="f.href" target="_blank" rel="noopener" @click="track('click')">{{ f.value }}</a>
+								<span v-else class="v" :class="{ accent: f.accent }">{{ f.value }}</span>
 							</div>
-						</div>
-
-						<!-- Social media -->
-						<div class="pk-card" v-if="socialLinks.length">
-							<h2 class="pk-card__title">{{ $t('press_kit.social_media') }}</h2>
-							<div class="pk-links">
-								<a
-									v-for="link in socialLinks"
-									:key="link.label"
-									:href="link.url"
-									target="_blank"
-									rel="noopener"
-									class="pk-link"
-									@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: link.label } })"
-								>
-									{{ link.label }}
-								</a>
+							<div v-if="socials.length" class="kit-fact">
+								<span class="k">{{ $t('kit.press.social') }}</span>
+								<div class="kit-socials">
+									<a v-for="s in socials" :key="s.platform" :href="s.url" target="_blank" rel="noopener" @click="track('click')">{{ s.platform.charAt(0).toUpperCase() }}</a>
+								</div>
 							</div>
 						</div>
-
-						<!-- Press key request -->
-						<div class="pk-card pk-card--accent" v-if="kit.press_contact_email">
-							<p class="pk-card__desc">{{ $t('press_kit.key_request_desc') }}</p>
-							<a
-								:href="`mailto:${kit.press_contact_email}`"
-								class="pk-btn pk-btn--full"
-								@click="trackPressKitEvent(slug, { event_type: 'contact' })"
-							>
-								{{ $t('press_kit.request_key') }}
-							</a>
-						</div>
 					</aside>
 
-					<!-- Main content -->
-					<main class="pk-main">
+					<main class="kit-main">
+						<section v-if="kit.description" class="kit-block">
+							<h2>{{ $t('kit.press.about') }}</h2>
+							<div class="kit-lead" v-html="kit.description" />
+						</section>
 
-						<!-- Description -->
-						<section v-if="kit.description" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.description') }}</h2>
-							<div class="pk-prose" v-html="kit.description" />
+						<section v-if="features.length" class="kit-block">
+							<h2>{{ $t('kit.press.features') }}</h2>
+							<div class="kit-features">
+								<div v-for="(f, i) in features" :key="i" class="kit-feature"><span class="m">▸</span>{{ f }}</div>
+							</div>
 						</section>
 
-						<!-- Key features -->
-						<section v-if="kit.key_features?.length" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.key_features') }}</h2>
-							<ul class="pk-features">
-								<li v-for="(feat, i) in kit.key_features" :key="i">{{ feat }}</li>
-							</ul>
+						<section v-if="videos.length" class="kit-block">
+							<h2>{{ $t('kit.press.videos') }}</h2>
+							<PressKitVideoPlayer :videos="videos" />
 						</section>
 
-						<!-- Videos -->
-						<section v-if="kit.videos?.data?.length" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.videos') }}</h2>
-							<div class="pk-videos">
-								<div
-									v-for="video in kit.videos.data"
-									:key="video.id"
-									class="pk-video-card"
-									@click="() => { kit.trailer_url = video.url; showTrailer = true; }"
-								>
-									<div class="pk-video-card__thumb">▶</div>
-									<span class="pk-video-card__title">{{ video.title }}</span>
-									<span class="pk-video-card__type">{{ video.type }}</span>
-								</div>
+						<section v-if="screenshots.length" class="kit-block">
+							<div class="kit-shead"><h2>{{ $t('kit.press.screenshots') }}</h2><a v-if="allowDownload" class="kit-dl" @click="track('download')">{{ $t('kit.press.download_all') }}</a></div>
+							<div class="kit-gallery">
+								<a v-for="(s, i) in screenshots" :key="i" class="kit-shot" :href="s.url" target="_blank" rel="noopener"><img :src="s.thumbnail_url || s.url" :alt="s.title || ''" /></a>
 							</div>
 						</section>
 
-						<!-- Assets -->
-						<section v-if="kit.assets?.data?.length" class="pk-section">
-							<div class="pk-section__head">
-								<h2 class="pk-section__title" style="margin-bottom:0;border-bottom:none;">{{ $t('press_kit.assets') }}</h2>
-								<div v-if="assetTypes.length > 1" class="pk-asset-filters">
-									<button :class="['pk-filter', { active: assetFilter === 'all' }]" @click="assetFilter = 'all'">
-										{{ $t('press_kit.all') }}
-									</button>
-									<button
-										v-for="type in assetTypes"
-										:key="type"
-										:class="['pk-filter', { active: assetFilter === type }]"
-										@click="assetFilter = type"
-									>{{ type }}</button>
-								</div>
-							</div>
-							<div v-if="!assets.length" class="pk-empty">{{ $t('press_kit.no_assets') }}</div>
-							<div v-else class="pk-assets">
-								<a
-									v-for="asset in assets"
-									:key="asset.id"
-									:href="asset.url"
-									target="_blank"
-									rel="noopener"
-									class="pk-asset"
-									@click="trackPressKitEvent(slug, { event_type: 'download', metadata: { asset_id: asset.id } })"
-								>
-									<div class="pk-asset__thumb">
-										<img
-											v-if="asset.thumbnail_url"
-											:src="asset.thumbnail_url"
-											:alt="asset.title"
-											loading="lazy"
-											@error="(e: any) => e.target.style.display = 'none'"
-										/>
-										<span v-else class="pk-asset__dl-icon">↓</span>
-									</div>
-									<div class="pk-asset__body">
-										<span class="pk-asset__title">{{ asset.title }}</span>
-										<span v-if="asset.file_size" class="pk-asset__size">{{ asset.file_size }}</span>
-									</div>
+						<section v-if="brandAssets.length" class="kit-block">
+							<div class="kit-shead"><h2>{{ $t('kit.press.logo_icons') }}</h2></div>
+							<div class="kit-logos">
+								<a v-for="(b, i) in brandAssets" :key="i" class="kit-logo-tile" :href="b.url" target="_blank" rel="noopener" @click="track('download')">
+									<span class="ic">◆</span>{{ b.title || b.type }}
 								</a>
 							</div>
 						</section>
 
-						<!-- Quotes -->
-						<section v-if="kit.quotes?.data?.length" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.quotes') }}</h2>
-							<div class="pk-quotes">
-								<blockquote v-for="q in kit.quotes.data" :key="q.id" class="pk-quote">
-									<p>"{{ q.quote }}"</p>
-									<footer>
-										<a v-if="q.source_url" :href="q.source_url" target="_blank" rel="noopener">{{ q.source }}</a>
-										<span v-else>{{ q.source }}</span>
-									</footer>
-								</blockquote>
+						<!-- NEW: Conteúdos & Artigos (community + external) -->
+						<section v-if="articles.length" class="kit-block">
+							<div class="kit-shead"><h2>{{ $t('kit.press.articles') }}</h2></div>
+							<div class="kit-articles">
+								<a v-for="(a, i) in articles" :key="i" class="kit-article" :href="a.url" target="_blank" rel="noopener" @click="track('click')">
+									<div class="thumb" :style="a.image ? { backgroundImage: `url(${a.image})` } : {}"><span class="src" :class="{ ext: a.external }">{{ a.external ? $t('kit.press.external') : 'Mundo Gamer' }}</span></div>
+									<div class="a-body"><h4>{{ a.title }}</h4><div class="meta">{{ a.source }}<span v-if="a.date"> · {{ a.date }}</span></div></div>
+								</a>
 							</div>
 						</section>
 
-						<!-- Articles -->
-						<section v-if="articles.length" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.articles') }}</h2>
-							<div class="pk-articles">
-								<a
-									v-for="(a, i) in articles"
-									:key="i"
-									:href="a.url"
-									target="_blank"
-									rel="noopener"
-									class="pk-article"
-									@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'article' } })"
-								>
-									<div
-										class="pk-article__thumb"
-										:style="a.image ? { backgroundImage: `url(${a.image})` } : {}"
-									>
-										<span class="pk-article__src" :class="{ external: a.external }">{{ a.source }}</span>
-									</div>
-									<div class="pk-article__body">
-										<p class="pk-article__title">{{ a.title }}</p>
-										<span class="pk-article__date">{{ a.date }}</span>
-									</div>
+						<!-- NEW: Cobertura de Criadores -->
+						<section v-if="coverage.length" class="kit-block">
+							<h2>{{ $t('kit.press.coverage') }}</h2>
+							<div class="kit-creators">
+								<a v-for="(c, i) in coverage" :key="i" class="kit-creator" :href="c.url || undefined" target="_blank" rel="noopener">
+									<div class="av" :style="c.avatar ? { backgroundImage: `url(${c.avatar})` } : {}" />
+									<div class="cn">{{ c.name }}</div>
+									<div class="cp">{{ c.platform }}<span v-if="c.followers"> · {{ c.followers }}</span></div>
+									<div v-if="c.label" class="cv">{{ c.label }}</div>
 								</a>
 							</div>
 						</section>
 
-						<!-- Coverage -->
-						<section v-if="coverage.length" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.coverage') }}</h2>
-							<div class="pk-coverage">
-								<a
-									v-for="(c, i) in coverage"
-									:key="i"
-									:href="c.url || undefined"
-									target="_blank"
-									rel="noopener"
-									class="pk-creator"
-									@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'coverage' } })"
-								>
-									<div
-										class="pk-creator__avatar"
-										:style="c.avatar ? { backgroundImage: `url(${c.avatar})` } : {}"
-									/>
-									<div class="pk-creator__info">
-										<strong>{{ c.name }}</strong>
-										<span>{{ c.platform }}</span>
-										<span v-if="c.followers" class="pk-creator__followers">
-											{{ Intl.NumberFormat('pt-BR', { notation: 'compact' }).format(c.followers) }} {{ $t('press_kit.followers') }}
-										</span>
-									</div>
-									<span v-if="c.label" class="pk-creator__label">{{ c.label }}</span>
-								</a>
-							</div>
+						<section v-if="awards.length" class="kit-block">
+							<h2>{{ $t('kit.press.awards') }}</h2>
+							<PressKitAwards :awards="awards" />
 						</section>
 
-						<!-- Awards -->
-						<section v-if="kit.awards?.data?.length" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.awards') }}</h2>
-							<div class="pk-awards">
-								<div v-for="aw in kit.awards.data" :key="aw.id" class="pk-award">
-									<span class="pk-award__star">★</span>
-									<div class="pk-award__body">
-										<strong>{{ aw.title }}</strong>
-										<span v-if="aw.event || aw.year">{{ aw.event }}{{ aw.event && aw.year ? ' · ' : '' }}{{ aw.year }}</span>
-									</div>
-									<a v-if="aw.url" :href="aw.url" target="_blank" rel="noopener" class="pk-award__link">↗</a>
-								</div>
-							</div>
+						<section v-if="quotes.length" class="kit-block">
+							<h2>{{ $t('kit.press.press') }}</h2>
+							<PressKitQuotes :quotes="quotes" />
 						</section>
 
-						<!-- Team / Credits -->
-						<section v-if="kit.credits?.data?.length" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.team') }}</h2>
-							<div class="pk-credits">
-								<div v-for="cr in kit.credits.data" :key="cr.id" class="pk-credit">
-									<strong>{{ cr.name }}</strong>
-									<span>{{ cr.role }}</span>
-									<a v-if="cr.url" :href="cr.url" target="_blank" rel="noopener">↗</a>
-								</div>
+						<!-- Créditos -> Equipe -->
+						<section v-if="team.length" class="kit-block">
+							<h2>{{ $t('kit.press.team') }}</h2>
+							<div class="kit-team">
+								<div v-for="(m, i) in team" :key="i" class="kit-member"><span>{{ m.name }}</span><span class="role">{{ m.role }}</span></div>
 							</div>
 						</section>
 
-						<!-- Ecosystem -->
-						<section v-if="hasEcosystem" class="pk-section">
-							<h2 class="pk-section__title">{{ $t('press_kit.ecosystem') }}</h2>
-							<div class="pk-ecosystem">
-
-								<!-- Showcases -->
-								<div v-if="showcases.length" class="pk-eco-card pk-eco-card--full">
-									<h3 class="pk-eco-card__title">{{ $t('press_kit.showcases') }}</h3>
-									<div class="pk-showcases">
-										<span
-											v-for="(s, i) in showcases"
-											:key="i"
-											class="pk-showcase"
-											:class="{ featured: s.featured }"
-										>
-											{{ s.featured ? '🏵️' : '🎮' }} {{ s.name }}<em v-if="s.year"> {{ s.year }}</em>
-										</span>
+						<!-- NEW: Ecossistema Mundo Gamer -->
+						<section v-if="hasEcosystem" class="kit-block">
+							<h2>{{ $t('kit.press.ecosystem') }}</h2>
+							<div class="kit-eco">
+								<div v-if="showcases.length" class="kit-eco-card full">
+									<div class="kit-eco-h"><span class="ic">★</span>{{ $t('kit.press.showcases') }}</div>
+									<div class="kit-sbadges">
+										<span v-for="(s, i) in showcases" :key="i" class="kit-sbadge" :class="{ feat: s.featured }"><span class="medal">{{ s.featured ? '🏵️' : '🎮' }}</span>{{ s.name }}<span v-if="s.year"> {{ s.year }}</span></span>
 									</div>
 								</div>
-
-								<!-- Magazine feature -->
-								<a
-									v-if="kit.magazine_feature"
-									:href="kit.magazine_feature.url"
-									target="_blank"
-									rel="noopener"
-									class="pk-eco-card"
-									@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'magazine' } })"
-								>
-									<div class="pk-eco-mag">
-										<div
-											v-if="kit.magazine_feature.cover"
-											class="pk-eco-mag__cover"
-											:style="{ backgroundImage: `url(${kit.magazine_feature.cover})` }"
-										/>
-										<div>
-											<p class="pk-eco-mag__title">{{ kit.magazine_feature.title }}</p>
-											<p class="pk-eco-mag__issue">{{ kit.magazine_feature.issue }}</p>
-										</div>
-									</div>
+								<div v-if="kit.ventures_url" class="kit-eco-card">
+									<div class="kit-eco-h"><span class="ic">◈</span>MGN Ventures</div>
+									<a class="kit-vrow" :href="kit.ventures_url" target="_blank" rel="noopener" @click="track('click')"><span class="vlogo">VENTURES</span><span class="vtxt">{{ $t('kit.press.ventures_text') }}</span></a>
+								</div>
+								<a v-if="kit.magazine_feature" class="kit-eco-card kit-mag" :href="kit.magazine_feature.url" target="_blank" rel="noopener" @click="track('click')">
+									<div class="kit-eco-h" style="width:100%"><span class="ic">▤</span>MGN Magazine</div>
+									<div class="kit-mag-row"><div class="mcover" :style="kit.magazine_feature.cover ? { backgroundImage: `url(${kit.magazine_feature.cover})` } : {}" /><div><div class="mtitle">{{ kit.magazine_feature.title }}</div><div class="mmeta">{{ kit.magazine_feature.issue }}</div></div></div>
 								</a>
-
-								<!-- Community follow -->
-								<div v-if="communityUrl" class="pk-eco-card">
-									<p class="pk-eco-card__text">{{ $t('press_kit.follow_community_desc', { name: kit.name }) }}</p>
-									<a
-										:href="communityUrl"
-										target="_blank"
-										rel="noopener"
-										class="pk-btn pk-btn--sm"
-										@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'community' } })"
-									>
-										{{ $t('press_kit.follow_community') }}
-									</a>
+								<div v-if="kit.community_url" class="kit-eco-card full">
+									<div class="kit-ccta">
+										<div><div class="ctitle">{{ $t('kit.press.follow_community', { name: kit.name }) }}</div><div v-if="kit.community_followers" class="cmeta">{{ kit.community_followers }} {{ $t('kit.press.followers') }}</div></div>
+										<a class="kit-btn kit-btn-primary" :href="kit.community_url" target="_blank" rel="noopener" @click="track('click')">{{ $t('kit.press.follow') }}</a>
+									</div>
 								</div>
+							</div>
+						</section>
 
-								<!-- Ventures -->
-								<a
-									v-if="kit.ventures_url"
-									:href="kit.ventures_url"
-									target="_blank"
-									rel="noopener"
-									class="pk-eco-card"
-									@click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'ventures' } })"
-								>
-									<p class="pk-eco-card__label">MGN Ventures</p>
-									<p class="pk-eco-card__text">{{ $t('press_kit.ventures_text') }}</p>
-								</a>
+						<section v-if="kit.press_contact_email" class="kit-block">
+							<div class="kit-cta">
+								<h2>{{ $t('kit.press.covering', { name: kit.name }) }}</h2>
+								<p>{{ $t('kit.press.cta_text') }}</p>
+								<a class="kit-btn kit-btn-primary" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
 							</div>
 						</section>
 
+						<p class="kit-madewith">
+							{{ $t('kit.press.made_with') }} <strong>Mundo Gamer</strong> —
+							<a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener">{{ $t('kit.press.create_yours') }}</a>
+						</p>
 					</main>
 				</div>
 			</div>
-
-			<!-- ═══ Brand footer ════════════════════════════════════════════ -->
-			<p class="pk-brand-footer">
-				{{ $t('press_kit.made_with') }} {{ $t('press_kit.brand_sub') }} —
-				<a href="https://agency.mundogamer.network/press" target="_blank" rel="noopener">{{ $t('press_kit.create_yours_cta') }}</a>
-			</p>
-
 		</template>
-
-		<!-- ═══ Trailer Modal ══════════════════════════════════════════════ -->
-		<div
-			v-if="showTrailer && trailerEmbedUrl"
-			class="pk-modal"
-			role="dialog"
-			:aria-label="$t('press_kit.watch_trailer')"
-			@click.self="showTrailer = false"
-			@keydown.esc="showTrailer = false"
-		>
-			<button class="pk-modal__close" :aria-label="$t('common.close')" @click="showTrailer = false">×</button>
-			<iframe
-				:src="trailerEmbedUrl"
-				class="pk-modal__video"
-				frameborder="0"
-				allow="autoplay; encrypted-media"
-				allowfullscreen
-			/>
-		</div>
 	</div>
 </template>
-
-<style lang="scss" scoped>
-// ── Self-contained theme system ────────────────────────────────────
-// All tokens are declared directly on .pk-page so the press kit is
-// always correctly styled regardless of the host platform's
-// light/dark mode. Studios choose a theme in the editor; the value
-// is stored in kit.theme and applied via data-theme attribute.
-//
-// Available themes:
-//   default · light · blade · aurora · ember · nova
-// ──────────────────────────────────────────────────────────────────
-.pk-page {
-	// ── default (dark gold) ──────────────────────────────────────
-	--background:        #0e1015;
-	--card-background:   #191b20;
-	--divider:           #2a2d35;
-	--text-primary:      #ffffff;
-	--text-secondary:    #8a8f9e;
-	--primary:           #fcb216;
-	--primary-contrast:  #13161c;
-
-	min-height: 100vh;
-	background: var(--background);
-	color: var(--text-primary);
-
-	// ── light (white + slate) ────────────────────────────────────
-	&[data-theme="light"] {
-		--background:        #f5f6f8;
-		--card-background:   #ffffff;
-		--divider:           #e2e5ea;
-		--text-primary:      #111318;
-		--text-secondary:    #5a6070;
-		--primary:           #fcb216;
-		--primary-contrast:  #ffffff;
-	}
-
-	// ── blade (dark navy + electric blue) ───────────────────────
-	&[data-theme="blade"] {
-		--background:        #0d1b2a;
-		--card-background:   #112236;
-		--divider:           #1e3a52;
-		--text-primary:      #e0f0ff;
-		--text-secondary:    #7aabce;
-		--primary:           #3a86ff;
-		--primary-contrast:  #ffffff;
-	}
-
-	// ── aurora (deep purple + neon green) ───────────────────────
-	&[data-theme="aurora"] {
-		--background:        #0f0c1a;
-		--card-background:   #1a1428;
-		--divider:           #2d2040;
-		--text-primary:      #f0ecff;
-		--text-secondary:    #9d87c4;
-		--primary:           #a855f7;
-		--primary-contrast:  #ffffff;
-	}
-
-	// ── ember (deep brown + fire orange) ────────────────────────
-	&[data-theme="ember"] {
-		--background:        #1a0900;
-		--card-background:   #251100;
-		--divider:           #3d1f00;
-		--text-primary:      #ffedd5;
-		--text-secondary:    #c4875a;
-		--primary:           #f97316;
-		--primary-contrast:  #ffffff;
-	}
-
-	// ── nova (true black + gold) ─────────────────────────────────
-	&[data-theme="nova"] {
-		--background:        #0d0d0d;
-		--card-background:   #161616;
-		--divider:           #2a2a2a;
-		--text-primary:      #fff8dc;
-		--text-secondary:    #a89060;
-		--primary:           #ffd700;
-		--primary-contrast:  #0d0d0d;
-	}
-}
-
-// ── Loading ───────────────────────────────────────────────────────
-.pk-loading {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	min-height: 60vh;
-}
-
-.pk-spinner {
-	width: 40px;
-	height: 40px;
-	border: 3px solid var(--divider, #2a2d35);
-	border-top-color: var(--primary, #fcb216);
-	animation: pk-spin 0.8s linear infinite;
-}
-
-@keyframes pk-spin { to { transform: rotate(360deg); } }
-
-// ── Error ─────────────────────────────────────────────────────────
-.pk-error {
-	text-align: center;
-	padding: 80px 20px;
-
-	h1 { font-size: 1.8rem; margin-bottom: 8px; }
-	p  { color: var(--text-secondary, #888); margin-bottom: 24px; }
-}
-
-// ── Hero ─────────────────────────────────────────────────────────
-.pk-hero {
-	position: relative;
-	min-height: 480px;
-	background-size: cover;
-	background-position: center;
-	background-color: var(--card-background, #191b20);
-	overflow: hidden;
-
-	@media (max-width: 768px) { min-height: 320px; }
-}
-
-.pk-hero__overlay {
-	position: absolute;
-	inset: 0;
-	background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.15) 100%);
-	display: flex;
-	align-items: flex-end;
-}
-
-.pk-hero__inner {
-	max-width: 900px;
-	margin: 0 auto;
-	width: 100%;
-	padding: 48px 24px;
-
-	@media (max-width: 768px) { padding: 24px 16px; }
-}
-
-.pk-hero__logo {
-	margin-bottom: 16px;
-
-	img {
-		max-height: 80px;
-		max-width: 240px;
-		object-fit: contain;
-	}
-}
-
-.pk-hero__title {
-	font-size: 2.8rem;
-	font-weight: 700;
-	margin: 0 0 8px;
-	line-height: 1.1;
-
-	@media (max-width: 768px) { font-size: 1.8rem; }
-}
-
-.pk-hero__tagline {
-	font-size: 1.1rem;
-	color: rgba(255,255,255,0.75);
-	margin: 0 0 20px;
-	max-width: 600px;
-}
-
-.pk-hero__actions {
-	display: flex;
-	gap: 10px;
-	flex-wrap: wrap;
-}
-
-// ── Buttons ───────────────────────────────────────────────────────
-.pk-btn {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	background: var(--primary, #fcb216);
-	color: var(--primary-contrast, #13161c);
-	border: none;
-	padding: 10px 22px;
-	font-weight: 700;
-	font-size: 0.9rem;
-	cursor: pointer;
-	text-decoration: none;
-	transition: opacity 0.15s;
-
-	&:hover { opacity: 0.85; }
-
-	&--outline {
-		background: rgba(252, 178, 22, 0.12);
-		color: var(--primary, #fcb216);
-		border: 1px solid var(--primary, #fcb216);
-	}
-
-	&--ghost {
-		background: rgba(255,255,255,0.08);
-		color: var(--text-primary, #fff);
-		border: 1px solid rgba(255,255,255,0.2);
-	}
-
-	&--sm {
-		padding: 7px 16px;
-		font-size: 0.82rem;
-	}
-
-	&--full {
-		width: 100%;
-		justify-content: center;
-		margin-top: 10px;
-	}
-}
-
-// ── Container / Layout ────────────────────────────────────────────
-.pk-container {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 48px 16px;
-}
-
-.pk-layout {
-	display: grid;
-	grid-template-columns: 280px 1fr;
-	gap: 40px;
-	align-items: start;
-
-	@media (max-width: 900px) {
-		grid-template-columns: 1fr;
-	}
-}
-
-.pk-sidebar {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	position: sticky;
-	top: 24px;
-
-	@media (max-width: 900px) { position: static; }
-}
-
-.pk-main {
-	display: flex;
-	flex-direction: column;
-	gap: 48px;
-}
-
-// ── Card (sidebar) ────────────────────────────────────────────────
-.pk-card {
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-	padding: 20px;
-
-	&--accent {
-		border-color: var(--primary, #fcb216);
-		background: rgba(252, 178, 22, 0.05);
-	}
-
-	&__title {
-		font-size: 0.75rem;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		font-weight: 700;
-		color: var(--text-secondary, #888);
-		margin: 0 0 14px;
-	}
-
-	&__desc {
-		font-size: 0.82rem;
-		color: var(--text-secondary, #aaa);
-		line-height: 1.5;
-		margin: 0;
-	}
-}
-
-.pk-dl {
-	margin: 0;
-
-	dt {
-		font-size: 0.7rem;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--text-secondary, #888);
-		margin-top: 10px;
-	}
-
-	dd {
-		margin: 3px 0 0;
-		font-size: 0.88rem;
-		color: var(--text-primary, #fff);
-		word-break: break-word;
-
-		a { color: var(--primary, #fcb216); text-decoration: none; }
-	}
-}
-
-.pk-links {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.pk-link {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	color: var(--text-secondary, #aaa);
-	text-decoration: none;
-	font-size: 0.88rem;
-	padding: 6px 0;
-	border-bottom: 1px solid var(--divider, #2a2d35);
-	transition: color 0.15s;
-
-	&:last-child { border-bottom: none; }
-	&:hover { color: var(--primary, #fcb216); }
-}
-
-// ── Sections ──────────────────────────────────────────────────────
-.pk-section {
-	&__head {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 10px;
-		margin-bottom: 16px;
-		padding-bottom: 10px;
-		border-bottom: 1px solid var(--divider, #2a2d35);
-	}
-
-	&__title {
-		font-size: 1.1rem;
-		font-weight: 700;
-		margin: 0 0 16px;
-		padding-bottom: 10px;
-		border-bottom: 1px solid var(--divider, #2a2d35);
-	}
-}
-
-.pk-prose {
-	font-size: 0.95rem;
-	line-height: 1.7;
-	color: var(--text-secondary, #ccc);
-
-	:deep(p) { margin-bottom: 12px; }
-}
-
-.pk-features {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 8px 24px;
-
-	@media (max-width: 600px) { grid-template-columns: 1fr; }
-
-	li {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-		font-size: 0.9rem;
-		color: var(--text-secondary, #ccc);
-
-		&::before {
-			content: '▸';
-			color: var(--primary, #fcb216);
-			flex-shrink: 0;
-			margin-top: 1px;
-		}
-	}
-}
-
-// ── Videos ────────────────────────────────────────────────────────
-.pk-videos {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-	gap: 12px;
-}
-
-.pk-video-card {
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-	cursor: pointer;
-	overflow: hidden;
-	transition: border-color 0.15s;
-
-	&:hover { border-color: var(--primary, #fcb216); }
-
-	&__thumb {
-		aspect-ratio: 16 / 9;
-		background: var(--divider, #2a2d35);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1.8rem;
-		color: var(--primary, #fcb216);
-	}
-
-	&__title {
-		display: block;
-		font-size: 0.8rem;
-		font-weight: 600;
-		padding: 8px 10px 2px;
-		color: var(--text-primary, #fff);
-	}
-
-	&__type {
-		display: block;
-		font-size: 0.7rem;
-		padding: 0 10px 8px;
-		color: var(--text-secondary, #888);
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-	}
-}
-
-// ── Asset filters ─────────────────────────────────────────────────
-.pk-asset-filters {
-	display: flex;
-	gap: 6px;
-	flex-wrap: wrap;
-}
-
-.pk-filter {
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-	color: var(--text-secondary, #888);
-	padding: 4px 12px;
-	font-size: 0.75rem;
-	cursor: pointer;
-	text-transform: capitalize;
-	transition: all 0.15s;
-
-	&:hover { color: var(--text-primary, #fff); }
-
-	&.active {
-		background: var(--primary, #fcb216);
-		border-color: var(--primary, #fcb216);
-		color: var(--primary-contrast, #13161c);
-		font-weight: 700;
-	}
-}
-
-// ── Assets grid ───────────────────────────────────────────────────
-.pk-assets {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 12px;
-	margin-top: 16px;
-}
-
-.pk-asset {
-	display: flex;
-	flex-direction: column;
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-	text-decoration: none;
-	color: inherit;
-	transition: border-color 0.15s;
-
-	&:hover { border-color: var(--primary, #fcb216); }
-
-	&__thumb {
-		aspect-ratio: 16 / 9;
-		overflow: hidden;
-		background: var(--divider, #2a2d35);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1.5rem;
-		color: var(--text-secondary, #555);
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-			display: block;
-		}
-	}
-
-	&__dl-icon { font-size: 1.4rem; color: var(--text-secondary, #555); }
-
-	&__body {
-		padding: 10px;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__title {
-		font-size: 0.8rem;
-		font-weight: 600;
-		color: var(--text-primary, #fff);
-	}
-
-	&__size {
-		font-size: 0.7rem;
-		color: var(--text-secondary, #888);
-	}
-}
-
-.pk-empty {
-	color: var(--text-secondary, #888);
-	font-size: 0.9rem;
-	padding: 16px 0;
-}
-
-// ── Quotes ────────────────────────────────────────────────────────
-.pk-quotes {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.pk-quote {
-	border-left: 3px solid var(--primary, #fcb216);
-	padding: 12px 20px;
-	background: var(--card-background, #191b20);
-	margin: 0;
-
-	p {
-		font-size: 1rem;
-		font-style: italic;
-		color: var(--text-secondary, #ccc);
-		margin: 0 0 8px;
-		line-height: 1.6;
-	}
-
-	footer {
-		font-size: 0.8rem;
-		color: var(--text-secondary, #888);
-
-		a { color: var(--primary, #fcb216); text-decoration: none; }
-	}
-}
-
-// ── Articles ──────────────────────────────────────────────────────
-.pk-articles {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-	gap: 14px;
-}
-
-.pk-article {
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-	text-decoration: none;
-	color: inherit;
-	overflow: hidden;
-	transition: border-color 0.15s;
-	display: flex;
-	flex-direction: column;
-
-	&:hover { border-color: var(--primary, #fcb216); }
-
-	&__thumb {
-		aspect-ratio: 16 / 9;
-		background: var(--divider, #2a2d35) center / cover;
-		position: relative;
-	}
-
-	&__src {
-		position: absolute;
-		top: 8px;
-		left: 8px;
-		background: var(--primary, #fcb216);
-		color: var(--primary-contrast, #13161c);
-		font-size: 0.65rem;
-		font-weight: 700;
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
-		padding: 3px 8px;
-
-		&.external {
-			background: var(--card-background, #191b20);
-			color: var(--text-secondary, #888);
-			border: 1px solid var(--divider, #2a2d35);
-		}
-	}
-
-	&__body {
-		padding: 12px 14px;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-	}
-
-	&__title {
-		font-size: 0.88rem;
-		font-weight: 600;
-		line-height: 1.4;
-		color: var(--text-primary, #fff);
-		margin: 0;
-	}
-
-	&__date {
-		font-size: 0.75rem;
-		color: var(--text-secondary, #888);
-	}
-}
-
-// ── Coverage ──────────────────────────────────────────────────────
-.pk-coverage {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 12px;
-}
-
-.pk-creator {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	text-align: center;
-	gap: 10px;
-	padding: 20px 16px;
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-	text-decoration: none;
-	color: inherit;
-	transition: border-color 0.15s;
-
-	&:hover { border-color: var(--primary, #fcb216); }
-
-	&__avatar {
-		width: 56px;
-		height: 56px;
-		background: var(--divider, #2a2d35) center / cover;
-		border: 2px solid var(--primary, #fcb216);
-	}
-
-	&__info {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-
-		strong { font-size: 0.9rem; color: var(--text-primary, #fff); }
-		span   { font-size: 0.78rem; color: var(--text-secondary, #888); }
-	}
-
-	&__followers {
-		font-size: 0.72rem !important;
-		color: var(--primary, #fcb216) !important;
-		font-weight: 600;
-	}
-
-	&__label {
-		font-size: 0.7rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--text-secondary, #888);
-		border: 1px solid var(--divider, #2a2d35);
-		padding: 2px 8px;
-	}
-}
-
-// ── Awards ────────────────────────────────────────────────────────
-.pk-awards {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-
-.pk-award {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	padding: 12px 16px;
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-
-	&__star { color: var(--primary, #fcb216); font-size: 1.2rem; flex-shrink: 0; }
-
-	&__body {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-
-		strong { font-size: 0.9rem; color: var(--text-primary, #fff); }
-		span   { font-size: 0.8rem; color: var(--text-secondary, #888); }
-	}
-
-	&__link { color: var(--primary, #fcb216); text-decoration: none; }
-}
-
-// ── Team / Credits ─────────────────────────────────────────────────
-.pk-credits {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 10px;
-}
-
-.pk-credit {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	padding: 12px 14px;
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-
-	strong { font-size: 0.9rem; color: var(--text-primary, #fff); }
-	span   { font-size: 0.78rem; color: var(--text-secondary, #888); }
-
-	a {
-		color: var(--primary, #fcb216);
-		text-decoration: none;
-		font-size: 0.78rem;
-		margin-top: 4px;
-	}
-}
-
-// ── Ecosystem ─────────────────────────────────────────────────────
-.pk-ecosystem {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 14px;
-
-	@media (max-width: 640px) { grid-template-columns: 1fr; }
-}
-
-.pk-eco-card {
-	background: var(--card-background, #191b20);
-	border: 1px solid var(--divider, #2a2d35);
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	text-decoration: none;
-	color: inherit;
-	transition: border-color 0.15s;
-
-	&:hover { border-color: var(--primary, #fcb216); }
-
-	&--full { grid-column: 1 / -1; }
-
-	&__title {
-		font-size: 0.75rem;
-		text-transform: uppercase;
-		letter-spacing: 0.07em;
-		font-weight: 700;
-		color: var(--text-secondary, #888);
-		margin: 0 0 8px;
-	}
-
-	&__label {
-		font-size: 0.75rem;
-		text-transform: uppercase;
-		letter-spacing: 0.07em;
-		font-weight: 700;
-		color: var(--primary, #fcb216);
-		margin: 0;
-	}
-
-	&__text {
-		font-size: 0.88rem;
-		color: var(--text-secondary, #ccc);
-		line-height: 1.5;
-		margin: 0;
-	}
-}
-
-.pk-showcases {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-
-.pk-showcase {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	background: var(--divider, #2a2d35);
-	border: 1px solid var(--divider, #2a2d35);
-	padding: 6px 12px;
-	font-size: 0.82rem;
-	color: var(--text-secondary, #ccc);
-
-	&.featured {
-		border-color: var(--primary, #fcb216);
-		background: rgba(252, 178, 22, 0.06);
-		color: var(--text-primary, #fff);
-	}
-
-	em { font-style: normal; color: var(--text-secondary, #888); margin-left: 4px; }
-}
-
-.pk-eco-mag {
-	display: flex;
-	gap: 14px;
-	align-items: center;
-
-	&__cover {
-		width: 52px;
-		aspect-ratio: 3 / 4;
-		background: var(--divider, #2a2d35) center / cover;
-		border: 1px solid var(--divider, #2a2d35);
-		flex-shrink: 0;
-	}
-
-	&__title {
-		font-size: 0.88rem;
-		font-weight: 600;
-		color: var(--text-primary, #fff);
-		margin: 0 0 4px;
-	}
-
-	&__issue {
-		font-size: 0.75rem;
-		color: var(--text-secondary, #888);
-		margin: 0;
-	}
-}
-
-// ── Brand footer ──────────────────────────────────────────────────
-.pk-brand-footer {
-	text-align: center;
-	font-size: 0.75rem;
-	color: var(--text-secondary, #666);
-	padding: 20px 16px;
-	border-top: 1px solid var(--divider, #2a2d35);
-	margin: 0;
-
-	strong { color: var(--text-secondary, #888); font-weight: 600; }
-
-	a {
-		color: var(--text-secondary, #888);
-		text-decoration: none;
-		border-bottom: 1px solid var(--divider, #2a2d35);
-		transition: color 0.15s, border-color 0.15s;
-
-		&:hover {
-			color: var(--primary, #fcb216);
-			border-color: var(--primary, #fcb216);
-		}
-	}
-}
-
-// ── Scroll unlock (body has overflow-y: hidden globally in some frontends) ───
-:global(body):has(.pk-page) {
-	overflow-y: auto !important;
-	max-height: none !important;
-}
-
-// ── Trailer modal ─────────────────────────────────────────────────
-.pk-modal {
-	position: fixed;
-	inset: 0;
-	background: rgba(0,0,0,0.92);
-	z-index: 9000;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	&__close {
-		position: absolute;
-		top: 16px;
-		right: 20px;
-		background: none;
-		border: none;
-		color: var(--text-primary, #fff);
-		font-size: 2rem;
-		cursor: pointer;
-		z-index: 1;
-	}
-
-	&__video {
-		width: 80vw;
-		max-width: 900px;
-		aspect-ratio: 16 / 9;
-		border: none;
-		display: block;
-	}
-}
-</style>