<template>
  <div class="prize-draw-page">
    <!-- 星空背景 -->
    <StarsBackground :home-background="homeBackground" />

    <!-- 顶部标题 -->
    <div class="header-wrapper">
      <h2
        class="page-title"
        :class="{ 'animate-pulse bg-linear-to-r from-primary via-secondary to-accent bg-clip-text text-transparent': !isTextColor }"
        :style="titleStyle"
      >
        {{ topTitle }}
      </h2>
    </div>

    <!-- 抽奖进度和重置按钮 -->
    <div class="prize-info">
      <div class="progress-text" :style="{ color: textColor }">
        已抽奖：{{ prizeDrawStore.currentDrawIndex }} / 88
      </div>
      <button class="reset-button" @click="handleReset">
        重置抽奖
      </button>
    </div>

    <!-- 3D容器 -->
    <div id="prize-container" ref="containerRef" class="container-3d" />

    <!-- 操作按钮 -->
    <OptionButton
      :current-status="currentStatus"
      :table-data="tableData"
      :enter-lottery="enterLottery"
      :start-lottery="startLottery"
      :stop-lottery="stopLottery"
      :continue-lottery="continueLottery"
      :quit-lottery="quitLottery"
    />
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { PerspectiveCamera, Scene } from 'three'
import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
import * as TWEEN from '@tweenjs/tween.js'
import useStore from '@/store'
import { usePrizeDrawStore } from '@/store/prizeDrawConfig'
import type { DrawResult } from '@/store/prizeDrawConfig'
import StarsBackground from '@/views/Home/components/StarsBackground/index.vue'
import OptionButton from '@/views/Home/components/OptionsButton/index.vue'
import { useElementStyle, useElementPosition } from '@/hooks/useElement'
import { createTableVertices, createSphereVertices, confettiFire, initTableData, getRandomElements } from '@/views/Home/utils'
import { rgba, rgbToHex } from '@/utils/color'
import { selectCard } from '@/utils'
import { LotteryStatus } from '@/views/Home/type'
import type { IPersonConfig } from '@/types/storeType'

// Store
const { personConfig, globalConfig, prizeConfig } = useStore()
const prizeDrawStore = usePrizeDrawStore()
const {
  getAllPersonList: allPersonList,
  getNotPersonList: notPersonList,
  getNotThisPrizePersonList: notThisPrizePersonList,
} = storeToRefs(personConfig)
const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
const {
  getBackground: homeBackground,
  getCardColor: cardColor,
  getPatterColor: patternColor,
  getPatternList: patternList,
  getTextColor: textColor,
  getLuckyColor: luckyColor,
  getCardSize: cardSize,
  getTextSize: textSize,
  getRowCount: rowCount,
  getTitleFont: titleFont,
  getTitleFontSyncGlobal: titleFontSyncGlobal,
  getTopTitle: topTitle,
} = storeToRefs(globalConfig)

// 标题样式计算
const isTextColor = computed(() => {
  return rgbToHex(textColor.value) !== '#00000000'
})

const titleStyle = computed(() => {
  const style: any = {
    fontSize: `${textSize.value * 1.5}px`,
  }
  if (!titleFontSyncGlobal.value) {
    style.fontFamily = titleFont.value
  }
  if (isTextColor.value) {
    style.color = textColor.value
  }
  return style
})

// Three.js 相关
const containerRef = ref<HTMLElement>()
const scene = ref<Scene>()
const camera = ref<PerspectiveCamera>()
const renderer = ref<CSS3DRenderer>()
const controls = ref<TrackballControls>()
const objects = ref<any[]>([])
const targets: any = {
  table: [],
  sphere: [],
}
const animationFrameId = ref<number>()

// 页面状态
const currentStatus = ref<LotteryStatus>(LotteryStatus.init)
const canOperate = ref(true)
const isInitialDone = ref(false)
const tableData = ref<IPersonConfig[]>([])
const luckyTargets = ref<IPersonConfig[]>([])
const luckyCardList = ref<number[]>([])
const luckyCount = ref(1) // 每次抽1个
const personPool = ref<IPersonConfig[]>([])
const intervalTimer = ref<any>(null)
const currentDrawResult = ref<DrawResult | null>(null) // 保存当前抽奖结果

