<template>
	<view class="arena">
		<view class="nav" :style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}">
			<view class="nav-back" @tap="goBack"><text>‹</text></view>
			<view class="nav-title">星球擂台</view>
		</view>

		<scroll-view scroll-y class="page" :style="{paddingTop: (navHeight + 10) + 'px'}" @scrolltolower="loadMoreActive">
			<view class="hero">
				<view class="hero-kicker">CAMPUS ARENA</view>
				<view class="hero-title">同一关卡，拼手速和决策</view>
				<view class="hero-sub">房间内使用同一个规则，每人一次机会，第一名通吃奖池。</view>
				<view class="create-btn" @tap="showCreate = true">创建房间</view>
			</view>

			<view class="arena-tabs">
				<view class="arena-tab" :class="{active: activeTab === 'hotRooms'}" @tap="switchTab('hotRooms')">热门房间</view>
				<view class="arena-tab" :class="{active: activeTab === 'myRooms'}" @tap="switchTab('myRooms')">我的房间</view>
				<view class="arena-tab" :class="{active: activeTab === 'myRecords'}" @tap="switchTab('myRecords')">我的战绩</view>
			</view>

			<view class="section hot-section" v-if="activeTab === 'myRooms'">
				<view class="section-head">
					<text>我的房间</text>
					<text @tap="loadMyRooms(true)">刷新</text>
				</view>
				<view class="room-card" v-for="room in myRooms" :key="room._key" @tap="joinRoom(room)">
					<view class="room-main">
						<view class="room-name">{{room.roomName || '星球擂台'}}</view>
						<view class="room-meta">{{room.playerCount || 0}}/{{room.maxPlayers || 2}} 人 · 入场 {{room.entryTickets || 1}} 券 · {{room._statusText}} · {{room._countdownText}}</view>
					</view>
					<view class="room-pool">
						<text>{{room.poolTickets || 0}}</text>
						<text>奖池</text>
					</view>
					<button class="share-mini" open-type="share" @tap.stop="setShareRoom(room)">分享</button>
				</view>
				<view class="empty" v-if="!myRooms.length && !myRoomsLoading">暂无房间，先开一间等同学来挑战</view>
				<view class="load-more" v-if="myRooms.length">{{myRoomsLoadText}}</view>
			</view>

			<view class="section hot-section" v-if="activeTab === 'myRecords'">
				<view class="section-head">
					<text>我的战绩</text>
					<text @tap="loadMyRecords(true)">刷新</text>
				</view>
				<view class="record-card" v-for="record in myRecords" :key="record._key">
					<view class="record-main">
						<!-- <view class="record-title">{{record._title}}</view> -->
						<view class="record-meta">{{record._meta}}</view>
					</view>
					<view class="record-badge" :class="record._class">{{record._result}}</view>
				</view>
				<view class="empty" v-if="!myRecords.length && !myRecordsLoading">暂无战绩，去擂台打一局</view>
				<view class="load-more" v-if="myRecords.length">{{myRecordsLoadText}}</view>
			</view>

			<view class="section hot-section" v-if="activeTab === 'hotRooms'">
				<view class="section-head">
					<text>热门房间</text>
					<text @tap="loadHotRooms(true)">刷新</text>
				</view>
				<view class="room-card" v-for="room in hotRooms" :key="room._key" @tap="joinRoom(room)">
					<view class="room-main">
						<view class="room-name">{{room.roomName || '星球擂台'}}</view>
						<view class="room-meta">{{room.playerCount || 0}}/{{room.maxPlayers || 2}} 人 · 入场 {{room.entryTickets || 1}} 券 · {{room._countdownText}}</view>
					</view>
					<view class="room-pool">
						<text>{{room.poolTickets || 0}}</text>
						<text>奖池</text>
					</view>
					<button class="share-mini" open-type="share" @tap.stop="setShareRoom(room)">邀请</button>
				</view>
				<view class="empty" v-if="!hotRooms.length && !hotLoading">还没有公开擂台，先开一间等同学来挑战</view>
				<view class="load-more" v-if="hotRooms.length">{{hotLoadText}}</view>
			</view>
		</scroll-view>

		<view class="modal" v-if="showCreate">
			<view class="modal-card">
				<view class="modal-title">创建星球擂台</view>
				<input class="field" v-model="form.roomName" maxlength="20" placeholder="房间名称" />
				<input class="field" v-model.number="form.maxPlayers" type="number" min="2" max="8" placeholder="人数 2-8" @blur="normalizeMaxPlayers" />
				<input class="field" v-model.number="form.tickets" type="number" min="1" placeholder="入场券数量" @blur="normalizeTickets" />
				<input class="field" v-model="form.password" placeholder="私密房密码，不填则公开" />
				<view class="modal-actions">
					<view class="sub-btn" @tap="showCreate = false">取消</view>
					<view class="main-btn" @tap="createRoom">创建</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { buildHomeSharePath } from '@/utils/sharePath.js'
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navHeight: 64,
				userId: '',
				regionId: '',
				nickname: '',
				avatar: '',
				college: '',
				activeTab: 'hotRooms',
				hotRooms: [],
				myRooms: [],
				myRecords: [],
				hotPageNum: 1,
				hotPageSize: 10,
				hotTotalPages: 1,
				hotLoading: false,
				myRoomsPageNum: 1,
				myRoomsPageSize: 10,
				myRoomsTotalPages: 1,
				myRoomsLoading: false,
				myRecordsPageNum: 1,
				myRecordsPageSize: 10,
				myRecordsTotalPages: 1,
				myRecordsLoading: false,
				myTicketCount: null,
				countdownTimer: null,
				showCreate: false,
				shareRoom: null,
				form: {
					roomName: '今晚冲榜局',
					maxPlayers: '',
					tickets: 1,
					password: ''
				}
			}
		},
		computed: {
			hotLoadText() {
				if (this.hotLoading) return '正在加载更多房间...'
				if (this.hotPageNum >= this.hotTotalPages) return '没有更多擂台了'
				return '上滑加载更多擂台'
			},
			myRoomsLoadText() {
				if (this.myRoomsLoading) return '正在加载我的房间...'
				if (this.myRoomsPageNum >= this.myRoomsTotalPages) return '没有更多房间了'
				return '上滑加载更多房间'
			},
			myRecordsLoadText() {
				if (this.myRecordsLoading) return '正在加载我的战绩...'
				if (this.myRecordsPageNum >= this.myRecordsTotalPages) return '没有更多战绩了'
				return '上滑加载更多战绩'
			}
		},
		onLoad(options) {
			const sys = uni.getSystemInfoSync()
			this.statusBarHeight = sys.statusBarHeight || 20
			this.initNavHeight()
			options = options || {}
			if (!uni.getStorageSync('id')) {
				const path = options.roomId ? ('/package1/planet/pkHall?roomId=' + options.roomId) : '/package1/planet/pkHall'
				uni.setStorageSync('planetPendingSharePath', path)
				uni.redirectTo({
					url: '/package2/login/login?redirect=planetPendingSharePath'
				})
				return
			}
			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.college = uni.getStorageSync('planetCollege_' + this.regionId) || ''
			if (this.regionId) {
				this.loadTicketCount()
				this.loadMyRooms(true)
				this.loadMyRecords(true)
				this.loadHotRooms(true)
			}
			if (options.roomId) {
				this.joinRoom({ id: options.roomId })
			}
			this.startCountdownTimer()
		},
		onUnload() {
			this.clearCountdownTimer()
		},
		onHide() {
			this.clearCountdownTimer()
		},
		onShow() {
			if (this.userId) this.startCountdownTimer()
		},
		onShareAppMessage() {
			const room = this.shareRoom || {}
			const roomId = room.id || ''
			return {
				title: `星球擂台开战：${room.roomName || '同一关卡来PK'}`,
				path: buildHomeSharePath('/package1/planet/adventure?mode=pk&roomId=' + roomId)
			}
		},
		methods: {
			initNavHeight() {
				try {
					const menu = uni.getMenuButtonBoundingClientRect && uni.getMenuButtonBoundingClientRect()
					if (menu && menu.top && menu.height) {
						this.navHeight = menu.top + menu.height + 8
						return
					}
				} catch (e) {}
				this.navHeight = this.statusBarHeight + 44
			},
			switchTab(tab) {
				this.activeTab = tab
				if (tab === 'myRooms') this.loadMyRooms(true)
				if (tab === 'myRecords') this.loadMyRecords(true)
				if (tab === 'hotRooms') this.loadHotRooms(true)
			},
			loadPageList(type, reset) {
				const config = {
					myRooms: {
						url: '/app/planet/adventure/pk/myRooms',
						listKey: 'myRooms',
						pageKey: 'myRoomsPageNum',
						sizeKey: 'myRoomsPageSize',
						totalKey: 'myRoomsTotalPages',
						loadingKey: 'myRoomsLoading',
						prefix: 'mine'
					},
					myRecords: {
						url: '/app/planet/adventure/pk/myRecords',
						listKey: 'myRecords',
						pageKey: 'myRecordsPageNum',
						sizeKey: 'myRecordsPageSize',
						totalKey: 'myRecordsTotalPages',
						loadingKey: 'myRecordsLoading',
						prefix: 'record'
					},
					hotRooms: {
						url: '/app/planet/adventure/pk/hotRooms',
						listKey: 'hotRooms',
						pageKey: 'hotPageNum',
						sizeKey: 'hotPageSize',
						totalKey: 'hotTotalPages',
						loadingKey: 'hotLoading',
						prefix: 'hot'
					}
				}[type]
				if (!config || this[config.loadingKey]) return
				if (!reset && this[config.pageKey] >= this[config.totalKey]) return
				const nextPage = reset ? 1 : this[config.pageKey] + 1
				if (reset) {
					this[config.pageKey] = 1
					this[config.totalKey] = 1
					this[config.listKey] = []
				}
				this[config.loadingKey] = true
				this.tui.request(config.url, 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					pageNumber: nextPage,
					pageSize: this[config.sizeKey]
				}, false, false, true).then(res => {
					this[config.loadingKey] = false
					if (res.code == 200 && res.result) {
						const records = this.withKeys(res.result.records || [], config.prefix + '_' + nextPage)
						this[config.listKey] = reset ? records : this[config.listKey].concat(records)
						this.refreshCountdowns()
						this[config.pageKey] = Number(res.result.current || nextPage)
						this[config.totalKey] = Math.max(1, Number(res.result.pages || 1))
					}
				}).catch(() => {
					this[config.loadingKey] = false
				})
			},
			loadMyRooms(reset) {
				this.loadPageList('myRooms', reset)
			},
			loadMyRecords(reset) {
				this.loadPageList('myRecords', reset)
			},
			loadHotRooms(reset) {
				this.loadPageList('hotRooms', reset)
			},
			loadTicketCount() {
				return this.tui.request('/app/planet/home', 'POST', {
					userId: this.userId,
					regionId: this.regionId
				}, false, false, true).then(res => {
					if (res.code == 200 && res.result) {
						this.myTicketCount = Number(res.result.myTicketCount || 0)
					}
				})
			},
			loadMoreActive() {
				if (this.activeTab === 'myRooms') this.loadMyRooms(false)
				else if (this.activeTab === 'myRecords') this.loadMyRecords(false)
				else this.loadHotRooms(false)
			},
			withKeys(list, prefix) {
				return list.map((item, index) => {
					item.password = ''
					item._key = item.id || (prefix + '_' + index)
					item._statusText = this.roomStatus(item.status)
					item._countdownText = this.roomCountdownText(item)
					if (prefix.indexOf('record') === 0) {
						item._title = this.recordTitle(item)
						item._meta = this.recordMeta(item)
						item._result = this.recordResult(item)
						item._class = this.recordClass(item)
					}
					return item
				})
			},
			startCountdownTimer() {
				if (this.countdownTimer) return
				this.refreshCountdowns()
				this.countdownTimer = setInterval(() => {
					this.refreshCountdowns()
				}, 1000)
			},
			clearCountdownTimer() {
				if (!this.countdownTimer) return
				clearInterval(this.countdownTimer)
				this.countdownTimer = null
			},
			refreshCountdowns() {
				this.hotRooms = this.hotRooms.map(room => Object.assign({}, room, {
					_countdownText: this.roomCountdownText(room)
				}))
				this.myRooms = this.myRooms.map(room => Object.assign({}, room, {
					_countdownText: this.roomCountdownText(room)
				}))
			},
			setShareRoom(room) {
				this.shareRoom = room
			},
			createRoom() {
				const rawMaxPlayers = parseInt(this.form.maxPlayers || 0, 10)
				if (Number.isNaN(rawMaxPlayers) || rawMaxPlayers < 2 || rawMaxPlayers > 8) {
					this.tui.toast('限制人数必须在2-8人之间')
					return
				}
				const maxPlayers = this.normalizeMaxPlayers()
				const tickets = this.normalizeTickets()
				if (this.myTicketCount === null) {
					this.loadTicketCount().then(() => {
						this.createRoom()
					})
					return
				}
				if (this.myTicketCount < tickets) {
					this.tui.toast('星球券不足，无法创建房间')
					return
				}
				this.tui.request('/app/planet/adventure/pk/create', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					nickname: this.nickname,
					avatar: this.avatar,
					college: this.college,
					roomName: this.form.roomName,
					maxPlayers,
					publicFlag: this.form.password ? 0 : 1,
					password: this.form.password,
					tickets: tickets
				}).then(res => {
					if (res.code != 200 || !res.result) {
						this.tui.toast(res.message)
						this.loadTicketCount()
						return
					}
					this.showCreate = false
					this.myTicketCount = Math.max(0, this.myTicketCount - tickets)
					this.activeTab = 'myRooms'
					this.loadMyRooms(true)
					this.loadHotRooms(true)
					this.joinRoom(res.result)
				})
			},
			normalizeMaxPlayers() {
				const maxPlayers = parseInt(this.form.maxPlayers || 2, 10)
				if (Number.isNaN(maxPlayers)) {
					this.form.maxPlayers = 2
					return 2
				}
				if (maxPlayers < 2) {
					this.form.maxPlayers = 2
					return 2
				}
				if (maxPlayers > 8) {
					this.form.maxPlayers = 8
					return 8
				}
				this.form.maxPlayers = maxPlayers
				return maxPlayers
			},
			normalizeTickets() {
				const tickets = parseInt(this.form.tickets || 1, 10)
				this.form.tickets = Number.isNaN(tickets) || tickets < 1 ? 1 : tickets
				return this.form.tickets
			},
			joinRoom(room) {
				this.tui.request('/app/planet/adventure/pk/roomInfo', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					roomId: room.id
				}, false, false, true).then(infoRes => {
					if (infoRes.code != 200 || !infoRes.result || !infoRes.result.room) {
						this.tui.toast(infoRes.message)
						this.loadHotRooms(true)
						this.loadMyRooms(true)
						return
					}
					const latestRoom = infoRes.result.room
					const joined = !!infoRes.result.player
					if (latestRoom.status === 2 || latestRoom.status === 3) {
						this.tui.toast('房间已结束')
						this.loadHotRooms(true)
						this.loadMyRooms(true)
						return
					}
					if (!joined && (latestRoom.playerCount || 0) >= (latestRoom.maxPlayers || 2)) {
						this.tui.toast('房间人数已满，无法进入')
						this.loadHotRooms(true)
						this.loadMyRooms(true)
						return
					}
					this.doJoinRoom(Object.assign({}, room, latestRoom), joined)
				})
			},
			doJoinRoom(room, joined) {
				this.tui.request('/app/planet/adventure/pk/join', 'POST', {
					userId: this.userId,
					regionId: room.regionId || this.regionId,
					nickname: this.nickname,
					avatar: this.avatar,
					college: this.college,
					roomId: room.id,
					password: room.password || ''
				}).then(res => {
					if (res.code != 200 || !res.result) {
						this.tui.toast(res.message)
						this.loadTicketCount()
						return
					}
					this.loadTicketCount()
					uni.navigateTo({
						url: '/package1/planet/adventure?mode=pk&roomId=' + room.id + '&seed=' + encodeURIComponent(res.result.seed || '')
					})
				})
			},
			roomStatus(status) {
				if (status === 2) return '已结算'
				if (status === 1) return '进行中'
				if (status === 3) return '已取消'
				return '等待中'
			},
			roomCountdownText(room) {
				if (!room || room.status === 2 || room.status === 3) return '已结束'
				const createdAt = this.parseRoomTime(room.createTime)
				if (!createdAt) return '30分钟后自动结算'
				const remain = createdAt + 30 * 60 * 1000 - Date.now()
				if (remain <= 0) return '结算中'
				const minutes = Math.floor(remain / 60000)
				const seconds = Math.floor((remain % 60000) / 1000)
				return '剩余 ' + this.pad2(minutes) + ':' + this.pad2(seconds) + ' 自动结算'
			},
			parseRoomTime(value) {
				if (!value) return 0
				if (typeof value === 'number') return value
				const time = Date.parse(String(value).replace(/-/g, '/'))
				return isNaN(time) ? 0 : time
			},
			pad2(value) {
				value = Number(value || 0)
				return value < 10 ? '0' + value : String(value)
			},
			recordTitle(record) {
				if (record.cleared === 1) return (record.durationSeconds || 0) + '秒通关'
				return '挑战失败'
			},
			recordMeta(record) {
				const ticketText = '入场 ' + (record.entryTickets || 0) + ' 券'
				if (record.rewardTickets > 0) return ticketText + ' · 奖励 +' + record.rewardTickets
				return ticketText + ' · ' + (record.finishTime || record.createTime || '')
			},
			recordResult(record) {
				if (record.status === 1 || record.status === 0) return '待结算'
				if (record.rewardTickets > 0) return '胜利'
				if (record.status === 2 && record.cleared === 1 && record.rankNo === 1) return '胜利'
				if ((record.status === 2 || record.status === 3 || record.status === 4) && record.rewardTickets === record.entryTickets && (!record.rankNo || record.rankNo === 0)) return '无人通关'
				return '失败'
			},
			recordClass(record) {
				const result = this.recordResult(record)
				if (result === '胜利') return 'win'
				if (result === '无人通关') return 'refund'
				if (result === '待结算') return 'pending'
				return 'lose'
			},
			goBack() {
				const pages = getCurrentPages ? getCurrentPages() : []
				if (pages.length > 1) {
					uni.navigateBack({ delta: 1 })
					return
				}
				uni.redirectTo({ url: '/package1/planet/index' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.arena { min-height: 100vh; background: linear-gradient(155deg, #F7F2FF 0%, #EAF8FF 46%, #FFF7DE 100%); color: #172033; }
	.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(247,242,255,.9); }
	.nav-back { position: absolute; left: 24rpx; bottom: 12rpx; width: 56rpx; height: 56rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); color: #172033; box-shadow: 0 8rpx 20rpx rgba(23,32,51,.08); }
	.nav-back text { padding-bottom: 14rpx;padding-right: 4rpx;font-size: 62rpx; line-height: 1;font-weight: 500; transform: translateY(-2rpx); }
	.nav-title { padding-bottom: 14rpx; font-size: 32rpx; font-weight: 900; }
	.page { height: 100vh; box-sizing: border-box; padding-left: 24rpx; padding-right: 24rpx; }
	.hero, .section, .panel { margin-bottom: 24rpx; border-radius: 42rpx; background: rgba(255,255,255,.84); padding: 30rpx; box-shadow: 0 18rpx 48rpx rgba(124,58,237,.10); }
	.hot-section { margin-bottom: 46rpx; }
	.hero { background: radial-gradient(circle at 90% 10%, rgba(124,58,237,.22), transparent 36%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,246,255,.78)); }
	.hero-kicker { color: #7C3AED; font-size: 22rpx; font-weight: 900; letter-spacing: 2rpx; }
	.hero-title { margin-top: 10rpx; font-size: 42rpx; font-weight: 900; }
	.hero-sub { margin-top: 14rpx; color: #667085; font-size: 24rpx; line-height: 1.55; }
	.create-btn, .main-btn { margin-top: 22rpx; height: 76rpx; line-height: 76rpx; border-radius: 999rpx; text-align: center; color: #fff; font-size: 28rpx; font-weight: 900; background: linear-gradient(135deg, #7C3AED, #38BDF8); box-shadow: 0 16rpx 34rpx rgba(124,58,237,.18); }
	.arena-tabs { margin-bottom: 24rpx; padding: 8rpx; border-radius: 999rpx; background: rgba(255,255,255,.72); border: 2rpx solid rgba(255,255,255,.9); display: flex; gap: 8rpx; box-shadow: 0 14rpx 34rpx rgba(124,58,237,.08); }
	.arena-tab { flex: 1; height: 66rpx; line-height: 66rpx; border-radius: 999rpx; text-align: center; color: #667085; font-size: 24rpx; font-weight: 900; }
	.arena-tab.active { color: #fff; background: linear-gradient(135deg, #7C3AED, #38BDF8); box-shadow: 0 12rpx 26rpx rgba(124,58,237,.18); }
	.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18rpx; color: #7C3AED; font-size: 23rpx; font-weight: 900; }
	.section-head text:first-child { color: #172033; font-size: 31rpx; }
	.room-card { margin-top: 16rpx; padding: 22rpx; border-radius: 30rpx; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,247,255,.82)); display: flex; align-items: center; justify-content: space-between; border: 2rpx solid rgba(124,58,237,.10); }
	.room-main { flex: 1; min-width: 0; }
	.room-name { font-size: 29rpx; font-weight: 900; }
	.room-meta { margin-top: 8rpx; color: #667085; font-size: 22rpx; }
	.room-pool { min-width: 108rpx; height: 88rpx; border-radius: 26rpx; background: #FFF3D7; color: #B7791F; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; }
	.room-pool text:first-child { font-size: 32rpx; }
	.room-pool text:last-child { font-size: 19rpx; margin-top: 4rpx; }
	.share-mini { margin: 0 0 0 14rpx; padding: 0 18rpx; min-width: 0; height: 56rpx; line-height: 56rpx; border-radius: 999rpx; background: #EEF2FF; color: #7C3AED; font-size: 22rpx; font-weight: 900; }
	.share-mini:after, .mini-share:after { border: 0; }
	.duo { display: flex; gap: 18rpx; background: transparent; box-shadow: none; padding: 0; }
	.panel { flex: 1; min-width: 0; margin-bottom: 0; padding: 22rpx; border-radius: 34rpx; }
	.mini-row { margin-top: 14rpx; padding: 16rpx; border-radius: 22rpx; background: rgba(248,250,252,.9); display: flex; justify-content: space-between; gap: 12rpx; font-size: 22rpx; color: #667085; }
	.mini-row text:first-child { color: #172033; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.mini-share { margin: 0; padding: 0 14rpx; min-width: 0; height: 40rpx; line-height: 40rpx; border-radius: 999rpx; background: #F4F3FF; color: #7C3AED; font-size: 18rpx; font-weight: 900; }
	.record-card { margin-top: 16rpx; padding: 24rpx; border-radius: 30rpx; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(247,250,255,.84)); display: flex; align-items: center; justify-content: space-between; border: 2rpx solid rgba(124,58,237,.10); }
	.record-main { flex: 1; min-width: 0; }
	.record-title { color: #172033; font-size: 29rpx; font-weight: 900; }
	.record-meta { margin-top: 8rpx; color: #667085; font-size: 24rpx; }
	.record-badge { margin-left: 18rpx; min-width: 110rpx; height: 58rpx; line-height: 58rpx; border-radius: 999rpx; text-align: center; font-size: 23rpx; font-weight: 900; background: #EEF2FF; color: #7C3AED; }
	.record-badge.win { background: linear-gradient(135deg, #FFB84D, #FF7A59); color: #fff; box-shadow: 0 12rpx 24rpx rgba(255,122,89,.18); }
	.record-badge.lose { background: #FEE2E2; color: #EF4444; }
	.record-badge.refund { background: #E0F2FE; color: #0284C7; }
	.record-badge.pending { background: #F4F3FF; color: #7C3AED; }
	.empty { margin-top: 20rpx; color: #8A94A6; font-size: 24rpx; }
	.empty.small { font-size: 21rpx; }
	.load-more { margin-top: 24rpx; height: 58rpx; line-height: 58rpx; text-align: center; border-radius: 999rpx; background: rgba(238,242,255,.76); color: #7C3AED; font-size: 23rpx; font-weight: 900; }
	.modal { position: fixed; inset: 0; z-index: 99; background: rgba(23,32,51,.22); display: flex; align-items: center; justify-content: center; padding: 46rpx; }
	.modal-card { width: 100%; border-radius: 42rpx; background: #fff; padding: 36rpx; }
	.modal-title { text-align: center; font-size: 36rpx; font-weight: 900; margin-bottom: 22rpx; }
	.field { height: 78rpx; margin-bottom: 16rpx; padding: 0 22rpx; border-radius: 22rpx; background: #F5F7FB; font-size: 25rpx; }
	.modal-actions { display: flex; gap: 16rpx; margin-top: 10rpx; }
	.sub-btn, .main-btn { flex: 1; margin-top: 0; height: 76rpx; line-height: 76rpx; border-radius: 999rpx; text-align: center; font-size: 27rpx; font-weight: 900; }
	.sub-btn { background: #F2F4F7; color: #667085; }
</style>
