<template>
	<view class="hot-page">
		<scroll-view class="page-scroll" scroll-y :show-scrollbar="false">
			<view class="page-content">
				<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
					<view class="back-home" :style="{ top: (statusBarHeight + 7) + 'px' }" @tap="backHome">
						<uni-icons type="left" size="18" color="#1e6f57"></uni-icons>
						<text>首页</text>
					</view>
					<view class="brand-line">
						<text class="brand">校园热榜</text>
						<text class="eyes">••</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="hero-grid">
					<view class="watch-card">
						<view class="watch-tag">大家都在看</view>
						<view class="watch-title">
							<text>“食堂阿姨手抖了，</text>
							<text>今天的红烧肉咸到流泪😭”</text>
						</view>
						<view class="watch-meta">982 人围观 · <text>236</text> 条评论</view>
						<view class="avatar-row">
							<view class="avatar" v-for="item in 4" :key="item">{{['👩','👨','🧑','👩‍🦱'][item - 1]}}</view>
							<text class="more">•••</text>
						</view>
					</view>

					<view class="melon-card">
						<view class="melon-new">NEW</view>
						<image
							class="melon-image"
							src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f3b050e7f6d74bb9adca54de0bf3fc17.png"
							mode="aspectFit"
						></image>
						<view class="melon-tip">
							<view>今日新瓜已送达</view>
							<view class="melon-tip-bottom">
								<text>速来围观吧！</text>
								<text class="melon-arrow">›</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 按设计要求省略五个快捷入口，TOP10 直接承接顶部内容 -->
				<view class="section top-section">
					<view class="section-head">
						<text>今日 TOP10</text>
						<view class="section-link">全部榜单 ›</view>
					</view>
					<scroll-view class="rank-scroll" scroll-x :show-scrollbar="false">
						<view class="rank-list">
							<view class="rank-card" v-for="item in filteredRanks" :key="item.rank">
								<view class="rank-picture" :class="'rank-picture--' + item.rank">
									<image v-if="item.pic" :src="item.pic" mode="aspectFill"></image>
									<text class="picture-emoji">{{item.emoji}}</text>
									<view class="rank-badge" :class="'rank-badge--' + item.rank">{{item.rank}}</view>
								</view>
								<view class="rank-title">{{item.title}}</view>
								<view class="rank-view">{{item.views}} 人围观 <text>🔥+{{item.rise}}</text></view>
								<view class="reaction-row">
									<view v-for="reaction in item.reactions" :key="reaction.icon">
										<text>{{reaction.icon}}</text>
										<text>{{reaction.count}}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-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="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>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 24,
				keyword: '',
				bubbleTimer: null,
				bubbleReady: false,
				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: 20, y: 80, size: 98, vx: .32, vy: -.18 },
					{ name: '食堂', count: 5621, x: 135, y: 10, size: 125, vx: -.24, vy: .22 },
					{ name: '军训', count: 1890, x: 110, y: 145, size: 84, vx: .25, vy: -.3 },
					{ name: '毕业设计', count: 1654, x: 270, y: 140, size: 83, vx: -.28, vy: -.22 },
					{ name: '四六级', count: 3412, x: 300, y: 15, size: 115, vx: .27, vy: .2 },
					{ name: '恋爱', count: 2376, x: 430, y: 20, size: 90, vx: -.3, vy: .26 },
					{ name: '外卖涨价', count: 1243, x: 430, y: 140, size: 84, vx: .26, vy: -.24 },
					{ name: '图书馆', count: 4128, x: 565, y: 85, size: 110, 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)
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = Number(systemInfo.statusBarHeight) || 24
		},
		onReady() {
			this.bubbleReady = true
			this.startBubbleMotion()
		},
		onShow() {
			if (this.bubbleReady) this.startBubbleMotion()
		},
		onHide() {
			this.stopBubbleMotion()
		},
		onUnload() {
			this.stopBubbleMotion()
		},
		methods: {
			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) {
				this.keyword = topic.name
				uni.showToast({ title: '正在围观「' + topic.name + '」', icon: 'none' })
			},
			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 = 235
				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%;
	}

	.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;
	}

	.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));
	}
</style>