// 初始化 Three.js
function initThreeJs() {
  console.log('初始化 Three.js 场景...')

  const width = window.innerWidth
  const height = window.innerHeight

  scene.value = new Scene()
  camera.value = new PerspectiveCamera(40, width / height, 1, 10000)
  camera.value.position.z = 3000

  renderer.value = new CSS3DRenderer()
  renderer.value.setSize(width, height * 0.9)
  renderer.value.domElement.style.position = 'absolute'
  renderer.value.domElement.style.paddingTop = '50px'
  renderer.value.domElement.style.top = '50%'
  renderer.value.domElement.style.left = '50%'
  renderer.value.domElement.style.transform = 'translate(-50%, -50%)'
  containerRef.value!.appendChild(renderer.value.domElement)

  controls.value = new TrackballControls(camera.value, renderer.value.domElement)
  controls.value.minDistance = 500
  controls.value.maxDistance = 6000
  controls.value.addEventListener('change', render)

  console.log('创建卡片...')

  // 创建卡片
  for (let i = 0; i < tableData.value.length; i++) {
    const element = document.createElement('div')
    element.className = 'element-card'

    const number = document.createElement('div')
    number.className = 'card-id'
    number.textContent = tableData.value[i].uid
    element.appendChild(number)

    const symbol = document.createElement('div')
    symbol.className = 'card-name'
    symbol.textContent = tableData.value[i].name
    element.appendChild(symbol)

    const details = document.createElement('div')
    details.className = 'card-detail'
    details.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`
    element.appendChild(details)

    // 第4个子元素：avatar（空div，因为不显示头像）
    const avatarEmpty = document.createElement('div')
    avatarEmpty.style.display = 'none'
    element.appendChild(avatarEmpty)

    const styledElement = useElementStyle({
      element,
      person: tableData.value[i],
      index: i,
      patternList: patternList.value,
      patternColor: patternColor.value,
      cardColor: cardColor.value,
      cardSize: { width: cardSize.value.width, height: cardSize.value.height },
      scale: 1,
      textSize: textSize.value,
      mod: 'default',
    })

    const objectCSS = new CSS3DObject(styledElement)
    objectCSS.position.x = Math.random() * 4000 - 2000
    objectCSS.position.y = Math.random() * 4000 - 2000
    objectCSS.position.z = Math.random() * 4000 - 2000

    scene.value.add(objectCSS)
    objects.value.push(objectCSS)
  }

  // 创建目标位置
  targets.table = createTableVertices({
    tableData: tableData.value,
    rowCount: rowCount.value,
    cardSize: { width: cardSize.value.width, height: cardSize.value.height },
  })

  targets.sphere = createSphereVertices({ objectsLength: objects.value.length })

  window.addEventListener('resize', onWindowResize, false)

  // 初始聚合到表格
  transform(targets.table, 1000)

  // 开始动画循环
  animation()

  isInitialDone.value = true
  console.log('Three.js 初始化完成')
}

function render() {
  if (renderer.value && scene.value && camera.value) {
    renderer.value.render(scene.value, camera.value)
  }
}

function animation() {
  animationFrameId.value = requestAnimationFrame(animation)
  TWEEN.update()
  controls.value?.update()
}

function transform(targetPositions: any[], duration: number) {
  TWEEN.removeAll()

  for (let i = 0; i < objects.value.length; i++) {
    const object = objects.value[i]
    const target = targetPositions[i]

    new TWEEN.Tween(object.position)
      .to({
        x: target.position.x,
        y: target.position.y,
        z: target.position.z,
      }, Math.random() * duration + duration)
      .easing(TWEEN.Easing.Exponential.InOut)
      .start()

    new TWEEN.Tween(object.rotation)
      .to({
        x: target.rotation.x,
        y: target.rotation.y,
        z: target.rotation.z,
      }, Math.random() * duration + duration)
      .easing(TWEEN.Easing.Exponential.InOut)
      .start()
  }

  new TWEEN.Tween({})
    .to({}, duration * 2)
    .onUpdate(render)
    .start()
}

function rollBall(rotateY: number, duration: number) {
  TWEEN.removeAll()

  return new Promise((resolve) => {
    if (!scene.value) {
      resolve('')
      return
    }

    scene.value.rotation.y = 0
    const ballRotationY = Math.PI * rotateY * 1000

    new TWEEN.Tween(scene.value.rotation)
      .to({ x: 0, y: ballRotationY, z: 0 }, duration * 1000)
      .onUpdate(render)
      .start()
      .onStop(() => resolve(''))
      .onComplete(() => resolve(''))
  })
}

function onWindowResize() {
  if (!camera.value || !renderer.value)
    return

  camera.value.aspect = window.innerWidth / window.innerHeight
  camera.value.updateProjectionMatrix()
  renderer.value.setSize(window.innerWidth, window.innerHeight)
  render()
}

// 抽奖流程
async function enterLottery() {
  if (!canOperate.value)
    return

  canOperate.value = false
  await transform(targets.sphere, 1000)
  currentStatus.value = LotteryStatus.ready
  canOperate.value = true
}

function startLottery() {
  if (!canOperate.value)
    return

  console.log('开始抽奖')

  // 检查是否还有奖品
  if (prizeDrawStore.prizePool.length === 0) {
    console.log('所有奖品已抽完')
    return
  }

  // 使用 prizeDrawStore 执行抽奖
  prizeDrawStore.executeDraw().then((result: DrawResult | null) => {
    if (!result) {
      console.log('抽奖失败或已完成')
      return
    }

    console.log('抽奖结果:', result)

    // 保存抽奖结果
    currentDrawResult.value = result

    // 随机选择一张卡片来展示中奖奖品
    const randomPerson = tableData.value[Math.floor(Math.random() * tableData.value.length)]
    luckyTargets.value = [randomPerson]

    console.log('展示卡片:', randomPerson.name, '中奖:', result.prizeName)

    currentStatus.value = LotteryStatus.running
    rollBall(10, 3000)
  })
}

async function stopLottery() {
  if (!canOperate.value)
    return

  console.log('停止抽奖，展示结果')
  console.log('中奖结果:', currentDrawResult.value)

  if (!currentDrawResult.value) {
    console.error('没有抽奖结果')
    return
  }

  canOperate.value = false

  // 停止旋转并等待完成
  TWEEN.removeAll()

  // 立即将场景旋转归零
  if (scene.value) {
    scene.value.rotation.y = 0
    scene.value.rotation.x = 0
    scene.value.rotation.z = 0
  }

  // 重置相机和控制器到初始位置
  if (camera.value && controls.value) {
    camera.value.position.set(0, 0, 3000)
    camera.value.lookAt(0, 0, 0)
    controls.value.target.set(0, 0, 0)
    controls.value.update()
  }

  render()

  // 等待一小段时间确保场景稳定
  await new Promise(resolve => setTimeout(resolve, 100))

  const windowSize = { width: window.innerWidth, height: window.innerHeight }

  luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
    const cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
    luckyCardList.value.push(cardIndex)

    console.log('中奖卡片索引:', cardIndex)

    const item = objects.value[cardIndex]

    // 使用更大的 scale 来显示中奖卡片
    const luckyScale = 2.5
    const { xTable, yTable } = useElementPosition(
      item,
      rowCount.value,
      luckyTargets.value.length,
      { width: cardSize.value.width, height: cardSize.value.height },
      windowSize,
      index,
    )

    console.log('中奖卡片位置:', { xTable, yTable, scale: luckyScale })

    new TWEEN.Tween(item.position)
      .to({ x: xTable, y: yTable, z: 1000 }, 1200)
      .easing(TWEEN.Easing.Exponential.InOut)
      .onStart(() => {
        console.log('开始移动中奖卡片，更新为奖品信息')

        // CSS3DObject 的 element 属性
        const element = (item as any).element

        if (!element) {
          console.error('element 不存在！')
          return
        }

        // 更新卡片内容为奖品信息
        const prizeResult = currentDrawResult.value!

        console.log('更新卡片内容:', prizeResult)
        console.log('element 子元素数量:', element.children.length)

        // 更新卡片文本
        element.children[0].textContent = '' // 不显示序号
        element.children[1].textContent = prizeResult.prizeName // 奖品名称
        element.children[2].innerHTML = prizeResult.prizeDescription // 奖品描述

        // 更新样式 - 使用更大的尺寸
        element.style.backgroundColor = rgba(luckyColor.value, 0.9)
        element.style.border = `2px solid ${rgba(luckyColor.value, 0.85)}`
        element.style.boxShadow = `0 0 20px ${rgba(luckyColor.value, 0.8)}`
        element.style.width = `${cardSize.value.width * luckyScale}px`
        element.style.height = `${cardSize.value.height * luckyScale}px`
        element.style.padding = '20px'
        element.style.display = 'flex'
        element.style.flexDirection = 'column'
        element.style.justifyContent = 'center'
        element.style.alignItems = 'center'
        element.style.overflow = 'hidden'
        element.className = 'lucky-element-card'

        // 隐藏序号
        element.children[0].style.display = 'none'

        // 判断是否是红包奖项，调整描述文字大小
        const isRedPacket = prizeResult.prizeName.includes('红包')
        const descFontScale = isRedPacket ? 1.0 : 0.5

        element.children[1].style.fontSize = `${textSize.value * luckyScale * 1.0}px`
        element.children[1].style.lineHeight = '1.4'
        element.children[1].style.fontWeight = 'bold'
        element.children[1].style.color = '#fff'
        element.children[1].style.textShadow = `0 0 15px ${rgba(luckyColor.value, 0.95)}`
        element.children[1].style.marginBottom = '15px'
        element.children[1].style.textAlign = 'center'
        element.children[1].style.wordWrap = 'break-word'
        element.children[1].style.maxWidth = '100%'
        element.children[1].style.whiteSpace = 'normal'
        element.children[1].style.overflow = 'visible'
        element.children[1].style.opacity = '1' // 显示文字

        element.children[2].style.fontSize = `${textSize.value * luckyScale * descFontScale}px`
        element.children[2].style.color = '#fff'
        element.children[2].style.lineHeight = '1.5'
        element.children[2].style.textAlign = 'center'
        element.children[2].style.wordWrap = 'break-word'
        element.children[2].style.maxWidth = '100%'
        element.children[2].style.overflow = 'hidden'
        element.children[2].style.display = '-webkit-box'
        element.children[2].style.webkitLineClamp = '3'
        element.children[2].style.webkitBoxOrient = 'vertical'
        element.children[2].style.opacity = '1' // 显示文字

        console.log('卡片内容已更新:', prizeResult.prizeName)
      })
      .onUpdate(render)
      .start()
      .onComplete(() => {
        console.log('中奖卡片移动完成')
        canOperate.value = true
        currentStatus.value = LotteryStatus.end
      })

    new TWEEN.Tween(item.rotation)
      .to({ x: 0, y: 0, z: 0 }, 900)
      .easing(TWEEN.Easing.Exponential.InOut)
      .onUpdate(render)
      .start()
      .onComplete(() => {
        console.log('开始礼花')
        confettiFire(0, 5)
      })
  })
}

async function continueLottery() {
  // 检查是否还有奖品可抽
  if (prizeDrawStore.prizePool.length === 0) {
    console.log('所有奖品已抽完')
    currentStatus.value = LotteryStatus.init
    await transform(targets.table, 1000)
    return
  }

  console.log('继续抽奖，重置卡片')

  // 恢复中奖卡片的原始样式
  luckyCardList.value.forEach((cardIndex) => {
    const item = objects.value[cardIndex]
    const element = (item as any).element

    if (element) {
      const person = tableData.value[cardIndex]

      // 恢复原始内容
      element.children[0].textContent = person.uid
      element.children[1].textContent = person.name
      element.children[2].innerHTML = `${person.department}<br/>${person.identity}`

      // 恢复原始样式
      element.style.backgroundColor = rgba(cardColor.value, 0.8)
      element.style.border = `1px solid ${rgba(cardColor.value, 0.75)}`
      element.style.boxShadow = ''
      element.style.width = `${cardSize.value.width}px`
      element.style.height = `${cardSize.value.height}px`
      element.style.padding = ''
      element.style.display = ''
      element.style.flexDirection = ''
      element.style.justifyContent = ''
      element.style.alignItems = ''
      element.style.overflow = ''
      element.className = 'element-card'

      // 恢复序号显示
      element.children[0].style.display = ''

      // 恢复文字样式
      element.children[0].style.fontSize = `${textSize.value * 0.5}px`
      element.children[0].style.fontWeight = ''
      element.children[0].style.color = textColor.value
      element.children[0].style.marginBottom = ''
      element.children[0].style.whiteSpace = ''
      element.children[0].style.overflow = ''
      element.children[0].style.textOverflow = ''

      element.children[1].style.fontSize = `${textSize.value}px`
      element.children[1].style.lineHeight = `${textSize.value * 3}px`
      element.children[1].style.fontWeight = ''
      element.children[1].style.color = textColor.value
      element.children[1].style.textShadow = ''
      element.children[1].style.marginBottom = ''
      element.children[1].style.textAlign = ''
      element.children[1].style.wordWrap = ''
      element.children[1].style.maxWidth = ''
      element.children[1].style.whiteSpace = ''
      element.children[1].style.overflow = ''

      element.children[2].style.fontSize = `${textSize.value * 0.5}px`
      element.children[2].style.color = textColor.value
      element.children[2].style.lineHeight = ''
      element.children[2].style.textAlign = ''
      element.children[2].style.wordWrap = ''
      element.children[2].style.maxWidth = ''
      element.children[2].style.overflow = ''
      element.children[2].style.display = ''
      element.children[2].style.webkitLineClamp = ''
      element.children[2].style.webkitBoxOrient = ''
    }
  })

  // 重置状态
  luckyTargets.value = []
  luckyCardList.value = []
  currentDrawResult.value = null

  // 先将所有卡片移回表格位置，确保整齐
  await transform(targets.table, 800)

  // 等待一小段时间
  await new Promise(resolve => setTimeout(resolve, 200))

  // 再将所有卡片移到球体
  await transform(targets.sphere, 1000)

  // 等待球体动画完全完成
  await new Promise(resolve => setTimeout(resolve, 1200))

  currentStatus.value = LotteryStatus.ready

  // 自动开始下一轮抽奖
  setTimeout(() => {
    startLottery()
  }, 300)
}

async function quitLottery() {
  console.log('取消抽奖，恢复卡片')

  // 恢复中奖卡片的原始样式
  luckyCardList.value.forEach((cardIndex) => {
    const item = objects.value[cardIndex]
    const element = (item as any).element

    if (element) {
      const person = tableData.value[cardIndex]

      // 恢复原始内容
      element.children[0].textContent = person.uid
      element.children[1].textContent = person.name
      element.children[2].innerHTML = `${person.department}<br/>${person.identity}`

      // 恢复原始样式
      element.style.backgroundColor = rgba(cardColor.value, 0.8)
      element.style.border = `1px solid ${rgba(cardColor.value, 0.75)}`
      element.style.boxShadow = ''
      element.style.width = `${cardSize.value.width}px`
      element.style.height = `${cardSize.value.height}px`
      element.style.padding = ''
      element.style.display = ''
      element.style.flexDirection = ''
      element.style.justifyContent = ''
      element.style.alignItems = ''
      element.style.overflow = ''
      element.className = 'element-card'

      // 恢复序号显示
      element.children[0].style.display = ''

      // 恢复文字样式并隐藏文字
      element.children[0].style.fontSize = `${textSize.value * 0.5}px`
      element.children[0].style.fontWeight = ''
      element.children[0].style.color = textColor.value
      element.children[0].style.marginBottom = ''
      element.children[0].style.whiteSpace = ''
      element.children[0].style.overflow = ''
      element.children[0].style.textOverflow = ''
      element.children[0].style.opacity = '0' // 隐藏文字

      element.children[1].style.fontSize = `${textSize.value}px`
      element.children[1].style.lineHeight = `${textSize.value * 3}px`
      element.children[1].style.fontWeight = ''
      element.children[1].style.color = textColor.value
      element.children[1].style.textShadow = ''
      element.children[1].style.marginBottom = ''
      element.children[1].style.textAlign = ''
      element.children[1].style.wordWrap = ''
      element.children[1].style.maxWidth = ''
      element.children[1].style.whiteSpace = ''
      element.children[1].style.overflow = ''
      element.children[1].style.opacity = '0' // 隐藏文字

      element.children[2].style.fontSize = `${textSize.value * 0.5}px`
      element.children[2].style.color = textColor.value
      element.children[2].style.lineHeight = ''
      element.children[2].style.textAlign = ''
      element.children[2].style.wordWrap = ''
      element.children[2].style.maxWidth = ''
      element.children[2].style.overflow = ''
      element.children[2].style.display = ''
      element.children[2].style.webkitLineClamp = ''
      element.children[2].style.webkitBoxOrient = ''
      element.children[2].style.opacity = '0' // 隐藏文字
    }
  })

  // 重置状态
  luckyTargets.value = []
  luckyCardList.value = []
  currentDrawResult.value = null

  await transform(targets.table, 1000)
  currentStatus.value = LotteryStatus.init
}

function setDefaultPersonList() {
  personConfig.setDefaultPersonList()
  window.location.reload()
}

function handleReset() {
  // 弹出确认对话框
  const confirmed = window.confirm('确定要重置抽奖吗？这将清除所有抽奖记录并重新开始。')

  if (confirmed) {
    console.log('重置抽奖系统')

    // 重置 prizeDrawStore
    prizeDrawStore.reset()

    // 重新加载页面
    window.location.reload()
  }
}

function cleanup() {
  TWEEN.removeAll()

  if (animationFrameId.value) {
    cancelAnimationFrame(animationFrameId.value)
  }

  if (intervalTimer.value) {
    clearInterval(intervalTimer.value)
  }

  if (scene.value) {
    scene.value.clear()
  }

  if (controls.value) {
    controls.value.removeEventListener('change', render)
    controls.value.dispose()
  }

  window.removeEventListener('resize', onWindowResize)
}

const init = () => {
  console.log('初始化页面')

  // 初始化 prizeDrawStore
  if (!prizeDrawStore.isInitialized) {
    prizeDrawStore.init()
  }

  // 使用 initTableData 来正确设置 x, y 坐标
  tableData.value = initTableData({
    allPersonList: prizeDrawStore.personPool,
    rowCount: rowCount.value,
  })

  console.log('卡片数据:', tableData.value.length)
  console.log('第一张卡片坐标:', tableData.value[0]?.x, tableData.value[0]?.y)

  initThreeJs()
  containerRef.value!.style.color = textColor.value
  isInitialDone.value = true
}

onMounted(() => {
  init()
})

onUnmounted(() => {
  nextTick(() => {
    cleanup()
  })
})
</script>

<style scoped>
.prize-draw-page {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.container-3d {
  width: 100%;
  height: 100%;
}

.header-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-title {
  padding-top: 48px;
  margin: 0;
  margin-bottom: 48px;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 3rem;
  font-weight: normal;
}

.prize-info {
  position: absolute;
  top: 100px;
  right: 40px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-end;
}

.progress-text {
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.reset-button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.reset-button:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.6);
  transform: translateY(-2px);
}

.reset-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
</style>
