<template>
	<view class="pa-row">
		<view class="pa" @tap="$emit('start')">
			<view class="pa-badge">开始排位</view>
			<view class="pa-left">
				<view class="pa-kicker">COLLEGE ROCKET</view>
				<view class="pa-title">学院排位赛</view>
				<view class="pa-sub">每天21:30开奖 · 个人前五名发现金</view>
				<view class="pa-reward">
					<text>第1 ¥5</text>
					<text>第2 ¥4</text>
					<text>第3 ¥3</text>
					<text>第4 ¥2</text>
					<text>第5 ¥1</text>
				</view>
			</view>
			<view class="pa-ship">
				<view class="pa-squirrel">🚀</view>
				<view class="pa-flame"></view>
			</view>
		</view>
		<view class="pa pa-pk" @tap.stop="$emit('arena')">
			<view class="pa-badge">开始PK</view>
			<view class="pa-left">
				<view class="pa-kicker">COLLEGE ROCKET</view>
				<view class="pa-title">组队PK赛</view>
				<view class="pa-sub">好友组队挑战，胜出赢星球券</view>
				<view class="pa-reward pk">
					<text>赢券奖励</text>
					<text>好友PK</text>
					<text>冲榜加成</text>
				</view>
			</view>
			<view class="pa-ship">
				<view class="pa-squirrel">🚀</view>
				<view class="pa-flame"></view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	.pa-row { margin-top: 22rpx; display: flex; flex-direction: column; gap: 16rpx; position: relative; z-index: 8; }
	.pa { width: 100%; min-height: 174rpx; padding: 26rpx 150rpx 24rpx 24rpx; box-sizing: border-box; border-radius: 34rpx; background: radial-gradient(circle at 92% 20%, rgba(255,184,77,0.36), transparent 32%), linear-gradient(135deg, rgba(255,255,255,0.96), rgba(232,246,255,0.78)); border: 3rpx solid rgba(255,184,77,0.58); box-shadow: 0 18rpx 42rpx rgba(255,156,66,0.16), inset 0 0 0 2rpx rgba(255,255,255,0.72); display: flex; justify-content: space-between; align-items: center; overflow: hidden; position: relative; }
	.pa:before { content: ''; position: absolute; right: -60rpx; top: -80rpx; width: 300rpx; height: 300rpx; border-radius: 50%; background: radial-gradient(circle, rgba(255,184,77,0.38), transparent 66%); }
	.pa:after { content: ''; position: absolute; left: 24rpx; right: 24rpx; bottom: 12rpx; height: 10rpx; border-radius: 999rpx; background: linear-gradient(90deg, rgba(255,156,66,0.24), rgba(79,183,255,0.18)); }
	.pa-pk { background: radial-gradient(circle at 90% 18%, rgba(124,58,237,0.25), transparent 34%), radial-gradient(circle at 15% 100%, rgba(56,189,248,0.20), transparent 42%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,239,255,0.86) 48%, rgba(232,247,255,0.76)); border-color: rgba(124,58,237,0.38); box-shadow: 0 24rpx 56rpx rgba(124,58,237,0.14), inset 0 0 0 2rpx rgba(255,255,255,0.76); }
	.pa-pk:before { background: radial-gradient(circle, rgba(124,58,237,0.30), transparent 66%); }
	.pa-pk:after { background: linear-gradient(90deg, rgba(124,58,237,0.22), rgba(56,189,248,0.20)); }
	.pa-left { position: relative; z-index: 1; padding-right: 8rpx; }
	.pa-badge { position: absolute; right: 22rpx; top: 20rpx; z-index: 2; height: 42rpx; line-height: 42rpx; padding: 0 18rpx; border-radius: 999rpx; background: linear-gradient(135deg, #FF7A59, #FFB84D); color: #FFFFFF; font-size: 20rpx; font-weight: 900; box-shadow: 0 12rpx 24rpx rgba(255,122,89,0.2); }
	.pa-pk .pa-badge { background: linear-gradient(135deg, #7C3AED, #38BDF8); box-shadow: 0 12rpx 26rpx rgba(124,58,237,0.20); }
	.pa-arena { position: absolute; right: 28rpx; top: 76rpx; z-index: 2; height: 48rpx; line-height: 48rpx; padding: 0 20rpx; border-radius: 999rpx; background: linear-gradient(135deg, #7C3AED, #38BDF8); color: #FFFFFF; font-size: 21rpx; font-weight: 900; box-shadow: 0 12rpx 28rpx rgba(124,58,237,0.22); }
	.pa-kicker { color: #FF9C42; font-size: 17rpx; font-weight: 900; letter-spacing: 1rpx; }
	.pa-pk .pa-kicker { color: #7C3AED; }
	.pa-title { margin-top: 8rpx; color: #12342F; font-size: 34rpx; font-weight: 900; white-space: nowrap; }
	.pa-sub { margin-top: 8rpx; color: #6B817D; font-size: 22rpx; line-height: 1.35; max-width: 430rpx; font-weight: 800; }
	.pa-reward { margin-top: 14rpx; display: flex; flex-wrap: nowrap; gap: 6rpx; max-width: 430rpx; white-space: nowrap; overflow: hidden; }
	.pa-reward text { flex-shrink: 0; padding: 7rpx 9rpx; border-radius: 999rpx; background: rgba(255,255,255,0.78); color: #FF7A00; font-size: 18rpx; font-weight: 900; box-shadow: inset 0 1rpx 0 rgba(255,255,255,0.92); }
	.pa-reward.pk text { color: #7C3AED; }
	.pa-cta { margin-top: 18rpx; display: inline-flex; align-items: center; justify-content: center; height: 54rpx; padding: 0 26rpx; border-radius: 999rpx; background: linear-gradient(135deg, #35D6A6, #4FB7FF); color: #FFFFFF; font-size: 23rpx; font-weight: 900; box-shadow: 0 12rpx 24rpx rgba(53,214,166,0.18); }
	.pa-ship { position: absolute; right: 36rpx; bottom: 28rpx; z-index: 1; width: 96rpx; height: 72rpx; border-radius: 34rpx 34rpx 26rpx 26rpx; background: linear-gradient(145deg, #FFFFFF, #DDF8FF 50%, #FFE5AE); box-shadow: inset -12rpx -16rpx 28rpx rgba(79,183,255,0.14), 0 18rpx 42rpx rgba(255,156,66,0.18); flex-shrink: 0; opacity: .92; }
	.pa-pk .pa-ship { background: linear-gradient(145deg, #FFFFFF, #EEE7FF 48%, #DDF8FF); box-shadow: inset -12rpx -16rpx 28rpx rgba(124,58,237,0.12), 0 18rpx 42rpx rgba(56,189,248,0.18); }
	.pa-squirrel { position: absolute; left: 24rpx; top: 18rpx; width: 44rpx; height: 34rpx; line-height: 34rpx; border-radius: 999rpx; background: #8B5A2B; color: #fff; font-size: 20rpx; font-weight: 900; text-align: center; }
	.pa-pk .pa-squirrel { background: #5B21B6; }
	.pa-flame { position: absolute; right: -12rpx; top: 22rpx; width: 28rpx; height: 18rpx; border-radius: 50%; background: linear-gradient(90deg, #FFB84D, rgba(255,184,77,0)); }
	.pa-pk .pa-flame { background: linear-gradient(90deg, #38BDF8, rgba(56,189,248,0)); }
	@keyframes fly { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10rpx); } }
	@keyframes flame { 0%,100%{ transform: scaleX(.8); opacity: .7; } 50%{ transform: scaleX(1.2); opacity: 1; } }
</style>
