<template>
	<view class="rank-page" :style="{'--statusbar': statusBarHeight + 'px'}">
		<view class="nav" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="nav-back" @tap="goBack"><text>‹</text></view>
			<view class="nav-title">星球排行榜</view>
		</view>

		<scroll-view scroll-y enhanced :show-scrollbar="false" class="page" :style="{paddingTop: (statusBarHeight + 58) + 'px'}" @scrolltolower="loadMore">
			<view v-if="loading" class="loading-card">正在扫描财富坐标...</view>
			<block v-else>
				<view class="radar-card">
					<view class="radar-visual">
						<view class="radar-sweep"></view>
						<view class="radar-ring ring-a"></view>
						<view class="radar-ring ring-b"></view>
						<view class="radar-dot"></view>
					</view>
					<view class="radar-copy">
						<view class="radar-kicker">SCHOOL RICH LIST</view>
						<view class="radar-title">全校首富雷达</view>
						<view class="radar-sub">从榜单里选定目标，发起星际追查，抢回今日补给权。</view>
					</view>
					<view class="radar-count">
						<text>{{home.remainHunt || 0}}</text>
						<text>次追查</text>
					</view>
				</view>

				<view class="rank-head">
					<view>
						<view class="rank-kicker">WEALTH COORDINATES</view>
						<view class="rank-title">财富坐标榜</view>
					</view>
				</view>

				<view v-if="podiumList.length" class="podium-card">
					<view class="podium-bg-glow"></view>
					<view class="podium-head">
						<view>
							<view class="podium-kicker">TOP HUNTERS ARE WATCHING</view>
							<view class="podium-title">前三领奖台</view>
						</view>
						<view class="podium-prize">抢榜越高 · 越容易被盯上</view>
					</view>
					<view class="reward-rule">
						<view class="reward-main">每日 21:30 按校区分别结算，有券前 5 名瓜分星球券</view>
						<view class="reward-chips">
							<text>第1名 +5</text>
							<text>第2名 +4</text>
							<text>第3名 +3</text>
							<text>第4名 +2</text>
							<text>第5名 +1</text>
						</view>
					</view>
					<view class="podium-stage">
						<view
							class="podium-player second"
							v-if="podiumSecond"
							@tap="onHunt(podiumSecond)">
							<view class="crown silver">2</view>
							<view class="podium-avatar-wrap">
								<image class="podium-avatar" :class="{stealth: podiumSecond.stealth}" :src="podiumSecond.stealth ? defaultAvatar : (podiumSecond.avatar || defaultAvatar)" mode="aspectFill"></image>
								<view v-if="podiumSecond.hasTower && !podiumSecond.stealth" class="tower-badge">塔</view>
							</view>
							<view class="podium-name">{{podiumName(podiumSecond)}}</view>
							<view class="podium-ticket">{{podiumSecond.ticketCount || 0}}券</view>
							<view class="podium-base">第二名</view>
						</view>
						<view
							class="podium-player first"
							v-if="podiumFirst"
							@tap="onHunt(podiumFirst)">
							<view class="crown gold">1</view>
							<view class="king-aura"></view>
							<view class="podium-avatar-wrap">
								<image class="podium-avatar champion" :class="{stealth: podiumFirst.stealth}" :src="podiumFirst.stealth ? defaultAvatar : (podiumFirst.avatar || defaultAvatar)" mode="aspectFill"></image>
								<view v-if="podiumFirst.hasTower && !podiumFirst.stealth" class="tower-badge champion">塔</view>
							</view>
							<view class="podium-name champion-name">{{podiumName(podiumFirst)}}</view>
							<view class="podium-ticket hot">{{podiumFirst.ticketCount || 0}}券</view>
							<view class="podium-base king">第一名</view>
						</view>
						<view
							class="podium-player third"
							v-if="podiumThird"
							@tap="onHunt(podiumThird)">
							<view class="crown bronze">3</view>
							<view class="podium-avatar-wrap">
								<image class="podium-avatar" :class="{stealth: podiumThird.stealth}" :src="podiumThird.stealth ? defaultAvatar : (podiumThird.avatar || defaultAvatar)" mode="aspectFill"></image>
								<view v-if="podiumThird.hasTower && !podiumThird.stealth" class="tower-badge">塔</view>
							</view>
							<view class="podium-name">{{podiumName(podiumThird)}}</view>
							<view class="podium-ticket">{{podiumThird.ticketCount || 0}}券</view>
							<view class="podium-base">第三名</view>
						</view>
					</view>
					<view class="podium-tip">点领奖台头像即可发起追查，今天还剩 {{home.remainHunt || 0}} 次机会</view>
				</view>

				<view v-if="normalList.length" class="rank-list">
					<view
						class="rank-row"
						v-for="(item, index) in normalList"
						:key="item._rankKey">
						<view class="rank-no">#{{item._displayRankNo}}</view>
						<view class="avatar-wrap">
							<image class="avatar" :class="{stealth: item.stealth}" :src="item.stealth ? defaultAvatar : (item.avatar || defaultAvatar)" mode="aspectFill"></image>
							<view v-if="item.hasTower && !item.stealth" class="tower-badge small">塔</view>
						</view>
						<view class="user-main">
							<view class="user-name">
								<text>{{item.stealth ? '隐身侠' : (item.nickname || '神秘同学')}}</text>
								<text v-if="item.stealth" class="stealth-tag">隐身</text>
								<text v-if="item.self" class="me-tag">ME</text>
							</view>
							<view class="user-meta">
								<text>{{item.ticketCount || 0}} 张星球券</text>
								<text v-if="!item.stealth && item.rankKeepDays > 0">霸榜 {{item.rankKeepDays}} 天</text>
							</view>
						</view>
						<view
							class="hunt-btn"
							:class="{disabled: item.self || item.stealth || item.shielded || (home.remainHunt || 0) <= 0}"
							@tap="onHunt(item)">
							{{huntText(item)}}
						</view>
					</view>
				</view>
				<view v-else-if="!podiumList.length" class="empty-card">暂无上榜居民，攒券登顶成为今日主角</view>

				<view v-if="rankList.length" class="load-more">{{loadMoreText}}</view>

				<view class="bottom-space"></view>
			</block>
		</scroll-view>

		<hunt-modal
			:show="huntModal.show"
			:phase="huntModal.phase"
			:result="huntModal.result"
			:target="huntModal.target"
			@close="closeHunt">
		</hunt-modal>
	</view>
