<!-- src/views/Activities/Game/index.vue -->
<template>
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
    <div v-else>
      <div ref="bgRef" class="bg" @scroll.passive="checkRankingLoadTrigger">
        <img v-smart-img class="bg2-layer" :src="webpUrl('bg2')" alt="" />

        <itemCenter
          style="min-height: 150vw"
          :imgUrl="webpUrl('bg')"
          :contentStyle="`flex-direction: column;justify-content: flex-start;gap:10vw;`"
        >
          <!-- 状态栏占位区域（仅在APP中显示） -->
          <!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->

          <!-- 按钮 -->
          <div
            style="
              padding: 90vw 0 0;
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
            "
          >
            <!-- 帮助按钮 -->
            <img
              v-smart-img
              :src="webpUrl('helpBt')"
              alt=""
              style="display: block; position: relative; width: 10vw; margin-right: 4vw"
              @click="maskLayerShow = true"
            />
          </div>
        </itemCenter>

        <!-- 倒计时 -->
        <itemCenter
          style="min-height: 23vw; padding: 0 3vw"
          :imgUrl="webpUrl('timeBg')"
          :contentStyle="`direction:ltr;padding:0 3vw 5vw;gap:3.5vw`"
        >
          <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
            <div class="timeText">{{ Days }}</div>
          </div>
          <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
            <div class="timeText">{{ Hours }}</div>
          </div>
          <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
            <div class="timeText">{{ Minutes }}</div>
          </div>
          <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
            <div class="timeText">{{ Second }}</div>
          </div>
        </itemCenter>

        <!-- 切换按钮 -->
        <div>
          <div style="display: flex; justify-content: space-around; margin-top: 2vw">
            <!-- 排行榜按钮 -->
            <div style="width: 40%; position: relative" @click="rankingShow = true">
              <img
                v-smart-img
                :src="webpUrl(getImgName('rankingBt'))"
                alt=""
                :class="{ 'grayscale-container': !rankingShow }"
                style="display: block; width: 100%"
              />
            </div>

            <!-- 奖励按钮 -->
            <div style="width: 40%; position: relative" @click="rankingShow = false">
              <img
                v-smart-img
                :src="webpUrl(getImgName('rewardBt'))"
                alt=""
                :class="{ 'grayscale-container': rankingShow }"
                style="display: block; width: 100%"
              />
            </div>
          </div>
        </div>

        <!-- 展示内容 -->
        <div>
          <!-- Ranking -->
          <div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
            <!-- 背景图 -->
            <div class="ranking-bg" :style="`--ranking-bg-url: url(${webpUrl('rankBg')})`"></div>

            <div
              style="
                position: relative;
                z-index: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <!-- 前三名 -->
              <itemCenter
                style="min-height: 75vw"
                :imgUrl="webpUrl('RankingMain')"
                :contentStyle="`padding: 21% 3% 0;flex-direction: column;`"
              >
                <div>
                  <!-- 第一 -->
                  <div style="display: flex; justify-content: center">
                    <TopUser
                      ranking="1"
                      :BorderImgUrl="webpUrl('top1')"
                      :avatarUrl="RankingHasTop3[0].avatar"
                      :name="RankingHasTop3[0].nickname"
                      :distributionValue="RankingHasTop3[0].quantity"
                      :valueIconUrl="coinIcon"
                      style="width: 42%"
                      @click="viewUserInfo(RankingHasTop3[0].userId)"
                    />
                  </div>
                  <!-- 第二三 -->
                  <div
                    style="
                      position: relative;
                      z-index: 3;

                      display: flex;
                      justify-content: space-between;
                      margin-top: -40%;
                      pointer-events: none;
                    "
                  >
                    <div
                      style="pointer-events: auto; width: 32%"
                      @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
                    >
                      <TopUser
                        ranking="2"
                        :BorderImgUrl="webpUrl('top2')"
                        :avatarUrl="RankingHasTop3[1].avatar"
                        :name="RankingHasTop3[1].nickname"
                        :distributionValue="RankingHasTop3[1].quantity"
                        :valueIconUrl="coinIcon"
                        style="width: 100%"
                      />
                    </div>

                    <div
                      style="pointer-events: auto; width: 32%"
                      @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
                    >
                      <TopUser
                        ranking="3"
                        :BorderImgUrl="webpUrl('top3')"
                        :avatarUrl="RankingHasTop3[2].avatar"
                        :name="RankingHasTop3[2].nickname"
                        :distributionValue="RankingHasTop3[2].quantity"
                        :valueIconUrl="coinIcon"
                        style="width: 100%"
                      />
                    </div>
                  </div>
                </div>
              </itemCenter>

              <!-- 第四名开始 -->
              <div
                v-if="showRanking.length > 0"
                style="position: relative; z-index: 2; width: 100vw"
              >
                <itemCenter
                  v-for="(listItem, index) in showRanking"
                  :key="listItem.userId"
                  style="min-height: 22vw"
                  :imgUrl="webpUrl('RankingItem')"
                  :contentStyle="`padding: 3vw 8vw 0`"
                  :lazy="true"
                  :immediate="index < 2"
                  @click="viewUserInfo(listItem.userId)"
                >
                  <!-- 基本信息 -->
                  <div
                    style="
                      flex: 1;
                      min-width: 0;

                      display: flex;
                      justify-content: space-around;
                      align-items: center;

                      gap: 4px;
                    "
                  >
                    <!-- 排名 -->
                    <div style="color: #ffe601; font-weight: 700">
                      {{ listItem?.rank }}
                    </div>

                    <!-- 头像 -->
                    <img
                      :src="listItem?.avatar || ''"
                      alt=""
                      style="
                        display: block;
                        width: 3.5em;
                        margin: 0 2%;
                        aspect-ratio: 1/1;
                        border-radius: 50%;
                        object-fit: cover;
                      "
                      @error="handleAvatarImageError"
                    />

                    <!-- 名称、id -->
                    <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
                      <div
                        style="
                          color: #fff;
                          font-weight: 860;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        class="UserNickname"
                      >
                        {{ listItem?.nickname }}
                      </div>
                      <div style="color: #fff; font-weight: 590" class="UserNickname">
                        {{ $t('user_id_prefix') }} {{ listItem?.account }}
                      </div>
                    </div>
                  </div>

                  <!-- 贡献值 -->
                  <div
                    style="
                      width: auto;
                      min-width: 0;

                      display: flex;
                      align-items: center;
                    "
                  >
                    <img
                      v-smart-img
                      src="/src/assets/icon/Aslan/coin.png"
                      alt=""
                      style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
                    />
                    <div style="color: #ffe601; font-weight: 700" class="UserNickname">
                      {{ listItem?.quantity }}
                    </div>
                  </div>
                </itemCenter>
              </div>

              <div
                v-show="rankingShow && hasMoreRanking"
                ref="rankingLoadTrigger"
                class="ranking-load-trigger"
              ></div>

              <!-- 底框 -->
              <img
                v-smart-img
                :src="webpUrl('RankingBottomBorder')"
                alt=""
                width="100%"
                style="display: block; margin-top: -13vw; position: relative; z-index: 1"
              />
            </div>
          </div>

          <!-- Rewards -->
          <div
            v-show="!rankingShow"
            style="display: flex; flex-direction: column; align-items: center"
          >
            <div
              v-for="(rewardsTop, top) in rewardsList"
              :key="top"
              style="position: relative; width: 100%; margin: 10px 0"
            >
              <itemCenter
                style="min-height: 129vw"
                :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
                :contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 3.5vw;padding: 24vw 8vw 5vw 8vw;`"
              >
                <div
                  v-for="(reward, rewardIndex) in rewardsTop.rewards"
                  :key="rewardIndex"
                  style="width: 100%"
                >
                  <div
                    style="
                      width: 100%;
                      aspect-ratio: 1/1;

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <!-- 奖励图片 -->
                    <img
                      :src="reward.cover || ''"
                      alt=""
                      style="display: block; width: 70%; object-fit: cover"
                      @error="(e) => handleRewardImageError(e, reward.type)"
                    />
                  </div>

                  <!-- 数值 -->
                  <div
                    style="
                      width: 100%;

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <div style="min-width: 0; font-size: 1.2em; font-weight: 590; color: #fff">
                      {{ showDetail(reward.type, reward) }}
                    </div>
                  </div>
                </div>
              </itemCenter>
            </div>
          </div>
        </div>

        <!-- 我的排名占位 -->
        <div style="height: 25vw"></div>

        <!-- 我的排名 -->
        <itemCenter
          style="min-height: 20vw; position: fixed; bottom: 0; z-index: 2"
          :imgUrl="webpUrl('myRankingBg')"
          :contentStyle="`padding: 0 8%`"
        >
          <!-- 基本信息 -->
          <div
            style="
              flex: 1;
              min-width: 0;

              display: flex;
              justify-content: space-around;
              align-items: center;

              gap: 8px;
            "
          >
            <!-- 排名 -->
            <div style="color: #ffe601; font-weight: 700">
              {{ myRanking.rank || 999 }}
            </div>

            <!-- 头像 -->
            <img
              :src="myRanking.avatar || ''"
              alt=""
              style="
                display: block;
                width: 4em;
                aspect-ratio: 1/1;
                border-radius: 50%;
                object-fit: cover;
              "
              @error="handleAvatarImageError"
            />

            <!-- 名称 -->
            <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
              <div
                style="
                  color: #fff;
                  font-weight: 860;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                class="UserNickname"
              >
                {{ myRanking.nickname }}
              </div>
            </div>
          </div>

          <!-- 贡献值 -->
          <div
            style="
              width: auto;
              min-width: 0;

              display: flex;
              align-items: center;
            "
          >
            <img
              v-smart-img
              src="/src/assets/icon/Aslan/coin.png"
              alt=""
              style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
            />
            <div style="color: #fff; font-weight: 700">
              {{ myRanking.quantity || 0 }}
            </div>
          </div>
        </itemCenter>

        <!-- 弹窗遮罩层 -->
        <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
          <!-- help弹窗 -->
          <div style="margin: 20% 0" @click.stop>
            <itemCenter
              style="min-height: 152vw"
              :imgUrl="webpUrl(getImgName('helpBg'))"
              :contentStyle="`inset: 22vw 7vw 10vw; overflow-y: auto; display: block;`"
            >
              <div class="helpInfo">
                <p>{{ $t('bounty_football_help_rule_1') }}</p>
                <p>{{ $t('bounty_football_help_rule_2') }}</p>
                <p>{{ $t('bounty_football_help_rule_3') }}</p>
              </div>
            </itemCenter>
          </div>
        </maskLayer>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { useLangStore } from '@/stores/lang'
import { getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
import { useDebounce } from '@/utils/useDebounce.js'

import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'

import itemCenter from '@/components/itemCenter.vue'
import TopUser from './components/topUser.vue'
import maskLayer from '@/components/MaskLayer.vue'

const coinIcon = new URL('/src/assets/icon/Aslan/coin.png', import.meta.url).href

const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const maskLayerShow = ref(false) //帮助模块

// 预加载状态
const isLoading = ref(true)

const activityType = ref(20)
const templateId = ref('2061370141245067265')
const cycleKey = ref('20260601')

const langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
  return langStore.selectedLang?.type || 'en'
})

// 获取OSS图片URL的函数
const webpUrl = (filename) => getWebpUrl('Activities/Game/BountyFootball/webp/', filename)

// 根据语言获取图片名
const getImgName = (filename) => {
  return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
}

// 倒计时
const Days = ref(0)
const Hours = ref(0)
const Minutes = ref(0)
const Second = ref(0)
let timer = null

// 模块切换展示
const rankingShow = ref(true) //排行榜

const Ranking = ref([]) // 排行榜
const rankingAllData = ref([])
const myRanking = ref({}) // 我的排名
const rewardsList = ref([]) // 奖励列表
const topImg = ref([webpUrl('rewardBgTop1'), webpUrl('rewardBgTop2'), webpUrl('rewardBgTop3')]) // top图片
const bgRef = ref(null)
const rankingLoadTrigger = ref(null)
const rankingPageSize = 10
let rankingObserver = null

const normalizeRankingUser = (user = {}) => {
  return {
    ...user,
    userId: user.userId || user.uid || '',
    avatar: user.avatar || user.userAvatar || '',
    nickname: user.nickname || user.userName || '',
    quantity: user.quantity ?? user.amount ?? 0,
    rank: user.rank ?? user.ranking ?? '',
    account: user.account || '',
    specialAccount: user.specialAccount || '',
  }
}

// 处理排行榜小于3人时的情况
const RankingHasTop3 = computed(() => {
  let RankingShow = [...Ranking.value]
  if (Ranking.value.length < 3) {
    let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
      avatar: '',
      nickname: '',
      quantity: '',
    }))
    RankingShow.push(...addNullUser)
  }
  return RankingShow
})

// 展示用的榜单
const showRanking = computed(() => {
  return Ranking.value.filter((_, index) => index >= 3)
  // return []
})

const hasMoreRanking = computed(() => {
  return Ranking.value.length < rankingAllData.value.length
})

const isRankingTriggerVisible = () => {
  if (!rankingLoadTrigger.value) return false

  const triggerRect = rankingLoadTrigger.value.getBoundingClientRect()
  const rootRect = bgRef.value?.getBoundingClientRect()
  const viewportTop = rootRect?.top ?? 0
  const viewportBottom = rootRect?.bottom ?? window.innerHeight

  return triggerRect.top <= viewportBottom && triggerRect.bottom >= viewportTop
}

const appendRankingBatch = () => {
  if (!hasMoreRanking.value) return

  const start = Ranking.value.length
  const nextRanking = rankingAllData.value.slice(start, start + rankingPageSize)
  Ranking.value.push(...nextRanking)
}

const handleRankingLoadTrigger = () => {
  if (!rankingShow.value || !hasMoreRanking.value || !isRankingTriggerVisible()) return

  console.log('上拉加载')
  appendRankingBatch()

  nextTick(() => {
    if (hasMoreRanking.value && isRankingTriggerVisible()) {
      debouncedLoadMoreRanking()
    }
  })
}

const debouncedLoadMoreRanking = useDebounce(handleRankingLoadTrigger, 300)

const checkRankingLoadTrigger = () => {
  if (!rankingShow.value || !hasMoreRanking.value) return
  debouncedLoadMoreRanking()
}

const loadInitialRanking = () => {
  appendRankingBatch()

  nextTick(() => {
    checkRankingLoadTrigger()
  })
}

const destroyRankingObserver = () => {
  if (rankingObserver) {
    rankingObserver.disconnect()
    rankingObserver = null
  }
}

const initRankingObserver = async () => {
  destroyRankingObserver()
  await nextTick()

  if (!rankingLoadTrigger.value || typeof IntersectionObserver === 'undefined') return

  rankingObserver = new IntersectionObserver(
    (entries) => {
      if (entries.some((entry) => entry.isIntersecting)) {
        debouncedLoadMoreRanking()
      }
    },
    {
      root: bgRef.value || null,
      rootMargin: '0px 0px 150px 0px',
      threshold: 0.1,
    },
  )

  rankingObserver.observe(rankingLoadTrigger.value)
  checkRankingLoadTrigger()
}

// 获取北京时间2026年6月8号早上5点
const getTargetTime = () => {
  const targetDate = new Date(2026, 5, 8, 5, 0, 0)
  return targetDate.getTime()
}

const targetTime = ref(getTargetTime())

// 格式化时间
const formatTime = (value) => {
  return value < 10 ? `0${value}` : value
}

// 倒计时
const getCountdown = () => {
  const now = Date.now()
  let diff = targetTime.value - now

  // 如果已过期，显示全零
  if (diff <= 0) {
    Days.value = 0
    Hours.value = '00'
    Minutes.value = '00'
    Second.value = '00'

    // 清除定时器
    if (timer) {
      clearInterval(timer)
      timer = null
    }
    return
  }

  const totalSeconds = Math.floor(diff / 1000)
  Days.value = Math.floor(totalSeconds / (24 * 3600))
  Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
  Second.value = formatTime(Math.floor(totalSeconds % 60))
}

// 格式化奖励的展示信息
const showDetail = (type, reward) => {
  return formatRewardDisplay(type, reward)
}

// 获取排行榜和我的排名
const getListAndMy = async () => {
  let data = {
    activityType: activityType.value,
    cycleKey: cycleKey.value,
  }
  const resMyWeekStarRanking = await getRankingListAndMyRanking(data)
  console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
  if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
    myRanking.value = normalizeRankingUser(resMyWeekStarRanking.body.currentUserRank || {})
    rankingAllData.value = (resMyWeekStarRanking.body.rankingList || []).map((item) =>
      normalizeRankingUser(item),
    )
    Ranking.value = []
    loadInitialRanking()
    await initRankingObserver()
  } else {
    myRanking.value = {}
    Ranking.value = []
    rankingAllData.value = []
    destroyRankingObserver()
  }
}

// 获取每周奖励列表和礼物
const getRewardsAndGifts = async () => {
  const resRewardsAndGifts = await getThisWeekRewardsAndGifts(templateId.value)
  if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
    rewardsList.value = resRewardsAndGifts.body.butOneRewards
  }
}

// 刷新页面数据
const initData = async () => {
  await Promise.all([
    getListAndMy(), // 获取排行榜和我的排名
    getRewardsAndGifts(), //获取本周的礼物和奖励列表
  ])
}

// 预加载关键图片
const preloadCriticalImages = async () => {
  const criticalImages = [
    webpUrl('bg'),
    webpUrl('bg2'),
    webpUrl('helpBt'),
    webpUrl('timeBg'),
    webpUrl(getImgName('rankingBt')),
    webpUrl(getImgName('rewardBt')),
    webpUrl('rankBg'),
    webpUrl('RankingItem'),
    webpUrl('RankingMain'),
    webpUrl('RankingBottomBorder'),
    webpUrl('myRankingBg'),
    webpUrl(getImgName('helpBg')),
    webpUrl('rewardBgTop1'),
    webpUrl('rewardBgTop2'),
    webpUrl('rewardBgTop3'),
    webpUrl('top1'),
    webpUrl('top2'),
    webpUrl('top3'),
  ]

  await preloadImages(criticalImages)
}

// 完成预加载
const completePreloading = async () => {
  try {
    // 执行所有初始化操作
    await Promise.all([initData(), preloadCriticalImages()])
  } catch (error) {
    console.error('预加载过程中发生错误:', error)
  } finally {
    // 无论成功或失败都结束加载状态
    isLoading.value = false
  }
}

// 使用工具函数连接APP
const connectToAppHandler = async () => {
  await connectToApp(() => {
    // 连接成功回调
    completePreloading() // 完成预加载
  })
}

// 组件挂载时检测环境
onMounted(() => {
  connectToAppHandler()
  isInAppEnvironment.value = isInApp()

  getCountdown()
  timer = setInterval(getCountdown, 1000) //倒计时每秒更新
})

onUnmounted(() => {
  clearInterval(timer) //摧毁计时器
  destroyRankingObserver()
  debouncedLoadMoreRanking.cancel()
})
</script>

<style lang="scss" scoped>
* {
  color: #fff;
}

.fullPage {
  position: relative;
  background: #053126;
}

.bg {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  scrollbar-width: none;
}

.bg::-webkit-scrollbar {
  display: none;
}

.bg > :not(.bg2-layer):not(.mask-layer) {
  position: relative;
  z-index: 1;
}

.bg :deep(.mask-layer) {
  position: fixed;
  inset: 0;
  z-index: 10000 !important;
}

.bg2-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
}

.grayscale-container {
  filter: grayscale(100%) brightness(90%);
}

.background-overlay {
  position: absolute;
  inset: 120vw 0 0;
  background-image: var(--bg2-url);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  z-index: 0; /* 确保在.bg之下 */
}

.ranking-bg {
  background-color: #053126;
  background-image: var(--ranking-bg-url);
  background-size: 100% auto;
  background-repeat: no-repeat;

  position: absolute;
  inset: 15vw 2vw 4vw;
  z-index: 1;
}

.ranking-load-trigger {
  width: 100%;
  height: 1px;
}

.timeText {
  color: #fff;
  font-weight: 590;
  font-size: 2em;
}

.timeGap {
  width: 6px;
  align-self: stretch;

  display: flex;
  justify-content: center;
  align-items: center;
}

.btTitle {
  color: #fff;
  font-weight: 700;
}

.topTitle {
  font-size: 1.5em;
}

.history-name {
  font-size: 0.8em;
}

.history-time {
  font-size: 0.8em;
}

.UserNickname {
  font-size: 0.8em;
}

.timeBox {
  display: flex;
  justify-content: center;
  margin-top: -23vw;
}

/* 添加加载动画样式 */
.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}

[dir='rtl'] .timeBox {
  flex-direction: row-reverse;
}

.helpInfo {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

.helpInfo > p {
  color: #fff;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}
</style>
