/* adBFQ - APP图标广告位样式（首页“本周热门”上方） */
.appads-box {
	display: grid;
	/* 电脑：固定 12 列（= 改回之前的样子：一排 12 个、图标随栏宽铺满整行）。
	   第 13 个起自动换到下一行。手机端见下面的媒体查询（6 列、上限 55px）。 */
	grid-template-columns: repeat(12, 1fr);
	gap: 20px 15px;
	margin: 0 0 25px
}
.appads-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	/* min-width:0 必须留着：网格列是 1fr(=minmax(auto,1fr))，不加这个的话
	   「图标下方那行 nowrap 的中文名」会撑住列的自动下限 → 名字长的列变宽、
	   那一列的图标跟着变大（手机端 6 列时实测 60/48/38 三种尺寸）。 */
	min-width: 0
}
.appads-icon {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #f3f5f7
}
.appads-icon img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover
}
.appads-name {
	margin-top: 6px;
	width: 100%;
	font-size: 12px;
	color: rgba(0, 0, 0, .62);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
@media(max-width:559px) {
	.appads-box {
		/* 手机：固定 6 列 —— 整行一定铺满（之前用 auto-fill,50px，屏一宽右边就空一截）。
		   图标填满列宽、上限 55px（用户指定），所以实际落在 ~50px(375屏) ~ 55px(430屏) 之间。 */
		grid-template-columns: repeat(6, 1fr);
		gap: 12px 6px;
		margin: 0 0 15px
	}
	.appads-icon {
		/* 宽度/正方形比例沿用上面基础样式（width:100% + aspect-ratio:1/1），
		   这里只加尺寸上限和居中 */
		max-width: 55px;
		margin: 0 auto;
		border-radius: 10px
	}
	.appads-title {
		margin-top: 2px !important
	}
}

/* 播放详情页「推荐应用」一行走马灯
   位置：详情页「下载列表」下方、详情页横幅上方（html/index/appads_detail.html）
   机制移植自 69yingshipy conch 的 .coop_scroll（已验证）：两份相同列表 + translateX(-50%) 无缝循环、悬停暂停。
   数据与首页图标墙同一套 appads，仅此处改成一行横向滚动。 */
.appads-marquee {
	overflow: hidden;
	position: relative;
	margin: 15px 0 0
}
.appads-marquee-track {
	display: flex;
	width: max-content;
	animation: appadsMarquee 10s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0)
}
.appads-marquee-list {
	display: flex;
	width: max-content;
	flex-shrink: 0
}
.appads-marquee-item {
	display: block;
	flex: 0 0 auto;
	width: 128px;
	padding: 12px 10px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	/* 同 .appads-item：不加 min-width:0 的话，名字比宽度还长时会把这一个条目撑宽 */
	min-width: 0
}
.appads-marquee-pic {
	display: block;
	width: 100%;
	position: relative;
	padding-top: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: #f3f5f7
}
.appads-marquee-pic img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover
}
.appads-marquee-name {
	display: block;
	margin-top: 6px;
	width: 100%;
	font-size: 12px;
	color: rgba(0, 0, 0, .62);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
.appads-marquee:hover .appads-marquee-track {
	animation-play-state: paused
}
@keyframes appadsMarquee {
	to {
		transform: translateX(-50%)
	}
}
@media (max-width:559px) {
	.appads-marquee-item {
		width: 20vw;
		padding: 8px 6px
	}
	.appads-marquee-pic {
		border-radius: 10px
	}
	.appads-marquee-name {
		margin-top: 4px;
		font-size: 11px
	}
}

/* 首页「推荐应用」两行反向走马灯
   位置：首页·正在热播下方（html/index/appads.html）
   模板里是两份 .appads-marquee，第二份多一个 .appads-rev。
   ⚠️ 规则全部挂在 .appads-2row 下面 —— 上面那套 .appads-marquee* 是首页/详情页共用的，
      直接改会连带改掉详情页那行走马灯。这里只控制第二行的方向，不碰原规则。 */
.appads-2row .appads-marquee.appads-rev {
	margin: 10px 0 0
}

/* 反向：关键帧是 0 → translateX(-50%)，倒放即 -50% → 0，也就是向右跑，同样无缝 */
.appads-2row .appads-marquee.appads-rev .appads-marquee-track {
	animation-direction: reverse
}