</template>

<script>
	import huntModal from '@/package1/components/planet/hunt-modal.vue'

	export default {
		components: {
			huntModal
		},
		data() {
			return {
				statusBarHeight: 20,
				loading: true,
				userId: '',
				regionId: '',
				nickname: '',
				avatar: '',
				college: '',
				pageNum: 1,
				pageSize: 10,
				rankRows: [],
				listLoading: false,
				noMore: false,
				defaultAvatar: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png',
				home: {
					remainHunt: 0,
					rankList: []
				},
				huntModal: {
					show: false,
					phase: 'searching',
					result: null,
					target: {}
				},
				huntTimers: []
			}
		},
		computed: {
			rankList() {
				return (this.rankRows || []).map((item, index) => {
					return Object.assign({}, item, {
						_rankKey: String(item.userId || item.rankNo || index),
						_displayRankNo: item.rankNo || (index + 1)
					})
				})
			},
			totalPages() {
				return Math.max(1, Number(this.home.rankTotalPages || 1))
			},
			pagedList() {
				return this.rankList
			},
			podiumList() {
				return this.rankList.filter((item) => item._displayRankNo >= 1 && item._displayRankNo <= 3)
			},
			podiumMap() {
				const map = {}
				this.podiumList.forEach((item) => {
					map[item._displayRankNo] = item
				})
				return map
			},
			podiumFirst() {
				return this.podiumMap[1]
			},
			podiumSecond() {
				return this.podiumMap[2]
			},
			podiumThird() {
				return this.podiumMap[3]
			},
			normalList() {
				return this.rankList.filter((item) => item._displayRankNo > 3)
			},
			loadMoreText() {
				if (this.listLoading) return '正在加载更多坐标...'
				if (this.noMore) return '没有更多财富坐标了'
				return '上滑加载更多坐标'
			}
		},
		onLoad() {
			const sys = uni.getSystemInfoSync()
			this.statusBarHeight = sys.statusBarHeight || 20
			this.userId = uni.getStorageSync('id') || ''
			this.nickname = uni.getStorageSync('nickName') || uni.getStorageSync('nickname') || ''
			this.avatar = uni.getStorageSync('avatarUrl') || uni.getStorageSync('avatar') || ''
			try {
				const area = uni.getStorageSync('area')
				if (area) this.regionId = JSON.parse(area).id || ''
			} catch (e) {}
			this.loadHome(true)
		},
		onUnload() {
			this.clearHuntTimers()
		},
		methods: {
			loadHome(reset) {
				if (this.listLoading) return
				if (!this.userId) {
					this.tui.toast('请先登录')
					return
				}
				if (!this.regionId) {
					this.loading = false
					this.tui.toast('未获取到校区信息')
					return
				}
				if (reset) {
					this.pageNum = 1
					this.noMore = false
					this.rankRows = []
				}
				if (reset) this.loading = true
				this.listLoading = true
				this.tui.request('/app/planet/rank/page', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					pageNumber: this.pageNum,
					pageSize: this.pageSize
				}, false, false, true).then((res) => {
					this.loading = false
					this.listLoading = false
					if (res.code == 200 && res.result) {
						this.home = res.result
						this.pageNum = Number(res.result.rankPageNumber || this.pageNum)
						if (this.pageNum > this.totalPages) this.pageNum = this.totalPages
						const records = res.result.rankList || []
						this.rankRows = reset ? records : this.rankRows.concat(records)
						this.noMore = this.pageNum >= this.totalPages || records.length < this.pageSize
					} else if (res.message) {
						this.tui.toast(res.message)
					}
				}).catch(() => {
					this.loading = false
					this.listLoading = false
				})
			},
			loadMore() {
				if (this.listLoading || this.noMore) return
				if (this.pageNum >= this.totalPages) {
					this.noMore = true
					return
				}
				this.pageNum += 1
				this.loadHome(false)
			},
			huntText(item) {
				if (item.self) return '榜上有我'
				if (item.stealth) return '已隐身'
				if (item.shielded) return '防护中'
				if ((this.home.remainHunt || 0) <= 0) return '次数用完'
				return '发起追查'
			},
			podiumName(item) {
				if (!item) return '神秘同学'
				if (item.stealth) return '隐身侠'
				return item.nickname || '神秘同学'
			},
			onHunt(item) {
				if (item.self) {
					this.tui.toast('不能追捕自己')
					return
				}
				if (item.stealth) {
					this.tui.toast('目标正在隐身，暂时无法追查')
					return
				}
				if (item.shielded) {
					this.tui.toast('目标已开启防护罩')
					return
				}
				if ((this.home.remainHunt || 0) <= 0) {
					this.tui.toast('今日追捕次数已用完')
					return
				}
				this.clearHuntTimers()
				this.huntModal.show = true
				this.huntModal.phase = 'searching'
				this.huntModal.result = null
				this.huntModal.target = item
				this.huntTimers.push(setTimeout(() => { this.huntModal.phase = 'locking' }, 900))
				this.huntTimers.push(setTimeout(() => { this.huntModal.phase = 'chasing' }, 1800))
				this.tui.request('/app/planet/hunt', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					toUserId: item.userId
				}, false, false, true).then((res) => {
					this.huntTimers.push(setTimeout(() => {
						if (res.code == 200 && res.result) {
							this.huntModal.result = res.result
							this.huntModal.phase = 'result'
							this.loadHome(true)
						} else {
							this.huntModal.show = false
							this.tui.toast(res.message)
						}
					}, 2600))
				}).catch(() => {
					this.huntModal.show = false
				})
			},
			clearHuntTimers() {
				this.huntTimers.forEach((timer) => clearTimeout(timer))
				this.huntTimers = []
			},
			closeHunt() {
				this.huntModal.show = false
				this.huntModal.result = null
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					fail() {
						uni.navigateTo({ url: '/package1/planet/index' })
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rank-page { min-height: 100vh; background: linear-gradient(155deg, #F3FFF4 0%, #EAF8FF 46%, #FFF7DD 100%); color: #12342F; }
	.nav { position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 20; display: flex; align-items: center; justify-content: center; box-sizing: content-box; background: linear-gradient(180deg, rgba(243,255,244,0.98), rgba(243,255,244,0)); }
	.nav-back { position: absolute; left: 20rpx; bottom: 0; height: 44px; width: 60rpx; display: flex; align-items: center; justify-content: center; }
	.nav-back text { color: #12342F; font-size: 48rpx; font-weight: 300; }
	.nav-title { color: #12342F; font-size: 34rpx; font-weight: 900; align-self: flex-end; padding-bottom: 6rpx; }
	.page { height: 100vh; box-sizing: border-box; padding-left: 22rpx; padding-right: 22rpx; }
	.loading-card, .empty-card { margin-top: 24rpx; height: 220rpx; border-radius: 38rpx; background: rgba(255,255,255,0.76); display: flex; align-items: center; justify-content: center; color: #6B817D; font-size: 26rpx; }
	.radar-card { position: relative; margin-top: 24rpx; min-height: 210rpx; padding: 30rpx 24rpx; border-radius: 46rpx; background: radial-gradient(circle at 18% 50%, rgba(255,122,89,0.16), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,246,219,0.7)); border: 2rpx solid rgba(255,255,255,0.94); box-shadow: 0 24rpx 58rpx rgba(255,122,89,0.12); display: flex; align-items: center; overflow: hidden; }
	.radar-visual { position: relative; width: 138rpx; height: 138rpx; border-radius: 50%; border: 2rpx solid rgba(255,122,89,0.22); background: radial-gradient(circle, rgba(255,122,89,0.13), rgba(255,255,255,0.48)); flex-shrink: 0; overflow: hidden; }
	.radar-ring { position: absolute; border-radius: 50%; border: 1rpx solid rgba(255,122,89,0.22); }
	.ring-a { left: 24rpx; top: 24rpx; width: 88rpx; height: 88rpx; }
	.ring-b { left: 48rpx; top: 48rpx; width: 40rpx; height: 40rpx; }
	.radar-sweep { position: absolute; left: 50%; top: 50%; width: 64rpx; height: 5rpx; border-radius: 999rpx; transform-origin: left center; background: linear-gradient(90deg, rgba(255,122,89,0.76), rgba(255,122,89,0)); animation: sweep 1.8s linear infinite; }
	.radar-dot { position: absolute; right: 30rpx; top: 38rpx; width: 16rpx; height: 16rpx; border-radius: 50%; background: #FF7A59; box-shadow: 0 0 18rpx rgba(255,122,89,0.55); }
	@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
	.radar-copy { flex: 1; min-width: 0; margin-left: 22rpx; }
	.radar-kicker, .rank-kicker { color: #FF7A59; font-size: 18rpx; font-weight: 900; letter-spacing: 3rpx; }
	.radar-title { margin-top: 6rpx; color: #12342F; font-size: 38rpx; font-weight: 900; }
	.radar-sub { margin-top: 8rpx; color: #7E9691; font-size: 23rpx; line-height: 1.42; font-weight: 600; }
	.radar-count { width: 112rpx; height: 112rpx; border-radius: 34rpx; background: linear-gradient(135deg, #FF7A59, #FFB84D); color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 12rpx 26rpx rgba(255,122,89,0.18); transform: rotate(4deg); flex-shrink: 0; }
	.radar-count text:first-child { font-size: 40rpx; font-weight: 900; line-height: 42rpx; }
	.radar-count text:last-child { font-size: 19rpx; font-weight: 800; margin-top: 4rpx; }
	.rank-head { margin-top: 30rpx; display: flex; align-items: flex-end; justify-content: space-between; }
	.rank-title { margin-top: 6rpx; color: #12342F; font-size: 40rpx; font-weight: 900; }
	.rank-page-no { color: #6B817D; font-size: 23rpx; font-weight: 800; }
	.podium-card { position: relative; margin-top: 22rpx; padding: 30rpx 24rpx 26rpx; border-radius: 46rpx; background: radial-gradient(circle at 50% 8%, rgba(255,184,77,0.42), transparent 36%), linear-gradient(155deg, rgba(30,27,75,0.94), rgba(36,58,84,0.9) 48%, rgba(18,52,47,0.88)); border: 2rpx solid rgba(255,255,255,0.24); box-shadow: 0 30rpx 72rpx rgba(30,27,75,0.24); overflow: hidden; }
	.podium-bg-glow { position: absolute; left: 50%; top: -170rpx; width: 620rpx; height: 620rpx; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,214,92,0.38), rgba(255,122,89,0.12) 42%, transparent 68%); animation: podiumPulse 2.4s ease-in-out infinite; }
	@keyframes podiumPulse { 0%,100%{ opacity:.58; transform: translateX(-50%) scale(.92); } 50%{ opacity:1; transform: translateX(-50%) scale(1.06); } }
	.podium-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16rpx; align-items: flex-start; }
	.podium-kicker { color: rgba(255,214,92,0.86); font-size: 17rpx; font-weight: 900; letter-spacing: 2rpx; }
	.podium-title { margin-top: 6rpx; color: #FFFFFF; font-size: 40rpx; font-weight: 900; text-shadow: 0 8rpx 20rpx rgba(0,0,0,0.18); }
	.podium-prize { max-width: 210rpx; padding: 10rpx 16rpx; border-radius: 999rpx; background: rgba(255,255,255,0.12); color: #FFE08A; font-size: 19rpx; font-weight: 900; line-height: 1.25; text-align: center; border: 1rpx solid rgba(255,255,255,0.18); }
	.reward-rule { position: relative; z-index: 1; margin-top: 20rpx; padding: 18rpx; border-radius: 28rpx; background: linear-gradient(135deg, rgba(255,224,138,0.18), rgba(255,255,255,0.1)); border: 1rpx solid rgba(255,255,255,0.18); box-shadow: inset 0 1rpx 0 rgba(255,255,255,0.18); }
	.reward-main { color: #FFF4B8; font-size: 23rpx; font-weight: 900; line-height: 1.35; }
	.reward-chips { margin-top: 12rpx; display: flex; flex-wrap: wrap; gap: 10rpx; }
	.reward-chips text { padding: 7rpx 12rpx; border-radius: 999rpx; background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.92); font-size: 19rpx; font-weight: 900; }
	.podium-stage { position: relative; z-index: 1; margin-top: 28rpx; height: 430rpx; display: flex; align-items: flex-end; justify-content: center; gap: 14rpx; }
	.podium-player { position: relative; width: 200rpx; display: flex; flex-direction: column; align-items: center; transition: transform .18s ease; }
	.podium-player:active { transform: scale(.96); }
	.podium-player.first { width: 222rpx; margin-bottom: 28rpx; }
	.podium-player.second { margin-bottom: 0; }
	.podium-player.third { margin-bottom: -18rpx; }
	.king-aura { position: absolute; top: 22rpx; width: 190rpx; height: 190rpx; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,92,0.48), transparent 68%); animation: kingAura 1.8s ease-in-out infinite; }
	@keyframes kingAura { 0%,100%{ transform: scale(.88); opacity:.66; } 50%{ transform: scale(1.08); opacity:1; } }
	.crown { position: relative; z-index: 3; width: 62rpx; height: 50rpx; line-height: 50rpx; border-radius: 18rpx 18rpx 10rpx 10rpx; text-align: center; color: #4A2A00; font-size: 28rpx; font-weight: 900; box-shadow: 0 12rpx 24rpx rgba(0,0,0,0.2); transform: translateY(16rpx); }
	.crown.gold { background: linear-gradient(145deg, #FFF7B8, #FFB84D); }
	.crown.silver { background: linear-gradient(145deg, #FFFFFF, #BFD7FF); color: #28415F; }
	.crown.bronze { background: linear-gradient(145deg, #FFE0B8, #C87A35); color: #4A2500; }
	.podium-avatar-wrap { position: relative; z-index: 2; }
	.podium-avatar { position: relative; z-index: 2; width: 112rpx; height: 112rpx; border-radius: 38rpx; border: 6rpx solid rgba(255,255,255,0.88); box-shadow: 0 18rpx 36rpx rgba(0,0,0,0.22); background: rgba(255,255,255,0.22); }
	.podium-avatar.champion { width: 136rpx; height: 136rpx; border-radius: 46rpx; border-color: #FFE08A; box-shadow: 0 20rpx 46rpx rgba(255,184,77,0.36); animation: championFloat 2.1s ease-in-out infinite; }
	@keyframes championFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8rpx); } }
	.podium-avatar.stealth { opacity: .62; filter: grayscale(100%); }
	.podium-name { margin-top: 14rpx; max-width: 178rpx; color: #FFFFFF; font-size: 24rpx; font-weight: 900; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.champion-name { font-size: 28rpx; color: #FFF4B8; }
	.podium-ticket { margin-top: 8rpx; padding: 6rpx 14rpx; border-radius: 999rpx; background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.88); font-size: 20rpx; font-weight: 900; }
	.podium-ticket.hot { background: linear-gradient(135deg, #FF7A59, #FFB84D); color: #FFFFFF; box-shadow: 0 10rpx 24rpx rgba(255,122,89,0.3); }
	.podium-base { margin-top: 16rpx; width: 170rpx; height: 92rpx; line-height: 92rpx; border-radius: 28rpx 28rpx 12rpx 12rpx; text-align: center; color: rgba(255,255,255,0.92); font-size: 24rpx; font-weight: 900; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07)); border: 1rpx solid rgba(255,255,255,0.16); }
	.podium-base.king { width: 198rpx; height: 126rpx; line-height: 126rpx; color: #4A2A00; font-size: 28rpx; background: linear-gradient(180deg, #FFE08A, #FFB84D); border: 0; box-shadow: inset 0 10rpx 22rpx rgba(255,255,255,0.26), 0 18rpx 36rpx rgba(255,184,77,0.22); }
	.podium-tip { position: relative; z-index: 1; margin-top: 16rpx; height: 58rpx; line-height: 58rpx; border-radius: 999rpx; background: rgba(255,255,255,0.12); color: #FFE08A; font-size: 22rpx; font-weight: 900; text-align: center; border: 1rpx solid rgba(255,255,255,0.16); }
	.rank-list { margin-top: 18rpx; }
	.rank-row { margin-top: 16rpx; padding: 22rpx; border-radius: 34rpx; background: rgba(255,255,255,0.82); border: 2rpx solid rgba(255,255,255,0.94); box-shadow: 0 16rpx 36rpx rgba(53,214,166,0.1); display: flex; align-items: center; }
	.rank-no { min-width: 70rpx; color: #22B889; font-size: 28rpx; font-weight: 900; }
	.avatar-wrap { position: relative; flex-shrink: 0; }
	.avatar { width: 86rpx; height: 86rpx; border-radius: 28rpx; border: 4rpx solid rgba(255,255,255,0.94); box-shadow: 0 12rpx 24rpx rgba(18,52,47,0.12); flex-shrink: 0; }
	.avatar.stealth { opacity: .58; filter: grayscale(100%); }
	.tower-badge { position: absolute; right: -10rpx; bottom: -8rpx; z-index: 4; min-width: 42rpx; height: 42rpx; line-height: 42rpx; padding: 0 6rpx; border-radius: 14rpx; background: linear-gradient(135deg, #36516F, #7C8DA6); color: #FFFFFF; font-size: 20rpx; font-weight: 900; text-align: center; border: 3rpx solid rgba(255,255,255,0.95); box-shadow: 0 8rpx 18rpx rgba(18,52,47,0.22); }
	.tower-badge.champion { right: -8rpx; bottom: -4rpx; background: linear-gradient(135deg, #4A2A00, #FFB84D); }
	.tower-badge.small { right: -12rpx; bottom: -8rpx; min-width: 38rpx; height: 38rpx; line-height: 38rpx; border-radius: 13rpx; font-size: 18rpx; }
	.user-main { flex: 1; min-width: 0; margin-left: 18rpx; }
	.user-name { display: flex; align-items: center; color: #12342F; font-size: 28rpx; font-weight: 900; }
	.user-name text:first-child { max-width: 220rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.me-tag { margin-left: 10rpx; padding: 4rpx 10rpx; border-radius: 999rpx; background: linear-gradient(135deg, #35D6A6, #4FB7FF); color: #FFFFFF; font-size: 18rpx; }
	.stealth-tag { margin-left: 10rpx; padding: 4rpx 10rpx; border-radius: 999rpx; background: #EEF2FF; color: #7C3AED; font-size: 18rpx; }
	.user-meta { margin-top: 8rpx; display: flex; flex-wrap: wrap; gap: 10rpx; color: #6B817D; font-size: 22rpx; font-weight: 700; }
	.hunt-btn { width: 132rpx; height: 62rpx; line-height: 62rpx; border-radius: 999rpx; text-align: center; background: linear-gradient(135deg, #FF7A59, #FFB84D); color: #FFFFFF; font-size: 22rpx; font-weight: 900; box-shadow: 0 14rpx 28rpx rgba(255,122,89,0.2); flex-shrink: 0; }
	.hunt-btn.disabled { background: rgba(18,52,47,0.08); color: #9AA9A5; box-shadow: none; }
	.load-more { margin-top: 28rpx; height: 66rpx; line-height: 66rpx; text-align: center; border-radius: 999rpx; background: rgba(255,255,255,0.72); color: #22B889; font-size: 24rpx; font-weight: 900; box-shadow: 0 12rpx 26rpx rgba(53,214,166,0.1); }
	.bottom-space { height: 70rpx; }
</style>
