<template>
	<view class="hot-page hot-page--tab">
		<scroll-view
			class="page-scroll"
			scroll-y
			:show-scrollbar="false"
			:lower-threshold="120"
			@scrolltolower="loadMoreWallPosts"
		>
			<view class="page-content">
				<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
					<view class="brand-line">
						<text class="brand">校园热榜</text>
						<text class="eating">热议中</text>
					</view>
					<view class="subtitle">每天都有新鲜事，全校都在聊</view>
					<view class="search-box">
						<uni-icons type="search" size="20" color="#929b98"></uni-icons>
						<input
							v-model.trim="keyword"
							class="search-input"
							placeholder="搜索校园热议、关键词"
							placeholder-class="placeholder"
							confirm-type="search"
							@confirm="search"
						/>
						<view class="search-button" @tap="search">搜索</view>
					</view>
				</view>
				<view class="header-spacer" :style="{ height: headerSpacerHeight + 'px' }"></view>

				<view class="category-panel">
					<view
						class="hot-category"
						:class="['hot-category--' + item.tone, { 'hot-category--active': activeCategory === item.tone }]"
						v-for="item in hotCategories"
						:key="item.name"
						@tap="selectCategory(item)"
					>
						<view class="hot-category-icon">
							<image v-if="releaseCategoryIconImages[item.tone]" class="hot-category-img" :src="releaseCategoryIconImages[item.tone]" mode="aspectFit"></image>
							<view v-else class="hot-category-empty"></view>
						</view>
						<view class="hot-category-name">{{item.name}}</view>
						<view class="hot-category-desc">{{item.desc}}</view>
					</view>
				</view>
				
				<!-- <view class="section bubble-section">
					<view class="section-head">
						<text>正在爆 🔥</text>
						<view class="change" @tap="shuffleTopics">⟳ 换一换</view>
					</view>
					<view class="bubble-stage">
						<view
							v-for="(topic, index) in topics"
							:key="topic.name"
							class="topic-bubble"
							:class="'topic-bubble--' + index"
							:style="bubbleStyle(topic)"
							@tap="selectTopic(topic)"
						>
							<view class="bubble-glow"></view>
							<text>{{topic.name}}</text>
							<text>{{topic.count}}</text>
							<text v-if="index === 1" class="bubble-fire">🔥</text>
						</view>
					</view>
				</view> -->

				<view class="section wall-section">
					<view class="section-head wall-head">
						<view>
							<text class="wall-title-main">{{currentSectionTitle}}</text>
							<view class="wall-subtitle">{{currentSectionSubtitle}}</view>
						</view>
						<view class="wall-page">
							<view class="wall-live-dot"></view>
							<text>{{activeCategory === 'wall' ? '实时更新' : '正在匹配'}}</text>
						</view>
					</view>
					<view v-if="activeCategory === 'wall'" class="wall-list">
						<view
							class="wall-item"
							v-for="item in visibleWallPosts"
							:key="item.id"
						>
							<view class="wall-author-row">
								<view class="wall-avatar">{{item.author.slice(0, 1)}}</view>
								<view class="wall-author">{{item.author}}</view>
								<view class="wall-time">{{item.time}}</view>
							</view>
							<view class="wall-title">{{item.title}}</view>
							<view class="wall-text">{{item.content}}</view>
							<view
								v-if="getWallImages(item).length"
								class="wall-image-grid"
								:class="'wall-image-grid--' + Math.min(getWallImages(item).length, 3)"
							>
								<image
									v-for="(pic, picIndex) in getWallImages(item)"
									:key="picIndex"
									class="wall-post-image"
									:src="pic"
									mode="aspectFill"
									@tap.stop="previewWallImages(item, picIndex)"
								></image>
							</view>
							<view class="wall-footer">
								<view class="wall-meta">
									<text class="wall-comment">{{item.comments}} 条评论</text>
								</view>
								<view class="reaction-row wall-reactions">
									<view
										v-for="reaction in item.reactions"
										:key="reaction.icon"
										class="reaction-pill"
										:class="{ 'reaction-pill--active': activeReactionKey === item.id + '-' + reaction.icon }"
										@tap.stop="reactRank(item, reaction, $event)"
									>
										<text class="reaction-emoji">{{reaction.icon}}</text>
										<text class="reaction-count">{{reaction.count}}</text>
									</view>
								</view>
							</view>
					</view>
					</view>
					<view v-else class="partner-list">
						<view class="partner-card" v-for="item in currentPartnerPosts" :key="item.id">
							<view class="partner-top">
								<view class="partner-avatar">{{item.author.slice(0, 1)}}</view>
								<view class="partner-main">
									<view class="partner-title">{{item.title}}</view>
									<view class="partner-meta">{{item.author}} · {{item.time}} · {{item.place}}</view>
								</view>
								<view class="partner-action">搭一下</view>
							</view>
							<view class="partner-desc">{{item.desc}}</view>
							<view class="partner-tags">
								<text v-for="tag in item.tags" :key="tag">{{tag}}</text>
							</view>
							<view class="partner-bottom">
								<text>{{item.need}}</text>
								<text>{{item.heat}} 人想一起</text>
							</view>
						</view>
					</view>
					<view v-if="activeCategory === 'wall'" class="wall-load-state">
						{{wallLoading ? '正在加载更多校园墙...' : (wallHasMore ? '上滑查看更多校园墙' : '今天的校园墙先看到这里')}}
					</view>
				</view>

				<!-- 

				<view class="duo-grid">
					<view class="section comment-card">
						<view class="section-head compact"><text>今日神评论</text></view>
						<view class="comment-content">
							<view class="comment-source">神评　今天食堂阿姨手抖了。</view>
							<view class="comment-main">抖的是手，不是良心。 😼</view>
							<view class="comment-user"><text>🐱 一只小番茄</text><text class="hot-count">🔥 1238</text></view>
						</view>
						<view class="reply-row">
							<view>
								<text class="reply-avatar">👩</text>
								<view><text>快乐肥宅水</text><text class="reply-copy">哈哈哈哈阿姨人间清醒！</text></view>
							</view>
							<text>♧ 362</text>
						</view>
					</view>

					<view class="section reward-card">
						<view class="section-head compact">
							<text>校园悬赏</text>
							<view class="change">更多悬赏 ›</view>
						</view>
						<view class="reward-title">谁知道今天为什么停电？</view>
						<view class="reward-sub">在线等，挺急的！</view>
						<view class="reward-prize">✿ 奖励　🟡 星球券</view>
						<view class="reward-bottom">
							<view class="mini-avatars"><text>👨</text><text>👩</text><text>🧑</text><text>23 人正在回答</text></view>
							<view class="answer-btn">去回答</view>
						</view>
					</view>
				</view>

				<view class="trio-grid">
					<view class="section rumor-card">
						<view class="section-head compact"><text>今日最离谱</text></view>
						<view class="card-sub">匿名爆料 · 真实分享</view>
						<view class="rumor-text">凌晨三点，有人在操场放《好运来》，全宿舍楼一起鼓掌... 😂</view>
						<view class="stamp">离谱</view>
						<view class="card-foot">👥 886 人觉得离谱</view>
					</view>

					<view class="section map-card">
						<view class="section-head compact">
							<text>校园瓜地图</text>
							<view class="change">进地图 ›</view>
						</view>
						<view class="map-body">
							<view class="road road-a"></view>
							<view class="road road-b"></view>
							<view class="map-point point-a"><text>宿舍区</text><text>😂😂😂</text></view>
							<view class="map-point point-b"><text>图书馆</text><text>🔥😎</text></view>
							<view class="map-point point-c"><text>操场</text><text>😂😂😂</text></view>
							<view class="map-point point-d"><text>食堂</text><text>😂😂😂</text></view>
						</view>
					</view>

					<view class="section pk-card">
						<view class="section-head compact"><text>学院热度 PK</text></view>
						<view class="card-sub">今日活跃学院</view>
						<view class="podium">
							<view class="podium-item second"><text>2</text><view><text>法学院</text><text>发帖 67</text></view></view>
							<view class="podium-item first"><text>👑 1</text><view><text>计算机学院</text><text>发帖 89</text></view></view>
							<view class="podium-item third"><text>3</text><view><text>文学院</text><text>发帖 61</text></view></view>
						</view>
						<view class="pk-cheer">为你的学院加油助威 💪</view>
					</view>
				</view> -->

				<view class="bottom-space"></view>
			</view>
		</scroll-view>
		<view class="reaction-effect-layer" v-if="reactionEffects.length">
			<view
				v-for="effect in reactionEffects"
				:key="effect.id"
				class="reaction-pop-bubble"
				:style="effect.style"
			>
				<text>{{ effect.icon }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	const RELEASE_ICON_CACHE_KEY = 'release_category_icon_cache_v1'
	const RELEASE_ICON_CACHE_TTL = 30 * 24 * 60 * 60 * 1000
	const RELEASE_ICON_CACHE_LIMIT = 8
	const releaseIconDownloading = {}
	const RELEASE_CATEGORY_ICON_URLS = {
		wall: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f3b050e7f6d74bb9adca54de0bf3fc17.png',
		game: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f8d490dfec0a4d17b7c18d710502f6f2.png',
		daily: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e810837993204689bda2fc68d1d29448.png',
		sport: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/01444d0812c544fe9cde7cbbb919b473.png'
	}

	export default {
		data() {
			return {
				statusBarHeight: 24,
				keyword: '',
				activeReactionKey: '',
				reactionEffects: [],
				bubbleTimer: null,
				bubbleReady: false,
				activeCategory: 'wall',
				wallPage: 1,
				wallPageSize: 3,
				wallLoading: false,
				lastCampusPublishRefreshAt: 0,
				releaseCategoryIconImages: {
					wall: '',
					game: '',
					daily: '',
					sport: ''
				},
				hotCategories: [{
					name: '校园墙',
					desc: '看看新鲜事',
					tone: 'wall',
					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f3b050e7f6d74bb9adca54de0bf3fc17.png'
				}, {
					name: '游戏搭子',
					desc: '开黑组队',
					tone: 'game',
					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f8d490dfec0a4d17b7c18d710502f6f2.png'
				}, {
					name: '日常搭子',
					desc: '饭搭自习',
					tone: 'daily',
					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e810837993204689bda2fc68d1d29448.png'
				}, {
					name: '运动搭子',
					desc: '约球跑步',
					tone: 'sport',
					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/01444d0812c544fe9cde7cbbb919b473.png'
				}],
				wallPosts: [{
					id: 'w1',
					title: '食堂二楼新窗口今天终于不用排队了',
					content: '刚下课过去正好赶上出锅，阿姨还多给了一勺汤。',
					author: '一只小番茄',
					time: '08:12',
					comments: 36,
					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
					pics: [
						'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
						'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=500&q=85'
					],
					reactions: [{ icon: '😂', count: 341 }, { icon: '😭', count: 22 }, { icon: '🤢', count: 88 }, { icon: '👍', count: 101 }]
				}, {
					id: 'w2',
					title: '图书馆三楼靠窗位置好适合发呆',
					content: '下午阳光刚好落在桌角，写作业都没有那么痛苦了。',
					author: '银河修理员',
					time: '10:26',
					comments: 18,
					pic: '',
					reactions: [{ icon: '😂', count: 76 }, { icon: '😭', count: 19 }, { icon: '🤢', count: 6 }, { icon: '👍', count: 95 }]
				}, {
					id: 'w3',
					title: '东门奶茶买一送一，队伍已经排到路口',
					content: '想喝的同学建议先去吃个饭，回来可能刚好排到。',
					author: '干饭第一名',
					time: '12:40',
					comments: 45,
					pic: '',
					reactions: [{ icon: '😂', count: 231 }, { icon: '😭', count: 11 }, { icon: '🤢', count: 45 }, { icon: '👍', count: 88 }]
				}, {
					id: 'w4',
					title: '操场有人放歌，全场突然合唱了',
					content: '晚风、跑道、歌声，今天的校园有点像青春片。',
					author: '不会投三分',
					time: '18:32',
					comments: 29,
					pic: 'https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=500&q=85',
					pics: [
						'https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=500&q=85',
						'https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=500&q=85',
						'https://images.unsplash.com/photo-1574629810360-7efbbe195018?auto=format&fit=crop&w=500&q=85'
					],
					reactions: [{ icon: '😂', count: 206 }, { icon: '😭', count: 8 }, { icon: '🤢', count: 3 }, { icon: '👍', count: 133 }]
				}, {
					id: 'w5',
					title: '宿舍楼下的猫今天营业了',
					content: '它蹲在门口看了我们十分钟，像是在检查谁没带饭。',
					author: '桃桃乌龙',
					time: '21:10',
					comments: 52,
					pic: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=500&q=85',
					reactions: [{ icon: '😂', count: 108 }, { icon: '😭', count: 15 }, { icon: '🤢', count: 2 }, { icon: '👍', count: 167 }]
				}, {
					id: 'w6',
					title: '求问：明天早八的教室是不是换了？',
					content: '群里消息太多翻不到了，有同课的同学救一下。',
					author: '匿名同学',
					time: '22:06',
					comments: 23,
					pic: '',
					reactions: [{ icon: '😂', count: 54 }, { icon: '😭', count: 66 }, { icon: '🤢', count: 1 }, { icon: '👍', count: 49 }]
				}],
				partnerPosts: [{
					id: 'p1',
					type: 'game',
					title: '今晚王者五排差一个辅助',
					desc: '不压力，开麦就行，输赢随缘，主要是宿舍太安静了。',
					author: '蓝 buff 保管员',
					time: '20:30',
					place: '线上',
					need: '还差 1 人',
					heat: 18,
					tags: ['王者荣耀', '开麦', '不压力']
				}, {
					id: 'p2',
					type: 'game',
					title: '周末桌游局，缺两个新朋友',
					desc: '狼人杀、UNO、卡坦都可以，新手友好，社恐也能来。',
					author: '桌游社小窗',
					time: '周六 14:00',
					place: '活动中心',
					need: '还差 2 人',
					heat: 26,
					tags: ['桌游', '新手友好', '周末']
				}, {
					id: 'p3',
					type: 'daily',
					title: '找一个长期自习搭子',
					desc: '图书馆三楼，晚上 7 点到 10 点，互相监督别刷手机。',
					author: '明天一定早睡',
					time: '今晚',
					place: '图书馆',
					need: '1 对 1',
					heat: 31,
					tags: ['自习', '考研', '互相监督']
				}, {
					id: 'p4',
					type: 'daily',
					title: '东门晚饭搭子，有人一起吗',
					desc: '想吃砂锅或者麻辣拌，吃完顺便散步回宿舍。',
					author: '干饭雷达',
					time: '18:10',
					place: '东门',
					need: '2-3 人',
					heat: 22,
					tags: ['饭搭子', '东门', '不尬聊']
				}, {
					id: 'p5',
					type: 'sport',
					title: '操场夜跑 3 公里，慢速局',
					desc: '不卷配速，跑完拉伸，适合想恢复运动的同学。',
					author: '慢跑小队',
					time: '21:00',
					place: '操场',
					need: '还差 3 人',
					heat: 39,
					tags: ['夜跑', '慢速', '操场']
				}, {
					id: 'p6',
					type: 'sport',
					title: '周三羽毛球双打缺一位',
					desc: '水平普通，主要出汗，拍子可以借。',
					author: '羽毛球不落地',
					time: '周三 19:30',
					place: '体育馆',
					need: '还差 1 人',
					heat: 16,
					tags: ['羽毛球', '双打', '可借拍']
				}],
				ranks: [{
					rank: 1,
					title: '食堂红烧肉今天又翻车了',
					views: 982,
					rise: 236,
					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
					emoji: '🍱',
					reactions: [{ icon: '😂', count: 341 }, { icon: '😭', count: 22 }, { icon: '🤢', count: 88 }, { icon: '👍', count: 101 }]
				}, {
					rank: 2,
					title: '图书馆突然停电全场尖叫',
					views: 756,
					rise: 198,
					pic: '',
					emoji: '🏫',
					reactions: [{ icon: '😂', count: 276 }, { icon: '😭', count: 19 }, { icon: '😱', count: 66 }, { icon: '👍', count: 95 }]
				}, {
					rank: 3,
					title: '东门奶茶买一送一排队排到操场',
					views: 645,
					rise: 152,
					pic: '',
					emoji: '🧋',
					reactions: [{ icon: '😂', count: 231 }, { icon: '😭', count: 11 }, { icon: '🤢', count: 45 }, { icon: '👍', count: 88 }]
				}, {
					rank: 4,
					title: '操场有人放《孤勇者》全场合唱',
					views: 593,
					rise: 121,
					pic: '',
					emoji: '🌃',
					reactions: [{ icon: '😂', count: 206 }, { icon: '😈', count: 8 }]
				}, {
					rank: 5,
					title: '宿舍楼有人煮螺蛳粉',
					views: 512,
					rise: 96,
					pic: '',
					emoji: '😎🐱',
					reactions: [{ icon: '😂', count: 108 }, { icon: '😭', count: 15 }]
				}],
				topics: [
					{ name: '宿舍断电', count: 2564, x: 28, y: 120, size: 98, vx: .32, vy: -.18 },
					{ name: '食堂', count: 5621, x: 150, y: 28, size: 128, vx: -.24, vy: .22 },
					{ name: '军训', count: 1890, x: 95, y: 198, size: 84, vx: .25, vy: -.3 },
					{ name: '毕业设计', count: 1654, x: 265, y: 178, size: 86, vx: -.28, vy: -.22 },
					{ name: '四六级', count: 3412, x: 315, y: 80, size: 116, vx: .27, vy: .2 },
					{ name: '恋爱', count: 2376, x: 448, y: 60, size: 92, vx: -.3, vy: .26 },
					{ name: '外卖涨价', count: 1243, x: 506, y: 190, size: 86, vx: .26, vy: -.24 },
					{ name: '图书馆', count: 4128, x: 560, y: 120, size: 112, vx: -.32, vy: -.2 }
				]
			}
		},
		computed: {
			headerSpacerHeight() {
				return this.statusBarHeight + 96
			},
			filteredRanks() {
				const keyword = this.keyword.toLowerCase()
				if (!keyword) return this.ranks
				return this.ranks.filter(item => item.title.toLowerCase().indexOf(keyword) > -1)
			},
			visibleWallPosts() {
				return this.wallPosts.slice(0, this.wallPage * this.wallPageSize)
			},
			wallHasMore() {
				return this.visibleWallPosts.length < this.wallPosts.length
			},
			currentSectionTitle() {
				const titleMap = {
					wall: '校园墙',
					game: '游戏搭子',
					daily: '日常搭子',
					sport: '运动搭子'
				}
				return titleMap[this.activeCategory] || '校园墙'
			},
			currentSectionSubtitle() {
				const subtitleMap = {
					wall: '同学们正在讨论的校园小事',
					game: '开黑、桌游、联机都在这里找队友',
					daily: '饭搭、自习、散步，找一个刚好同频的人',
					sport: '约球、夜跑、健身，校园运动搭子集合'
				}
				return subtitleMap[this.activeCategory] || subtitleMap.wall
			},
			currentPartnerPosts() {
				return this.partnerPosts.filter(item => item.type === this.activeCategory)
			}
		},
		mounted() {
			this.init()
			this.bubbleReady = true
			this.startBubbleMotion()
		},
		onLoad() {
			uni.$off('campusPostPublished', this.refreshAfterCampusPublish)
			uni.$on('campusPostPublished', this.refreshAfterCampusPublish)
			this.init()
			this.checkCampusPublishRefresh()
		},
		onReady() {
			this.bubbleReady = true
			this.startBubbleMotion()
		},
		onShow() {
			if (this.bubbleReady) this.startBubbleMotion()
			this.checkCampusPublishRefresh()
		},
		onHide() {
			this.stopBubbleMotion()
		},
		onUnload() {
			uni.$off('campusPostPublished', this.refreshAfterCampusPublish)
			this.stopBubbleMotion()
		},
		beforeDestroy() {
			uni.$off('campusPostPublished', this.refreshAfterCampusPublish)
			this.stopBubbleMotion()
		},
		methods: {
			init() {
				const systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = Number(systemInfo.statusBarHeight) || 24
				this.applyCachedReleaseCategoryIcons()
			},
			refreshAfterCampusPublish(payload = {}) {
				const publishedAt = Number(payload.publishedAt || Date.now())
				if (publishedAt && publishedAt <= this.lastCampusPublishRefreshAt) return
				this.lastCampusPublishRefreshAt = publishedAt
				this.wallPage = 1
				this.init()
			},
			checkCampusPublishRefresh() {
				const publishedAt = Number(uni.getStorageSync('campusPostPublishedAt') || 0)
				if (publishedAt && publishedAt > this.lastCampusPublishRefreshAt) {
					this.refreshAfterCampusPublish({ publishedAt })
				}
			},
			reactRank(item, reaction, event) {
				const key = (item.id || item.rank) + '-' + reaction.icon
				this.activeReactionKey = key
				reaction.count += 1
				const touch = event && event.touches && event.touches[0]
				const detail = event && event.detail
				const id = Date.now() + '-' + Math.random()
				const left = touch ? touch.clientX : (detail && detail.x ? detail.x : 180)
				const top = touch ? touch.clientY : (detail && detail.y ? detail.y : 360)
				this.reactionEffects.push({
					id,
					icon: reaction.icon,
					style: `left:${left}px;top:${top}px;`
				})
				setTimeout(() => {
					this.reactionEffects = this.reactionEffects.filter(item => item.id !== id)
				}, 820)
			},
			backHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			search() {
				uni.hideKeyboard()
				if (this.keyword && !this.filteredRanks.length) {
					uni.showToast({ title: '暂时没有相关热榜', icon: 'none' })
				}
			},
			shuffleTopics() {
				this.topics.forEach((topic, index) => {
					const direction = index % 2 ? -1 : 1
					topic.vx = direction * (.32 + Math.random() * .22)
					topic.vy = (Math.random() - .5) * .7
				})
			},
			selectTopic(topic) {
				uni.showModal({
					title: topic.name + ' · 正在爆',
					content: '当前热度 ' + topic.count + '。这里后续可以展示该话题的校园墙讨论、最新评论和相关地点。',
					confirmText: '去看看',
					cancelText: '关闭'
				})
			},
			selectCategory(item) {
				if (!item || !item.tone) return
				this.activeCategory = item.tone
			},
			getReleaseIconCache() {
				const cache = uni.getStorageSync(RELEASE_ICON_CACHE_KEY)
				return cache && typeof cache === 'object' ? cache : {}
			},
			saveReleaseIconCache(cache) {
				uni.setStorageSync(RELEASE_ICON_CACHE_KEY, cache)
			},
			isReleaseSavedFileExists(filePath) {
				if (!filePath || filePath.indexOf('__tmp__') !== -1) return false
				try {
					const fs = (uni.getFileSystemManager && uni.getFileSystemManager())
						|| (typeof wx !== 'undefined' && wx.getFileSystemManager ? wx.getFileSystemManager() : null)
					if (fs && fs.accessSync) {
						fs.accessSync(filePath)
						return true
					}
				} catch (e) {
					return false
				}
				return true
			},
			isReleaseIconCacheValid(cacheItem) {
				return !!(cacheItem
					&& Date.now() - Number(cacheItem.savedAt || 0) < RELEASE_ICON_CACHE_TTL
					&& this.isReleaseSavedFileExists(cacheItem.path))
			},
			applyCachedReleaseCategoryIcons() {
				const cache = this.getReleaseIconCache()
				Object.keys(RELEASE_CATEGORY_ICON_URLS).forEach((key) => {
					const imageUrl = RELEASE_CATEGORY_ICON_URLS[key]
					const cacheItem = cache[imageUrl]
					if (this.isReleaseIconCacheValid(cacheItem)) {
						this.releaseCategoryIconImages[key] = cacheItem.path
						return
					}
					if (cacheItem && cacheItem.path) {
						delete cache[imageUrl]
					}
					this.releaseCategoryIconImages[key] = ''
					this.cacheReleaseCategoryIcon(key, imageUrl)
				})
				this.pruneReleaseIconCache(cache, Object.keys(RELEASE_CATEGORY_ICON_URLS).map(key => RELEASE_CATEGORY_ICON_URLS[key]))
				this.saveReleaseIconCache(cache)
			},
			cacheReleaseCategoryIcon(key, imageUrl) {
				if (releaseIconDownloading[imageUrl]) return
				releaseIconDownloading[imageUrl] = true
				uni.downloadFile({
					url: imageUrl,
					success: (downloadRes) => {
						if (downloadRes.statusCode !== 200 || !downloadRes.tempFilePath) {
							this.releaseCategoryIconImages[key] = imageUrl
							delete releaseIconDownloading[imageUrl]
							return
						}
						uni.saveFile({
							tempFilePath: downloadRes.tempFilePath,
							success: (saveRes) => {
								const cache = this.getReleaseIconCache()
								const oldCacheItem = cache[imageUrl]
								if (oldCacheItem && oldCacheItem.path && oldCacheItem.path !== saveRes.savedFilePath) {
									uni.removeSavedFile({
										filePath: oldCacheItem.path,
										fail: () => {}
									})
								}
								cache[imageUrl] = {
									path: saveRes.savedFilePath,
									savedAt: Date.now()
								}
								this.saveReleaseIconCache(cache)
								this.releaseCategoryIconImages[key] = saveRes.savedFilePath
							},
							fail: () => {
								this.releaseCategoryIconImages[key] = imageUrl
							},
							complete: () => {
								delete releaseIconDownloading[imageUrl]
							}
						})
					},
					fail: () => {
						this.releaseCategoryIconImages[key] = imageUrl
						delete releaseIconDownloading[imageUrl]
					},
					complete: (downloadRes) => {
						if (!downloadRes || downloadRes.statusCode !== 200) {
							this.releaseCategoryIconImages[key] = imageUrl
							delete releaseIconDownloading[imageUrl]
						}
					}
				})
			},
			pruneReleaseIconCache(cache, activeUrls) {
				const activeUrlMap = activeUrls.reduce((result, url) => {
					result[url] = true
					return result
				}, {})
				const now = Date.now()
				Object.keys(cache).forEach((url) => {
					const item = cache[url]
					const isExpired = !this.isReleaseIconCacheValid(item)
					if (isExpired && !activeUrlMap[url]) {
						item && item.path && uni.removeSavedFile({
							filePath: item.path,
							fail: () => {}
						})
						delete cache[url]
					}
				})
				const urls = Object.keys(cache).sort((a, b) => Number(cache[a].savedAt || now) - Number(cache[b].savedAt || now))
				while (urls.length > RELEASE_ICON_CACHE_LIMIT) {
					const url = urls.shift()
					if (activeUrlMap[url]) {
						urls.push(url)
						if (urls.every(itemUrl => activeUrlMap[itemUrl])) break
						continue
					}
					const item = cache[url]
					item && item.path && uni.removeSavedFile({
						filePath: item.path,
						fail: () => {}
					})
					delete cache[url]
				}
			},
			getWallImages(item) {
				if (!item) return []
				if (Array.isArray(item.pics) && item.pics.length) return item.pics
				return item.pic ? [item.pic] : []
			},
			previewWallImages(item, index) {
				const urls = this.getWallImages(item)
				if (!urls.length) return
				uni.previewImage({
					urls,
					current: urls[index] || urls[0]
				})
			},
			loadMoreWallPosts() {
				if (this.activeCategory !== 'wall') return
				if (this.wallLoading || !this.wallHasMore) return
				this.wallLoading = true
				setTimeout(() => {
					this.wallPage += 1
					this.wallLoading = false
				}, 280)
			},
			bubbleStyle(topic) {
				return 'width:' + topic.size + 'rpx;' +
					'height:' + topic.size + 'rpx;' +
					'transform:translate3d(' + topic.x + 'rpx,' + topic.y + 'rpx,0);'
			},
			startBubbleMotion() {
				if (this.bubbleTimer) return
				this.bubbleTimer = setInterval(this.moveBubbles, 360)
			},
			stopBubbleMotion() {
				if (!this.bubbleTimer) return
				clearInterval(this.bubbleTimer)
				this.bubbleTimer = null
			},
			moveBubbles() {
				const stageWidth = 700
				const stageHeight = 288
				const stepFactor = 9
				const bubbles = this.topics

				bubbles.forEach(bubble => {
					bubble.x += bubble.vx * stepFactor
					bubble.y += bubble.vy * stepFactor
					if (bubble.x <= 0 || bubble.x + bubble.size >= stageWidth) {
						bubble.x = Math.max(0, Math.min(stageWidth - bubble.size, bubble.x))
						bubble.vx *= -1
					}
					if (bubble.y <= 0 || bubble.y + bubble.size >= stageHeight) {
						bubble.y = Math.max(0, Math.min(stageHeight - bubble.size, bubble.y))
						bubble.vy *= -1
					}
				})

				for (let i = 0; i < bubbles.length; i++) {
					for (let j = i + 1; j < bubbles.length; j++) {
						const first = bubbles[i]
						const second = bubbles[j]
						const dx = second.x + second.size / 2 - first.x - first.size / 2
						const dy = second.y + second.size / 2 - first.y - first.size / 2
						const distance = Math.sqrt(dx * dx + dy * dy) || 1
						const minDistance = (first.size + second.size) / 2
						if (distance >= minDistance) continue

						const nx = dx / distance
						const ny = dy / distance
						const overlap = (minDistance - distance) / 2
						first.x -= nx * overlap
						first.y -= ny * overlap
						second.x += nx * overlap
						second.y += ny * overlap

						const firstNormal = first.vx * nx + first.vy * ny
						const secondNormal = second.vx * nx + second.vy * ny
						first.vx += (secondNormal - firstNormal) * nx
						first.vy += (secondNormal - firstNormal) * ny
						second.vx += (firstNormal - secondNormal) * nx
						second.vy += (firstNormal - secondNormal) * ny
					}
				}

				this.topics = bubbles.slice()
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f7faf8;
		color: #161d1a;
		font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	}

	.hot-page,
	.page-scroll {
		width: 100%;
		height: 100%;
	}

	.page-content {
		min-height: 100%;
		background:
			radial-gradient(circle at 90rpx 30rpx, rgba(198, 247, 231, .65), transparent 250rpx),
			linear-gradient(180deg, #f1fffb 0, #fff 720rpx, #f8fbf9 100%);
	}

	.header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		padding-right: 190rpx;
		padding-left: 28rpx;
		padding-bottom: 18rpx;
		background: linear-gradient(180deg, rgba(237, 255, 249, .99), rgba(249, 255, 252, .98));
		box-shadow: 0 8rpx 24rpx rgba(33, 111, 87, .06);
	}

	.header-spacer {
		width: 100%;
	}

	.hot-page--tab .brand-line {
		margin-left: 0;
		max-width: calc(100vw - 230rpx);
	}

	.hot-page--tab .subtitle {
		margin-left: 0;
	}

	.back-home {
		position: absolute;
		left: 18rpx;
		width: 92rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rpx;
		border: 1rpx solid rgba(35, 164, 122, .16);
		border-radius: 25rpx;
		background: rgba(255,255,255,.72);
		box-shadow: 0 5rpx 14rpx rgba(31, 94, 73, .07);
		color: #1e6f57;
		font-size: 18rpx;
		font-weight: 700;
	}

	.brand-line {
		height: 58rpx;
		display: flex;
		align-items: center;
		margin-left: 102rpx;
	}

	.brand {
		font-size: 39rpx;
		font-weight: 900;
		letter-spacing: -1rpx;
	}

	.eyes {
		margin-left: 9rpx;
		font-size: 26rpx;
		font-weight: 900;
		letter-spacing: 3rpx;
	}

	.eating {
		margin-left: 13rpx;
		padding: 7rpx 17rpx;
		border-radius: 24rpx;
		background: #31c78a;
		color: #fff;
		font-size: 19rpx;
		font-weight: 800;
	}

	.subtitle {
		margin-top: 2rpx;
		color: #69726f;
		font-size: 19rpx;
		letter-spacing: 1rpx;
	}

	.search-box {
		position: relative;
		width: calc(100vw - 48rpx);
		height: 66rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding-left: 20rpx;
		border: 2rpx solid #57d4ac;
		border-radius: 36rpx;
		background: rgba(255,255,255,.92);
		box-shadow: 0 9rpx 22rpx rgba(35, 145, 111, .08);
	}

	.search-input {
		flex: 1;
		height: 62rpx;
		margin-left: 9rpx;
		color: #26302c;
		font-size: 22rpx;
		line-height: 62rpx;
	}

	.placeholder {
		color: #a0a6a4;
	}

	.search-button {
		width: 94rpx;
		height: 56rpx;
		margin-right: 5rpx;
		border-radius: 30rpx;
		background: linear-gradient(135deg, #2bd398, #0db779);
		box-shadow: 0 7rpx 15rpx rgba(20, 182, 123, .24);
		color: #fff;
		font-size: 21rpx;
		font-weight: 800;
		line-height: 56rpx;
		text-align: center;
	}

	.hero-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14rpx;
		padding: 0 24rpx 20rpx;
	}

	.category-panel {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 14rpx;
		margin-top: 18rpx;
		padding: 10rpx 24rpx 20rpx;
	}

	.hot-category {
		height: 170rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 24rpx;
		background: #fff;
		box-shadow: 0 10rpx 24rpx rgba(35, 74, 61, 0.075);
	}

	.hot-category--active {
		border: 2rpx solid rgba(34, 191, 134, 0.55);
		box-shadow: 0 14rpx 30rpx rgba(34, 191, 134, 0.14);
		transform: translateY(-3rpx);
	}

	.hot-category--wall {
		background: linear-gradient(145deg, #ffffff, #edf5ff);
	}

	.hot-category--daily {
		background: linear-gradient(145deg, #ffffff, #edf5ff);
	}

	.hot-category--sport {
		background: linear-gradient(145deg, #ffffff, #edf5ff);
	}

	.hot-category--game {
		background: linear-gradient(145deg, #ffffff, #edf5ff);
	}

	.hot-category-icon {
		width: 84rpx;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 4rpx;
		border-radius: 26rpx;
		background: rgba(255, 255, 255, 0.72);
		box-shadow:
			inset 0 2rpx 0 rgba(255, 255, 255, 0.92),
			0 9rpx 18rpx rgba(33, 111, 87, 0.08);
	}

	.hot-category-img {
		width: 88rpx;
		height: 88rpx;
		border-radius: 22rpx;
		overflow: hidden;
	}

	.hot-category-empty {
		width: 34rpx;
		height: 34rpx;
		border-radius: 14rpx;
		background: linear-gradient(145deg, #e6eee9, #ffffff);
		box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 0.85);
	}

	.hot-category-name {
		color: #173f36;
		font-size: 21rpx;
		font-weight: 900;
		line-height: 30rpx;
	}

	.hot-category-desc {
		margin-top: 5rpx;
		color: #7d8e88;
		font-size: 17rpx;
		font-weight: 700;
		line-height: 23rpx;
	}

	.heat-card,
	.watch-card,
	.melon-card {
		position: relative;
		height: 204rpx;
		overflow: hidden;
		border-radius: 21rpx;
		box-shadow: 0 10rpx 24rpx rgba(35, 74, 61, .08);
	}

	.heat-card {
		padding: 20rpx 17rpx;
		background: linear-gradient(145deg, #071417, #071012);
		color: #fff;
	}

	.heat-label {
		font-size: 20rpx;
		font-weight: 800;
	}

	.heat-number {
		margin-top: 10rpx;
		color: #ffe568;
		font-family: Arial, sans-serif;
		font-size: 40rpx;
		font-weight: 900;
		text-shadow: 0 0 14rpx rgba(255,224,72,.42);
	}

	.heat-number text {
		margin-left: 5rpx;
		color: #18c78b;
		font-size: 38rpx;
	}

	.heat-rise {
		display: inline-block;
		margin-top: 12rpx;
		padding: 5rpx 9rpx;
		border-radius: 10rpx;
		background: rgba(14, 129, 91, .24);
		color: #19c88d;
		font-size: 14rpx;
	}

	.chart {
		position: absolute;
		right: 0;
		bottom: 12rpx;
		left: 0;
		height: 48rpx;
	}

	.chart-line {
		position: absolute;
		height: 4rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #f1eb1b, #77f23b);
		box-shadow: 0 0 10rpx #b8ed31;
		transform-origin: left center;
	}

	.line-a { width: 69rpx; left: -4rpx; top: 30rpx; transform: rotate(-13deg); }
	.line-b { width: 61rpx; left: 61rpx; top: 15rpx; transform: rotate(2deg); }
	.line-c { width: 58rpx; left: 120rpx; top: 17rpx; transform: rotate(-20deg); }
	.line-d { width: 48rpx; left: 172rpx; top: 0; transform: rotate(-12deg); }
	.chart-dot { position: absolute; right: 7rpx; top: -8rpx; width: 9rpx; height: 9rpx; border-radius: 50%; background: #e8f637; box-shadow: 0 0 10rpx #e8f637; }

	.watch-card {
		padding: 17rpx 16rpx;
		background:
			radial-gradient(circle at 80% 8%, rgba(219,201,255,.65), transparent 85rpx),
			linear-gradient(135deg, #fbf8ff, #fff);
	}

	.watch-tag {
		display: inline-block;
		padding: 5rpx 10rpx;
		border-radius: 14rpx;
		background: linear-gradient(135deg, #9560f2, #b66df2);
		color: #fff;
		font-size: 14rpx;
		font-weight: 800;
	}

	.watch-title {
		margin-top: 11rpx;
		font-size: 19rpx;
		font-weight: 800;
		line-height: 29rpx;
	}

	.watch-title text,
	.reply-copy,
	.map-point text,
	.podium-item > view text {
		display: block;
	}

	.watch-meta {
		margin-top: 12rpx;
		color: #747c79;
		font-size: 14rpx;
	}

	.watch-meta text {
		color: #ce9132;
	}

	.avatar-row {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.avatar {
		width: 30rpx;
		height: 30rpx;
		margin-right: -6rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		background: #ebe8e5;
		font-size: 17rpx;
		line-height: 30rpx;
		text-align: center;
	}

	.more {
		margin-left: 12rpx;
		color: #8a908e;
		font-size: 15rpx;
		letter-spacing: 2rpx;
	}

	.melon-card {
		background:
			radial-gradient(circle at 78% 19%, rgba(255, 230, 169, .72), transparent 95rpx),
			linear-gradient(145deg, #fffdf7, #fff8e9);
	}

	.melon-image {
		position: absolute;
		top: -10rpx;
		left: 12rpx;
		width: 284rpx;
		height: 234rpx;
	}

	.melon-new {
		position: absolute;
		top: 55rpx;
		right: 33rpx;
		z-index: 4;
		padding: 6rpx 10rpx;
		border-radius: 12rpx;
		background: linear-gradient(135deg, #ff6a62, #ff413d);
		box-shadow: 0 5rpx 11rpx rgba(255, 74, 67, .22);
		color: #fff;
		font-size: 15rpx;
		font-weight: 900;
		transform: rotate(5deg);
	}

	.melon-tip {
		position: absolute;
		right: 12rpx;
		bottom: 13rpx;
		z-index: 3;
		width: 224rpx;
		padding: 15rpx 16rpx 13rpx;
		border-radius: 22rpx;
		background: rgba(255,255,255,.96);
		box-shadow: 0 10rpx 24rpx rgba(90,67,34,.12);
		font-size: 20rpx;
		font-weight: 800;
	}

	.melon-tip-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 7rpx;
	}

	.melon-tip-bottom > text:first-child {
		color: #8e9693;
		font-size: 16rpx;
		font-weight: 400;
	}

	.melon-arrow {
		width: 27rpx;
		height: 27rpx;
		border-radius: 50%;
		background: #ffae25;
		color: #fff;
		font-size: 22rpx;
		font-weight: 800;
		line-height: 25rpx;
		text-align: center;
	}

	.section {
		border: 1rpx solid rgba(231,237,234,.82);
		border-radius: 22rpx;
		background: rgba(255,255,255,.94);
		box-shadow: 0 9rpx 26rpx rgba(36,79,64,.055);
	}

	.top-section {
		margin: 0 24rpx;
		padding: 15rpx 0 18rpx;
		overflow: hidden;
	}

	.section-head {
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		font-size: 21rpx;
		font-weight: 900;
	}

	.section-head.compact {
		padding: 0;
	}

	.section-link,
	.change {
		color: #87908d;
		font-size: 15rpx;
		font-weight: 500;
	}

	.change {
		color: #1dbc87;
	}

	.rank-scroll {
		width: 100%;
		margin-top: 6rpx;
		white-space: nowrap;
	}

	.rank-list {
		display: inline-flex;
		gap: 13rpx;
		padding: 0 15rpx;
	}

	.rank-card {
		width: 142rpx;
		white-space: normal;
	}

	.rank-picture {
		position: relative;
		width: 142rpx;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-radius: 12rpx;
		background: #dfe8e4;
	}

	.rank-picture image {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.rank-picture--2 { background: linear-gradient(180deg, #27333c, #080d11); }
	.rank-picture--3 { background: linear-gradient(145deg, #e9ded0, #caa780); }
	.rank-picture--4 { background: linear-gradient(180deg, #071c2b, #173924); }
	.rank-picture--5 { background: linear-gradient(145deg, #ded5c3, #f3e9d6); }

	.picture-emoji {
		position: relative;
		z-index: 1;
		font-size: 42rpx;
	}

	.rank-badge {
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		z-index: 3;
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		background: #ffad12;
		color: #fff;
		font-size: 20rpx;
		font-weight: 900;
		line-height: 34rpx;
		text-align: center;
	}

	.rank-badge--2 { background: #559eea; }
	.rank-badge--3 { background: #ff8249; }
	.rank-badge--4 { background: #8d58e5; }
	.rank-badge--5 { background: #55c96e; }

	.rank-title {
		height: 57rpx;
		margin-top: 8rpx;
		overflow: hidden;
		font-size: 18rpx;
		font-weight: 800;
		line-height: 28rpx;
	}

	.rank-view {
		margin-top: 6rpx;
		color: #777f7c;
		font-size: 14rpx;
		white-space: nowrap;
	}

	.rank-view text {
		margin-left: 5rpx;
		color: #ff682f;
	}

	.reaction-row {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.reaction-row view {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #68706d;
		font-size: 13rpx;
	}

	.reaction-row view text:first-child {
		font-size: 20rpx;
	}

	.bubble-section {
		margin: 18rpx 24rpx 0;
		padding: 15rpx 0 10rpx;
		background:
			radial-gradient(circle at 90% 18%, rgba(190,246,228,.42), transparent 140rpx),
			linear-gradient(135deg, #fff, #f1fffa);
	}

	.bubble-stage {
		position: relative;
		height: 235rpx;
		overflow: hidden;
	}

	.topic-bubble {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: #fff;
		font-size: 18rpx;
		font-weight: 800;
		line-height: 28rpx;
		text-align: center;
		box-shadow:
			inset 8rpx 10rpx 18rpx rgba(255,255,255,.38),
			inset -8rpx -10rpx 20rpx rgba(28,65,53,.14),
			0 13rpx 24rpx rgba(36,84,69,.2),
			0 0 22rpx rgba(255,255,255,.8);
		transition: transform 360ms linear;
		will-change: transform;
	}

	.topic-bubble::before {
		content: '';
		position: absolute;
		top: 13%;
		left: 18%;
		width: 34%;
		height: 20%;
		border-radius: 50%;
		background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0));
		transform: rotate(-25deg);
		filter: blur(1rpx);
	}

	.topic-bubble::after {
		content: '';
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		bottom: -8rpx;
		left: -8rpx;
		z-index: -1;
		border: 3rpx solid rgba(255,255,255,.45);
		border-radius: 50%;
		animation: bubble-pulse 2.4s ease-in-out infinite;
	}

	.bubble-glow {
		position: absolute;
		right: 13%;
		bottom: 13%;
		width: 17%;
		height: 17%;
		border-radius: 50%;
		background: rgba(255,255,255,.25);
		box-shadow: 0 0 13rpx rgba(255,255,255,.55);
	}

	.topic-bubble > text {
		position: relative;
		z-index: 2;
	}

	.topic-bubble text:nth-child(2) {
		font-size: 21rpx;
	}

	.topic-bubble--0 { background: radial-gradient(circle at 28% 22%, #eeeaff 0, #a29aff 34%, #7263e8 100%); }
	.topic-bubble--1 { background: radial-gradient(circle at 28% 22%, #ffe0b4 0, #ff9a5f 35%, #ff5534 100%); font-size: 24rpx; }
	.topic-bubble--2 { background: radial-gradient(circle at 28% 22%, #fff0b9 0, #ffd25e 35%, #f4a618 100%); }
	.topic-bubble--3 { background: radial-gradient(circle at 28% 22%, #cceaff 0, #78baff 34%, #367ee1 100%); }
	.topic-bubble--4 { background: radial-gradient(circle at 28% 22%, #d6e8ff 0, #8bb9ff 35%, #4279dc 100%); font-size: 22rpx; }
	.topic-bubble--5 { background: radial-gradient(circle at 28% 22%, #ffd6d1 0, #ff8e87 35%, #ed4d48 100%); }
	.topic-bubble--6 { background: radial-gradient(circle at 28% 22%, #d3e6ff 0, #85b8ff 35%, #4a7cdf 100%); }
	.topic-bubble--7 { background: radial-gradient(circle at 28% 22%, #c7ffe7 0, #67dfa9 35%, #13b778 100%); font-size: 21rpx; }

	@keyframes bubble-pulse {
		0%, 100% { transform: scale(.96); opacity: .2; }
		50% { transform: scale(1.05); opacity: .62; }
	}

	.bubble-fire {
		position: absolute;
		top: -12rpx;
		right: 2rpx;
		font-size: 27rpx !important;
	}

	.duo-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14rpx;
		margin: 18rpx 24rpx 0;
	}

	.duo-grid > .section {
		min-width: 0;
		height: 216rpx;
		padding: 15rpx;
	}

	.comment-content {
		margin-top: 5rpx;
		padding: 9rpx 8rpx;
		border-bottom: 1rpx solid #edf0ee;
	}

	.comment-source {
		color: #3c4441;
		font-size: 14rpx;
	}

	.comment-main {
		margin-top: 9rpx;
		font-size: 20rpx;
		font-weight: 900;
	}

	.comment-user {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		color: #7d8582;
		font-size: 13rpx;
	}

	.hot-count {
		color: #f34c31;
	}

	.reply-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 9rpx 7rpx 0;
		color: #747c79;
		font-size: 13rpx;
	}

	.reply-row > view {
		display: flex;
		align-items: center;
		color: #353d3a;
	}

	.reply-avatar {
		margin-right: 7rpx;
		font-size: 25rpx;
	}

	.reply-copy {
		color: #8f9693;
		font-size: 11rpx;
	}

	.reward-card {
		background: linear-gradient(145deg, #fff, #f7fffb);
	}

	.reward-title {
		margin-top: 18rpx;
		font-size: 19rpx;
		font-weight: 800;
	}

	.reward-sub {
		margin-top: 5rpx;
		color: #9ba29f;
		font-size: 14rpx;
	}

	.reward-prize {
		margin-top: 13rpx;
		color: #dc9a24;
		font-size: 16rpx;
		font-weight: 800;
	}

	.reward-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15rpx;
	}

	.mini-avatars {
		color: #747d79;
		font-size: 12rpx;
	}

	.answer-btn {
		padding: 8rpx 18rpx;
		border-radius: 22rpx;
		background: #18bd82;
		color: #fff;
		font-size: 14rpx;
		font-weight: 800;
	}

	.trio-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 13rpx;
		margin: 18rpx 24rpx 0;
	}

	.trio-grid > .section {
		position: relative;
		min-width: 0;
		height: 205rpx;
		padding: 14rpx;
		overflow: hidden;
	}

	.card-sub {
		margin-top: 2rpx;
		color: #9ca3a0;
		font-size: 12rpx;
	}

	.rumor-card {
		background: linear-gradient(145deg, #fff, #fbf7ff);
	}

	.rumor-text {
		margin-top: 13rpx;
		font-size: 15rpx;
		font-weight: 700;
		line-height: 25rpx;
	}

	.stamp {
		position: absolute;
		right: 13rpx;
		bottom: 44rpx;
		padding: 5rpx;
		border: 3rpx solid rgba(37,183,138,.35);
		border-radius: 50%;
		color: rgba(37,183,138,.55);
		font-size: 13rpx;
		font-weight: 900;
		transform: rotate(-13deg);
	}

	.card-foot {
		position: absolute;
		left: 14rpx;
		bottom: 14rpx;
		color: #79817e;
		font-size: 12rpx;
	}

	.map-card {
		background: linear-gradient(180deg, #f4fff9, #dcf6e8) !important;
	}

	.map-body {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 155rpx;
		background: linear-gradient(145deg, rgba(191,234,204,.35), rgba(145,220,190,.4));
	}

	.road {
		position: absolute;
		width: 270rpx;
		height: 18rpx;
		border: 4rpx solid rgba(255,255,255,.8);
		border-right: 0;
		border-left: 0;
		transform: rotate(-20deg);
	}

	.road-a { left: -25rpx; top: 69rpx; }
	.road-b { left: 25rpx; top: 93rpx; transform: rotate(24deg); }

	.map-point {
		position: absolute;
		z-index: 2;
		padding: 5rpx 8rpx;
		border-radius: 9rpx;
		background: rgba(255,255,255,.9);
		font-size: 11rpx;
		font-weight: 800;
		line-height: 17rpx;
		text-align: center;
		box-shadow: 0 4rpx 9rpx rgba(48,112,87,.09);
	}

	.point-a { left: 18rpx; top: 25rpx; color: #ee8b35; }
	.point-b { right: 18rpx; top: 15rpx; color: #4587df; }
	.point-c { left: 52rpx; bottom: 12rpx; color: #5099d0; }
	.point-d { right: 13rpx; bottom: 10rpx; color: #eb8840; }

	.pk-card {
		background: linear-gradient(145deg, #fff, #fff1f7) !important;
	}

	.podium {
		height: 117rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 4rpx;
		margin-top: 2rpx;
	}

	.podium-item {
		width: 57rpx;
		text-align: center;
	}

	.podium-item > text {
		display: inline-block;
		margin-bottom: 3rpx;
		color: #fff;
		font-size: 15rpx;
		font-weight: 900;
	}

	.podium-item > view {
		padding: 7rpx 2rpx;
		border-radius: 10rpx 10rpx 0 0;
		font-size: 10rpx;
		line-height: 16rpx;
	}

	.second > text { width: 25rpx; height: 25rpx; border-radius: 50%; background: #9db0be; line-height: 25rpx; }
	.third > text { width: 25rpx; height: 25rpx; border-radius: 50%; background: #e5973e; line-height: 25rpx; }
	.first > text { color: #efa90e; font-size: 18rpx; line-height: 18rpx; }
	.second > view { height: 47rpx; background: #e9eff4; }
	.first > view { height: 65rpx; background: #fff0c8; }
	.third > view { height: 41rpx; background: #ffe8d9; }

	.pk-cheer {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 25rpx;
		background: #f9d7e8;
		color: #e275a2;
		font-size: 11rpx;
		line-height: 25rpx;
		text-align: center;
	}

	/* 全页按手机实机可读尺寸放大 */
	.brand { font-size: 44rpx; }
	.eyes { font-size: 30rpx; }
	.eating { padding: 8rpx 19rpx; font-size: 21rpx; }
	.subtitle { font-size: 21rpx; }
	.search-box { height: 72rpx; border-radius: 38rpx; }
	.search-input { height: 68rpx; font-size: 25rpx; line-height: 68rpx; }
	.search-button { width: 100rpx; height: 60rpx; font-size: 23rpx; line-height: 60rpx; }

	.heat-card,
	.watch-card,
	.melon-card { height: 238rpx; }
	.heat-label { font-size: 23rpx; }
	.heat-number { font-size: 46rpx; }
	.heat-rise { font-size: 16rpx; }
	.watch-tag { font-size: 16rpx; }
	.watch-title { font-size: 22rpx; line-height: 33rpx; }
	.watch-meta { font-size: 16rpx; }
	.avatar { width: 35rpx; height: 35rpx; font-size: 19rpx; line-height: 35rpx; }

	.section { border-radius: 26rpx; }
	.section-head { height: 48rpx; font-size: 25rpx; }
	.section-link,
	.change { font-size: 18rpx; }
	.top-section { padding-top: 18rpx; padding-bottom: 22rpx; }
	.rank-card { width: 158rpx; }
	.rank-picture { width: 158rpx; height: 100rpx; }
	.rank-title { height: 66rpx; font-size: 21rpx; line-height: 32rpx; }
	.rank-view { font-size: 16rpx; }
	.reaction-row view { font-size: 15rpx; }
	.reaction-row view text:first-child { font-size: 23rpx; }

	.duo-grid > .section { height: 260rpx; padding: 18rpx; }
	.comment-source { font-size: 16rpx; }
	.comment-main { font-size: 23rpx; }
	.comment-user,
	.reply-row { font-size: 15rpx; }
	.reply-copy { font-size: 13rpx; }
	.reward-title { font-size: 22rpx; }
	.reward-sub { font-size: 16rpx; }
	.reward-prize { font-size: 18rpx; }
	.mini-avatars { font-size: 14rpx; }
	.answer-btn { padding: 9rpx 20rpx; font-size: 16rpx; }

	.trio-grid > .section { height: 245rpx; padding: 17rpx; }
	.card-sub { font-size: 14rpx; }
	.rumor-text { font-size: 17rpx; line-height: 29rpx; }
	.card-foot { left: 17rpx; bottom: 17rpx; font-size: 14rpx; }
	.map-body { height: 188rpx; }
	.map-point { font-size: 13rpx; line-height: 19rpx; }
	.podium { height: 148rpx; }
	.podium-item { width: 65rpx; }
	.podium-item > view { font-size: 12rpx; line-height: 18rpx; }
	.pk-cheer { height: 30rpx; font-size: 13rpx; line-height: 30rpx; }

	.bottom-space {
		height: calc(42rpx + constant(safe-area-inset-bottom));
		height: calc(42rpx + env(safe-area-inset-bottom));
	}

	.hot-page--tab .bottom-space {
		height: calc(190rpx + constant(safe-area-inset-bottom));
		height: calc(190rpx + env(safe-area-inset-bottom));
	}

	/* 二次整理：降低信息密度，统一可读字号 */
	.page-content {
		background: #f4fbf8;
	}

	.header {
		padding-left: 28rpx;
		padding-right: 198rpx;
		padding-bottom: 14rpx;
		background: linear-gradient(180deg, #effff9 0%, rgba(248, 255, 252, 0.98) 100%);
	}

	.back-home {
		width: 82rpx;
		height: 42rpx;
		border-color: rgba(35, 164, 122, 0.18);
		background: rgba(255, 255, 255, 0.68);
		font-size: 17rpx;
	}

	.brand-line {
		height: 50rpx;
		margin-left: 92rpx;
		max-width: calc(100vw - 330rpx);
	}

	.brand {
		color: #153d32;
		font-size: 38rpx;
		letter-spacing: 0;
	}

	.eating {
		margin-left: 12rpx;
		padding: 5rpx 13rpx;
		background: #22bf86;
		font-size: 18rpx;
	}

	.subtitle {
		margin-top: 0;
		margin-left: 92rpx;
		color: #60766f;
		font-size: 17rpx;
		font-weight: 700;
		letter-spacing: 3rpx;
	}

	.search-box {
		height: 72rpx;
		margin-top: 14rpx;
		border-color: rgba(34, 191, 134, 0.45);
		border-radius: 40rpx;
	}

	.search-input {
		height: 72rpx;
		font-size: 24rpx;
		line-height: 72rpx;
	}

	.search-button {
		width: 108rpx;
		height: 62rpx;
		font-size: 24rpx;
		line-height: 62rpx;
	}

	.hero-grid {
		gap: 18rpx;
		padding: 0 26rpx 22rpx;
	}

	.watch-card,
	.melon-card {
		height: 230rpx;
		border-radius: 26rpx;
	}

	.watch-tag {
		font-size: 18rpx;
	}

	.watch-title {
		font-size: 24rpx;
		line-height: 35rpx;
	}

	.watch-meta {
		font-size: 18rpx;
	}

	.melon-tip {
		width: 210rpx;
		font-size: 22rpx;
	}

	.melon-tip-bottom > text:first-child {
		font-size: 18rpx;
	}

	.section {
		border-radius: 28rpx;
		box-shadow: 0 10rpx 28rpx rgba(36, 79, 64, 0.07);
	}

	.section-head {
		height: 54rpx;
		padding: 0 22rpx;
		color: #173f36;
		font-size: 29rpx;
	}

	.section-link,
	.change {
		font-size: 21rpx;
		font-weight: 800;
	}

	.top-section {
		margin: 0 26rpx;
		padding: 20rpx 0 24rpx;
	}

	.rank-scroll {
		margin-top: 12rpx;
	}

	.rank-list {
		gap: 22rpx;
		padding: 0 22rpx;
	}

	.rank-card {
		width: 238rpx;
		padding-bottom: 2rpx;
	}

	.rank-picture {
		width: 238rpx;
		height: 150rpx;
		border-radius: 22rpx;
	}

	.rank-badge {
		width: 42rpx;
		height: 42rpx;
		font-size: 24rpx;
		line-height: 42rpx;
	}

	.picture-emoji {
		font-size: 56rpx;
	}

	.rank-title {
		height: 76rpx;
		margin-top: 12rpx;
		color: #1c2d28;
		font-size: 25rpx;
		line-height: 38rpx;
	}

	.rank-view {
		margin-top: 8rpx;
		color: #61726d;
		font-size: 20rpx;
	}

	.reaction-row {
		display: none;
	}

	.bubble-section,
	.duo-grid,
	.trio-grid {
		margin-top: 22rpx;
	}

	.topic-bubble {
		font-size: 21rpx;
	}

	.duo-grid,
	.trio-grid {
		gap: 18rpx;
		margin-left: 26rpx;
		margin-right: 26rpx;
	}

	.duo-grid > .section {
		height: 280rpx;
		padding: 20rpx;
	}

	.comment-source,
	.reward-sub,
	.card-sub,
	.card-foot {
		font-size: 18rpx;
	}

	.comment-main,
	.reward-title {
		font-size: 25rpx;
		line-height: 34rpx;
	}

	.comment-user,
	.reply-row,
	.reward-prize,
	.mini-avatars {
		font-size: 17rpx;
	}

	.rank-card .reaction-row {
		display: flex;
		justify-content: flex-start;
		gap: 10rpx;
		margin-top: 14rpx;
		overflow: visible;
	}

	.reaction-pill {
		min-width: 50rpx;
		height: 52rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 18rpx;
		background: linear-gradient(145deg, #ffffff, #f0f6f3);
		box-shadow:
			inset 0 2rpx 0 rgba(255, 255, 255, 0.95),
			0 8rpx 16rpx rgba(24, 61, 49, 0.08);
		transform: translateZ(0);
		transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	}

	.reaction-emoji {
		font-size: 25rpx;
		line-height: 25rpx;
	}

	.reaction-count {
		margin-top: 2rpx;
		color: #63746e;
		font-size: 14rpx;
		font-weight: 800;
		line-height: 16rpx;
	}

	.reaction-pill--active {
		z-index: 3;
		background: radial-gradient(circle at 30% 18%, #ffffff 0, #fff4c7 38%, #ffd977 100%);
		box-shadow:
			inset 0 3rpx 0 rgba(255, 255, 255, 0.88),
			0 16rpx 26rpx rgba(255, 180, 60, 0.28);
		transform: translateY(-8rpx) scale(1.22) rotate(-4deg);
	}

	.reaction-pill--active .reaction-emoji {
		font-size: 32rpx;
		line-height: 32rpx;
		filter: drop-shadow(0 6rpx 8rpx rgba(88, 55, 10, 0.18));
	}

	.reaction-pill--active .reaction-count {
		color: #7b4f08;
	}

	.wall-section {
		margin: 22rpx 26rpx 0;
		padding: 24rpx 20rpx 18rpx;
		overflow: hidden;
		border-radius: 30rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 245, 0.96));
		border: 1rpx solid rgba(222, 239, 232, 0.9);
		box-shadow: 0 16rpx 40rpx rgba(31, 78, 63, 0.1);
	}

	.wall-head {
		height: auto;
		align-items: flex-start;
		padding: 0 4rpx 22rpx;
	}

	.wall-head > view:first-child {
		min-width: 0;
	}

	.wall-head text {
		display: block;
		color: #173f36;
		font-size: 22rpx;
		font-weight: 900;
		line-height: 40rpx;
	}

	.wall-title-main {
		font-size: 32rpx !important;
		line-height: 40rpx;
	}

	.wall-subtitle {
		margin-top: 6rpx;
		color: #70847d;
		font-size: 17rpx;
		font-weight: 700;
		line-height: 26rpx;
	}

	.wall-page {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		gap: 8rpx;
		height: 42rpx;
		padding: 0 16rpx;
		border-radius: 999rpx;
		background: linear-gradient(135deg, rgba(238, 251, 246, 0.96), rgba(216, 246, 234, 0.96));
		color: #258365; 
		font-size: 18rpx;
		font-weight: 900;
	}

	.wall-live-dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #22bf86;
		box-shadow: 0 0 0 6rpx rgba(34, 191, 134, 0.12);
	}

	.wall-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.wall-item {
		padding: 20rpx;
		border-radius: 26rpx;
		background: rgba(255, 255, 255, 0.96);
		border: 1rpx solid rgba(214, 233, 226, 0.95);
		box-shadow: 0 10rpx 24rpx rgba(42, 89, 72, 0.08);
		box-sizing: border-box;
	}

	.wall-author-row {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.wall-avatar {
		width: 46rpx;
		height: 46rpx;
		flex-shrink: 0;
		border-radius: 50%;
		background: linear-gradient(145deg, #dff8ee, #bcebdc);
		color: #23815f;
		font-size: 22rpx;
		font-weight: 900;
		line-height: 46rpx;
		text-align: center;
	}

	.wall-author {
		flex: 1;
		min-width: 0;
		color: #60736c;
		font-size: 24rpx;
		font-weight: 800;
	}

	.wall-time {
		flex-shrink: 0;
		color: #a4b0ab;
		font-size: 21rpx;
		font-weight: 700;
	}

	.wall-title {
		margin-top: 18rpx;
		color: #1a2f28;
		font-size: 29rpx;
		font-weight: 900;
		line-height: 38rpx;
	}

	.wall-text {
		margin-top: 10rpx;
		color: #51665f;
		font-size: 23rpx;
		font-weight: 700;
		line-height: 34rpx;
	}

	.wall-image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		margin-top: 16rpx;
	}

	.wall-post-image {
		width: 150rpx;
		height: 126rpx;
		border-radius: 10rpx;
		background: #e8f0ec;
	}

	.wall-image-grid--1 .wall-post-image {
		width: 230rpx;
		height: 154rpx;
	}

	.wall-image-grid--2 .wall-post-image {
		width: 170rpx;
		height: 136rpx;
	}

	.wall-meta {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: 0;
		gap: 8rpx 12rpx;
		overflow: hidden;
		white-space: nowrap;
		color: #879691;
		font-size: 18rpx;
		font-weight: 700;
	}

	.wall-comment {
		color: #5f756d;
		font-weight: 900;
	}

	.wall-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14rpx;
		margin-top: 16rpx;
		padding-top: 14rpx;
		border-top: 1rpx solid rgba(222, 236, 231, 0.9);
	}

	.wall-reactions {
		display: flex !important;
		flex-shrink: 0;
		justify-content: flex-start;
		gap: 8rpx;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		overflow: visible;
	}

	.wall-reactions .reaction-pill {
		min-width: 48rpx;
		height: 46rpx;
		padding: 0 8rpx;
	}

	.wall-reactions .reaction-emoji {
		font-size: 22rpx;
		line-height: 22rpx;
	}

	.wall-reactions .reaction-count {
		font-size: 12rpx;
		line-height: 14rpx;
	}

	.wall-load-state {
		padding: 22rpx 0 6rpx;
		color: #8b9b95;
		font-size: 21rpx;
		font-weight: 800;
		text-align: center;
	}

	.partner-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.partner-card {
		padding: 22rpx;
		border-radius: 26rpx;
		background:
			radial-gradient(circle at 92% 10%, rgba(34, 191, 134, 0.13), transparent 150rpx),
			#ffffff;
		border: 1rpx solid rgba(214, 233, 226, 0.95);
		box-shadow: 0 10rpx 24rpx rgba(42, 89, 72, 0.08);
	}

	.partner-top {
		display: flex;
		align-items: center;
		gap: 14rpx;
	}

	.partner-avatar {
		width: 54rpx;
		height: 54rpx;
		flex-shrink: 0;
		border-radius: 18rpx;
		background: linear-gradient(145deg, #dff8ee, #a9e8d3);
		color: #23815f;
		font-size: 24rpx;
		font-weight: 900;
		line-height: 54rpx;
		text-align: center;
	}

	.partner-main {
		flex: 1;
		min-width: 0;
	}

	.partner-title {
		color: #183d33;
		font-size: 29rpx;
		font-weight: 900;
		line-height: 38rpx;
	}

	.partner-meta {
		margin-top: 4rpx;
		color: #7c8e88;
		font-size: 17rpx;
		font-weight: 700;
		line-height: 26rpx;
	}

	.partner-action {
		flex-shrink: 0;
		padding: 10rpx 18rpx;
		border-radius: 999rpx;
		background: #22bf86;
		color: #ffffff;
		font-size: 22rpx;
		font-weight: 900;
		box-shadow: 0 8rpx 18rpx rgba(34, 191, 134, 0.22);
	}

	.partner-desc {
		margin-top: 16rpx;
		color: #4d625a;
		font-size: 23rpx;
		font-weight: 700;
		line-height: 34rpx;
	}

	.partner-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-top: 16rpx;
	}

	.partner-tags text {
		padding: 7rpx 14rpx;
		border-radius: 999rpx;
		background: #edf8f4;
		color: #278164;
		font-size: 18rpx;
		font-weight: 800;
	}

	.partner-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
		padding-top: 14rpx;
		border-top: 1rpx solid rgba(222, 236, 231, 0.9);
		color: #7a8b85;
		font-size: 21rpx;
		font-weight: 800;
	}

	.bubble-section {
		overflow: hidden;
		padding-top: 0;
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.76) 100%),
			url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/105af316e4df4412996e7716bc422b32.jpg') center center / cover no-repeat;
	}

	.bubble-section .section-head {
		margin: 0;
		padding: 0 22rpx;
		border-radius: 0 0 18rpx 18rpx;
		background: rgba(255, 255, 255, 0.76);
		backdrop-filter: blur(10rpx);
	}

	.bubble-stage {
		height: 286rpx;
		margin-top: 0;
		overflow: visible;
	}

	.bubble-stage::before,
	.bubble-stage::after {
		content: '';
		position: absolute;
		z-index: 0;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.95);
		box-shadow:
			92rpx 42rpx 0 rgba(255, 255, 255, 0.7),
			238rpx 86rpx 0 rgba(107, 232, 181, 0.72),
			388rpx 22rpx 0 rgba(255, 220, 116, 0.72),
			536rpx 132rpx 0 rgba(255, 255, 255, 0.78),
			626rpx 188rpx 0 rgba(117, 190, 255, 0.72);
	}

	.bubble-stage::before {
		left: 44rpx;
		top: 58rpx;
	}

	.bubble-stage::after {
		left: 78rpx;
		top: 176rpx;
		transform: scale(0.78);
		opacity: 0.82;
	}

	.topic-bubble {
		overflow: visible;
		text-shadow: 0 3rpx 10rpx rgba(16, 46, 36, 0.18);
		box-shadow:
			inset 8rpx 10rpx 20rpx rgba(255, 255, 255, 0.52),
			inset -12rpx -14rpx 22rpx rgba(26, 77, 60, 0.14),
			0 16rpx 28rpx rgba(22, 92, 72, 0.18),
			0 0 28rpx rgba(255, 255, 255, 0.84);
		backdrop-filter: blur(4rpx);
	}

	.topic-bubble::before {
		top: 12%;
		left: 18%;
		width: 42%;
		height: 22%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.05));
	}

	.topic-bubble::after {
		top: -14rpx;
		right: -14rpx;
		bottom: -14rpx;
		left: -14rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.58);
		box-shadow: 0 0 24rpx rgba(255, 255, 255, 0.55);
	}

	.bubble-glow {
		right: 16%;
		bottom: 16%;
		width: 12rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, 0.86);
		box-shadow:
			-32rpx -42rpx 0 rgba(255, 255, 255, 0.55),
			24rpx -18rpx 0 rgba(255, 255, 255, 0.38),
			40rpx 20rpx 0 rgba(255, 255, 255, 0.28),
			0 0 16rpx rgba(255, 255, 255, 0.72);
	}

	.topic-bubble--0 {
		background:
			radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0) 26%),
			radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 36%),
			linear-gradient(145deg, #b9a9ff 0%, #7362eb 100%);
	}

	.topic-bubble--1 {
		background:
			radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 25%),
			radial-gradient(circle at 76% 82%, rgba(255, 243, 198, 0.38), rgba(255, 255, 255, 0) 36%),
			linear-gradient(145deg, #ffc56e 0%, #ff6a39 100%);
	}

	.topic-bubble--2 {
		background:
			radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 25%),
			linear-gradient(145deg, #ffe78f 0%, #f2ad18 100%);
	}

	.topic-bubble--3,
	.topic-bubble--4,
	.topic-bubble--6 {
		background:
			radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0) 25%),
			linear-gradient(145deg, #a9d8ff 0%, #3f8de8 100%);
	}

	.topic-bubble--5 {
		background:
			radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0) 25%),
			linear-gradient(145deg, #ffb9b4 0%, #ef514b 100%);
	}

	.topic-bubble--7 {
		background:
			radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 25%),
			linear-gradient(145deg, #9cf3c7 0%, #18b978 100%);
	}

	.reaction-effect-layer {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 3000;
		pointer-events: none;
	}

	.reaction-pop-bubble {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -75rpx;
		margin-top: -75rpx;
		border-radius: 50%;
		background:
			radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0.68) 32%, rgba(255, 222, 112, 0.96) 100%);
		box-shadow:
			inset 0 8rpx 16rpx rgba(255, 255, 255, 0.7),
			inset -10rpx -14rpx 24rpx rgba(214, 142, 28, 0.2),
			0 28rpx 48rpx rgba(218, 134, 20, 0.26),
			0 0 0 14rpx rgba(255, 218, 102, 0.16);
		animation: reaction-pop 820ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
	}

	.reaction-pop-bubble text {
		font-size: 74rpx;
		line-height: 1;
		filter: drop-shadow(0 10rpx 10rpx rgba(110, 70, 12, 0.18));
		transform: translateY(-2rpx);
	}

	.reaction-pop-bubble::after {
		content: '';
		position: absolute;
		left: 26rpx;
		top: 22rpx;
		width: 42rpx;
		height: 20rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.72);
		transform: rotate(-25deg);
		filter: blur(1rpx);
	}

	@keyframes reaction-pop {
		0% {
			opacity: 0;
			transform: translate3d(0, 20rpx, 0) scale(0.25) rotate(-18deg);
		}
		16% {
			opacity: 1;
			transform: translate3d(0, -18rpx, 0) scale(1.28) rotate(8deg);
		}
		36% {
			transform: translate3d(0, -6rpx, 0) scale(1) rotate(-4deg);
		}
		72% {
			opacity: 1;
			transform: translate3d(0, -92rpx, 0) scale(1.08) rotate(5deg);
		}
		100% {
			opacity: 0;
			transform: translate3d(0, -140rpx, 0) scale(0.86) rotate(0deg);
		}
	}

	.hot-page--tab .brand-line {
		margin-left: 0;
		max-width: calc(100vw - 230rpx);
	}

	.hot-page--tab .subtitle {
		margin-left: 0;
	}

	.hot-page--tab .bottom-space {
		height: calc(190rpx + constant(safe-area-inset-bottom));
		height: calc(190rpx + env(safe-area-inset-bottom));
	}
</style>