<template>
	<view class="pa" @tap="$emit('start')">
		<view class="pa-left">
			<view class="pa-kicker">TUN TUN PARTY</view>
			<view class="pa-title">松鼠屯屯乐</view>
			<view class="pa-sub">球球式收集小游戏 · 每日免费1次 · 前10名发券</view>
		</view>
		<view class="pa-ship">
			<view class="pa-squirrel">SQ</view>
			<view class="pa-flame"></view>
		</view>
	</view>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	.pa { margin-top: 22rpx; min-height: 180rpx; padding: 28rpx; border-radius: 42rpx; background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(232,246,255,0.78)); border: 2rpx solid rgba(255,255,255,0.92); box-shadow: 0 22rpx 50rpx rgba(79,183,255,0.14); display: flex; justify-content: space-between; align-items: center; overflow: hidden; position: relative; }
	.pa:before { content: ''; position: absolute; right: -60rpx; top: -80rpx; width: 260rpx; height: 260rpx; border-radius: 50%; background: radial-gradient(circle, rgba(255,184,77,0.32), transparent 66%); }
	.pa-kicker { color: #FF9C42; font-size: 20rpx; font-weight: 900; letter-spacing: 2rpx; }
	.pa-title { margin-top: 8rpx; color: #12342F; font-size: 38rpx; font-weight: 900; }
	.pa-sub { margin-top: 10rpx; color: #6B817D; font-size: 24rpx; }
	.pa-ship { position: relative; width: 150rpx; height: 110rpx; border-radius: 56rpx 56rpx 40rpx 40rpx; 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); animation: fly 2s ease-in-out infinite; }
	.pa-squirrel { position: absolute; left: 38rpx; top: 28rpx; width: 70rpx; height: 48rpx; line-height: 48rpx; border-radius: 999rpx; background: #8B5A2B; color: #fff; font-size: 20rpx; font-weight: 900; text-align: center; }
	.pa-flame { position: absolute; right: -18rpx; top: 38rpx; width: 40rpx; height: 26rpx; border-radius: 50%; background: linear-gradient(90deg, #FFB84D, rgba(255,184,77,0)); animation: flame .4s ease-in-out infinite; }
	@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>
