<template>
  <view class="lucky-popup-container">
    <uni-popup ref="popup" type="center" :mask-click="false">
      <!-- 动画阶段 -->
      <view v-if="isAnimating" class="animation-container">
        <view class="card-flip-wrapper" :class="{ flipped: isFlipping }">
          <view class="card-front">
            <view class="loading-circle">
              <view class="particle p1"></view>
              <view class="particle p2"></view>
              <view class="particle p3"></view>
              <view class="particle p4"></view>
            </view>
            <text class="loading-text">{{ loadingText }}</text>
          </view>
          <view class="card-back"></view>
        </view>
        <view class="light-effect" v-if="showLight"></view>
      </view>

      <!-- 结果阶段 -->
      <view v-else class="result-container">
        <view class="lucky-card" id="lucky-card">
          <!-- 头部渐变区 -->
          <view class="card-header">
            <!-- Top Bar: User Info & Date -->
            <view class="header-top-bar">
              <view
                class="user-info-row"
                v-if="userInfo && (userInfo.avatarUrl || userInfo.nickName)"
              >
                <image
                  class="user-avatar"
                  :src="
                    userInfo.avatarUrl || '/static/images/default-avatar.png'
                  "
                  mode="aspectFill"
                />
                <text class="user-name">{{
                  userInfo.nickName || "好运用户"
                }}</text>
              </view>
              <view class="date-tag">{{ currentDateStr }}</view>
            </view>

            <!-- Main Content: Score & Word -->
            <view class="header-main">
              <text class="header-label">今日好运指数</text>
              <view class="score-wrap">
                <text class="score">{{ resultData.score }}</text>
                <text class="percent">%</text>
              </view>
              <text class="lucky-word">{{ resultData.luckyWord }}</text>
            </view>

            <!-- Decorators -->
            <view class="header-decor left-bottom">福</view>
            <view class="header-decor right-bottom">禧</view>
          </view>

          <!-- 内容区 -->
          <view class="card-body">
            <!-- 宜忌 -->
            <view class="yi-ji-grid">
              <view class="grid-item yi">
                <view class="item-title">
                  <uni-icons type="checkmarkempty" size="16" color="#d81e06" />
                  <text>今日宜</text>
                </view>
                <text class="item-content">{{ resultData.yi }}</text>
              </view>
              <view class="grid-item ji">
                <view class="item-title">
                  <uni-icons type="closeempty" size="16" color="#666" />
                  <text>今日忌</text>
                </view>
                <text class="item-content">{{ resultData.ji }}</text>
              </view>
            </view>

            <!-- 幸运元素 -->
            <view class="lucky-elements">
              <view class="elements-title">
                <uni-icons type="star-filled" size="16" color="#ffca28" />
                <text>幸运元素</text>
              </view>
              <view class="elements-row">
                <view class="el-item">
                  <text class="label">颜色</text>
                  <text class="value color-val">{{
                    resultData.luckyColor
                  }}</text>
                </view>
                <view class="divider"></view>
                <view class="el-item">
                  <text class="label">数字</text>
                  <text class="value">{{ resultData.luckyNumber }}</text>
                </view>
                <view class="divider"></view>
                <view class="el-item">
                  <text class="label">方向</text>
                  <text class="value">{{ resultData.luckyDirection }}</text>
                </view>
              </view>
            </view>

            <view class="quote-text">“{{ resultData.quote }}”</view>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="bottom-actions">
          <view class="action-btn" @tap="onSaveImage">
            <uni-icons type="download" size="24" color="#fff" />
            <text class="btn-label">保存</text>
          </view>

          <button class="action-btn share-btn" open-type="share">
            <uni-icons type="paperplane" size="24" color="#fff" />
            <text class="btn-label">好友</text>
          </button>

          <view class="action-btn" @tap="onShareMoments">
            <uni-icons type="camera" size="24" color="#fff" />
            <text class="btn-label">朋友圈</text>
          </view>

          <view class="action-btn close-btn" @tap="close">
            <uni-icons type="closeempty" size="24" color="#fff" />
            <text class="btn-label">关闭</text>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 画布用于生成图片 -->
    <canvas
      type="2d"
      id="luckyCanvas"
      class="lucky-canvas"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    ></canvas>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from "vue";
import calendar from "@/utils/lunar.js";
import { useUserStore } from "@/stores/user";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { getShareToken } from "@/utils/common.js";

const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const popup = ref(null);
const isAnimating = ref(true);
const isFlipping = ref(false);
const showLight = ref(false);
const loadingText = ref("好运加载中...");
const currentDateStr = ref("");

// 画布相关
const canvasWidth = ref(600);
const canvasHeight = ref(1100);

const resultData = ref({
  score: 88,
  luckyWord: "鸿运当头",
  yi: "沟通合作、尝试新事物",
  ji: "熬夜、冲动消费",
  luckyColor: "如意金",
  luckyNumber: "6",
  luckyDirection: "东南",
  quote: "今天适合向前一步，好运正在回应你的努力。",
});

const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];

const open = (data = null, skipAnimation = false) => {
  if (data) {
    resultData.value = { ...resultData.value, ...data };
  }

  const now = new Date();
  const y = now.getFullYear();
  const m = (now.getMonth() + 1).toString().padStart(2, "0");
  const d = now.getDate().toString().padStart(2, "0");
  const lunar = calendar.solar2lunar(now);
  currentDateStr.value = `${y}.${m}.${d} ${lunar.lunarDateStr}`;

  popup.value.open();

  if (skipAnimation) {
    isAnimating.value = false;
    isFlipping.value = true; // Ensure flipped state if needed for consistency, though v-else handles view
    showLight.value = false;
  } else {
    isAnimating.value = true;
    isFlipping.value = false;
    showLight.value = false;
    loadingText.value = texts[0];
    startAnimation();
  }
};

const close = () => {
  popup.value.close();
};

const startAnimation = () => {
  // 文字轮播
  let step = 0;
  const timer = setInterval(() => {
    step++;
    if (step < texts.length) {
      loadingText.value = texts[step];
    }
  }, 600);

  // 1.5s 后翻转
  setTimeout(() => {
    clearInterval(timer);
    isFlipping.value = true;
    showLight.value = true;

    // 动画结束后显示结果
    setTimeout(() => {
      isAnimating.value = false;
    }, 600);
  }, 1800);
};

const onSaveImage = async () => {
  uni.showLoading({ title: "生成图片中..." });

  const query = uni.createSelectorQuery().in(proxy);
  query
    .select("#luckyCanvas")
    .fields({ node: true, size: true })
    .exec(async (res) => {
      if (!res[0] || !res[0].node) {
        uni.hideLoading();
        uni.showToast({ title: "Canvas not found", icon: "none" });
        return;
      }

      const canvas = res[0].node;
      const ctx = canvas.getContext("2d");
      const dpr = uni.getSystemInfoSync().pixelRatio || 2;

      // Set canvas size (physical pixels)
      canvas.width = res[0].width * dpr;
      canvas.height = res[0].height * dpr;

      // Reset transform
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Scale context
      ctx.scale(dpr, dpr);

      const W = res[0].width;
      const H = res[0].height;

      // Helper function to load image
      const loadCanvasImage = (url) => {
        return new Promise((resolve, reject) => {
          const img = canvas.createImage();
          img.onload = () => resolve(img);
          img.onerror = (e) => reject(e);
          img.src = url;
        });
      };

      try {
        // Load images
        let avatarUrl = "/static/images/default-avatar.png";
        if (userInfo.value && userInfo.value.avatarUrl) {
          avatarUrl = userInfo.value.avatarUrl;
        }

        const [avatarImg, qrCodeImg] = await Promise.all([
          loadCanvasImage(avatarUrl).catch(() =>
            loadCanvasImage("/static/images/default-avatar.png"),
          ),
          loadCanvasImage("/static/images/qrcode.jpg").catch(() => null),
        ]);

        // 1. 绘制背景
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, W, H);

        // 2. 绘制卡片头部渐变
        const headerH = 460;
        const grd = ctx.createLinearGradient(0, 0, 0, headerH);
        grd.addColorStop(0, "#d84315");
        grd.addColorStop(1, "#ffca28");
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, W, headerH);

        // --- Top Bar ---
        const topY = 40;
        const avatarSize = 64;

        // 绘制用户头像 (Top Left)
        ctx.save();
        ctx.beginPath();
        ctx.arc(
          40 + avatarSize / 2,
          topY + avatarSize / 2,
          avatarSize / 2,
          0,
          2 * Math.PI,
        );
        ctx.clip();
        if (avatarImg) {
          ctx.drawImage(avatarImg, 40, topY, avatarSize, avatarSize);
        }
        ctx.restore();

        // 绘制用户昵称
        ctx.textAlign = "left";
        ctx.fillStyle = "#ffffff";
        ctx.font = "bold 26px sans-serif";
        ctx.fillText(
          userInfo.value?.nickName || "好运用户",
          40 + avatarSize + 16,
          topY + 42,
        );

        // 绘制日期 (Top Right)
        const dateStr = currentDateStr.value || "2026 CNY SPECIAL";
        ctx.font = "normal 22px sans-serif";
        const dateWidth = ctx.measureText(dateStr).width + 30;
        const dateX = W - 40 - dateWidth;
        const dateY = topY + 12; // box top
        // date bg
        ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
        roundRect(ctx, dateX, dateY, dateWidth, 40, 20);
        ctx.fill();
        // date text
        ctx.fillStyle = "#ffffff";
        ctx.fillText(dateStr, dateX + 15, dateY + 28);

        // --- Main Content (Centered) ---
        const centerX = W / 2;

        // Label
        ctx.textAlign = "center";
        ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
        ctx.font = "normal 24px sans-serif";
        ctx.fillText("今日好运指数", centerX, 180);

        // Score
        ctx.fillStyle = "#ffffff";
        ctx.font = "bold 140px sans-serif";
        ctx.fillText(resultData.value.score + "%", centerX, 310);

        // Lucky Word
        ctx.font = "bold 52px sans-serif";
        ctx.fillText(resultData.value.luckyWord, centerX, 390);

        // Decorators (Bottom Corners)
        ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
        ctx.font = "normal 24px sans-serif";
        ctx.textAlign = "left";
        ctx.fillText("福", 40, headerH - 20);
        ctx.textAlign = "right";
        ctx.fillText("禧", W - 40, headerH - 20);

        // 5. 绘制内容区 (宜/忌)
        const gridY = 500;
        const boxW = (W - 64 - 24) / 2;
        const gridH = 140;

        // 宜
        drawBox(ctx, 32, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
        ctx.textAlign = "left";
        ctx.font = "bold 24px sans-serif";
        ctx.fillStyle = "#d81e06";
        ctx.fillText("✔ 今日宜", 56, gridY + 44);

        ctx.font = "normal 22px sans-serif";
        ctx.fillStyle = "#666666";
        wrapText(ctx, resultData.value.yi, 56, gridY + 80, boxW - 48, 30);

        // 忌
        drawBox(ctx, 32 + boxW + 24, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
        ctx.font = "bold 24px sans-serif";
        ctx.fillStyle = "#666666";
        ctx.fillText("✖ 今日忌", 32 + boxW + 24 + 24, gridY + 44);

        ctx.font = "normal 22px sans-serif";
        wrapText(
          ctx,
          resultData.value.ji,
          32 + boxW + 24 + 24,
          gridY + 80,
          boxW - 48,
          30,
        );

        // 6. 幸运元素
        const elY = 670;
        const elH = 160;
        drawBox(ctx, 32, elY, W - 64, elH, "#fbfbfb", "#f5f5f5");

        // 标题
        ctx.font = "bold 26px sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText("★ 幸运元素", 56, elY + 46);

        // 元素内容
        const contentW = W - 64;
        const colW = contentW / 3;
        const startX = 32;

        const labelY = elY + 90;
        const valY = elY + 126;

        // 颜色
        ctx.textAlign = "center";
        ctx.font = "normal 20px sans-serif";
        ctx.fillStyle = "#999999";
        ctx.fillText("颜色", startX + colW * 0.5, labelY);

        ctx.font = "bold 26px sans-serif";
        ctx.fillStyle = "#d84315";
        ctx.fillText(resultData.value.luckyColor, startX + colW * 0.5, valY);

        // 数字
        ctx.font = "normal 20px sans-serif";
        ctx.fillStyle = "#999999";
        ctx.fillText("数字", startX + colW * 1.5, labelY);

        ctx.font = "bold 26px sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(resultData.value.luckyNumber, startX + colW * 1.5, valY);

        // 方向
        ctx.font = "normal 20px sans-serif";
        ctx.fillStyle = "#999999";
        ctx.fillText("方向", startX + colW * 2.5, labelY);

        ctx.font = "bold 26px sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(
          resultData.value.luckyDirection,
          startX + colW * 2.5,
          valY,
        );

        // 分隔线
        ctx.strokeStyle = "#eeeeee";
        ctx.lineWidth = 2;
        ctx.beginPath();
        const lineTop = elY + 70;
        const lineBottom = elY + 130;
        ctx.moveTo(startX + colW, lineTop);
        ctx.lineTo(startX + colW, lineBottom);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(startX + colW * 2, lineTop);
        ctx.lineTo(startX + colW * 2, lineBottom);
        ctx.stroke();

        // 7. 语录
        ctx.textAlign = "center";
        ctx.font = "italic 22px sans-serif";
        ctx.fillStyle = "#999999";
        wrapTextCentered(
          ctx,
          `“${resultData.value.quote}”`,
          W / 2,
          880,
          W - 80,
          30,
        );

        // 8. 底部区域 (Footer)
        const footerY = 960;

        // 分隔线
        ctx.strokeStyle = "#f0f0f0";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(40, footerY);
        ctx.lineTo(W - 40, footerY);
        ctx.stroke();

        // 底部左侧文字
        ctx.textAlign = "left";
        ctx.font = "28px sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText("扫码开启今日好运", 40, footerY + 60);

        ctx.font = "normal 20px sans-serif";
        ctx.fillStyle = "#999999";
        ctx.fillText("2026 LUCKY EVERY DAY · 幸运每一天", 40, footerY + 100);

        // 底部右侧二维码
        if (qrCodeImg) {
          ctx.drawImage(qrCodeImg, W - 140, footerY + 25, 100, 100);
        }

        // 生成图片
        setTimeout(() => {
          uni.canvasToTempFilePath({
            canvas: canvas,
            width: W,
            height: H,
            destWidth: W * dpr,
            destHeight: H * dpr,
            success: (res) => {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  uni.hideLoading();
                  uni.showToast({ title: "已保存到相册", icon: "success" });
                },
                fail: () => {
                  uni.hideLoading();
                  uni.showToast({ title: "保存失败，请授权", icon: "none" });
                },
              });
            },
            fail: (err) => {
              uni.hideLoading();
              uni.showToast({ title: "生成图片失败", icon: "none" });
              console.error(err);
            },
          });
        }, 200);
      } catch (err) {
        console.error(err);
        uni.hideLoading();
        uni.showToast({ title: "生成图片失败", icon: "none" });
      }
    });
};

// 辅助函数：绘制圆角矩形
function roundRect(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
  ctx.lineTo(x + w, y + h - r);
  ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
  ctx.lineTo(x + r, y + h);
  ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
  ctx.lineTo(x, y + r);
  ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
  ctx.closePath();
}

// 辅助函数：绘制带背景边框的盒子
function drawBox(ctx, x, y, w, h, bg, border) {
  ctx.fillStyle = bg;
  ctx.strokeStyle = border;
  ctx.lineWidth = 2;
  roundRect(ctx, x, y, w, h, 20);
  ctx.fill();
  ctx.stroke();
}

// 辅助函数：文字换行
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
  let words = text.split("");
  let line = "";
  for (let n = 0; n < words.length; n++) {
    let testLine = line + words[n];
    let metrics = ctx.measureText(testLine);
    let testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      ctx.fillText(line, x, y);
      line = words[n];
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  ctx.fillText(line, x, y);
}

// 辅助函数：文字换行（居中）
function wrapTextCentered(ctx, text, x, y, maxWidth, lineHeight) {
  let words = text.split("");
  let line = "";
  for (let n = 0; n < words.length; n++) {
    let testLine = line + words[n];
    let metrics = ctx.measureText(testLine);
    let testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      ctx.fillText(line, x, y);
      line = words[n];
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  ctx.fillText(line, x, y);
}

const onShareMoments = () => {
  uni.showToast({ title: "请点击右上角分享", icon: "none" });
};

onShareAppMessage(async () => {
  const shareToken = await getShareToken("lucky_card");
  return {
    title: "开启你的每日好运！",
    path: `/pages/index/index?shareToken=${shareToken}`,
  };
});

onShareTimeline(async () => {
  const shareToken = await getShareToken("lucky_card_timeline");
  return {
    title: "开启你的每日好运！",
    query: `shareToken=${shareToken}`,
  };
});

defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.lucky-popup-container {
  /* 动画容器 */
  .animation-container {
    width: 600rpx;
    height: 920rpx; /* Updated height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    perspective: 1000px;
  }

  .card-flip-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    &.flipped {
      transform: rotateY(180deg);
    }
  }

  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.3);
  }

  .card-front {
    background: linear-gradient(135deg, #fffcf5 0%, #fff4e6 100%);
    z-index: 2;

    .loading-circle {
      width: 120rpx;
      height: 120rpx;
      position: relative;
      margin-bottom: 40rpx;

      .particle {
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        background: #ff8f00;
        border-radius: 50%;
        animation: orbit 1.5s linear infinite;

        /* 绝对居中 */
        top: 50%;
        left: 50%;
        margin-top: -10rpx;
        margin-left: -10rpx;

        &.p1 {
          animation-delay: 0s;
        }
        &.p2 {
          animation-delay: -0.375s;
        }
        &.p3 {
          animation-delay: -0.75s;
        }
        &.p4 {
          animation-delay: -1.125s;
        }
      }
    }

    .loading-text {
      color: #d81e06;
      font-size: 28rpx;
      letter-spacing: 2rpx;
      font-weight: 500;
    }
  }

  .card-back {
    background: #fff;
    transform: rotateY(180deg);
  }

  .light-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle,
      rgba(255, 215, 0, 0.8) 0%,
      transparent 70%
    );
    opacity: 0;
    animation: flash 0.6s ease-out forwards;
    pointer-events: none;
  }

  /* 结果展示 */
  .result-container {
    width: 600rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lucky-card {
    width: 100%;
    height: 920rpx; /* Increased height */
    background: #fff;
    border-radius: 40rpx;
    overflow: hidden;
    margin-bottom: 40rpx;

    .card-header {
      height: 460rpx; /* Increased height */
      background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 30rpx 40rpx;
      box-sizing: border-box;
      color: #fff;

      .header-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 20rpx;

        .user-info-row {
          display: flex;
          align-items: center;

          .user-avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            border: 2rpx solid rgba(255, 255, 255, 0.8);
            margin-right: 16rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
          }

          .user-name {
            font-size: 26rpx;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
          }
        }

        .date-tag {
          background: rgba(255, 255, 255, 0.2);
          padding: 8rpx 20rpx;
          border-radius: 30rpx;
          font-size: 22rpx;
          color: #fff;
          letter-spacing: 1rpx;
        }
      }

      .header-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .header-label {
          font-size: 24rpx;
          margin-bottom: 8rpx;
          opacity: 0.9;
          letter-spacing: 2rpx;
        }

        .score-wrap {
          display: flex;
          align-items: baseline;
          line-height: 1;
          margin-bottom: 16rpx;

          .score {
            font-size: 140rpx; /* Bigger */
            font-weight: bold;
            text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
          }

          .percent {
            font-size: 40rpx;
            margin-left: 8rpx;
            font-weight: 500;
            opacity: 0.9;
          }
        }

        .lucky-word {
          font-size: 52rpx;
          font-weight: bold;
          letter-spacing: 6rpx;
          text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        }
      }

      .header-decor {
        position: absolute;
        bottom: 20rpx;
        font-size: 24rpx;
        opacity: 0.4;

        &.left-bottom {
          left: 40rpx;
        }
        &.right-bottom {
          right: 40rpx;
        }
      }
    }

    .card-body {
      padding: 40rpx 32rpx;

      .yi-ji-grid {
        display: flex;
        gap: 24rpx;
        margin-bottom: 32rpx;

        .grid-item {
          flex: 1;
          background: #fbfbfb;
          border-radius: 20rpx;
          padding: 24rpx;
          border: 2rpx solid #f5f5f5;

          .item-title {
            display: flex;
            align-items: center;
            margin-bottom: 12rpx;

            text {
              font-size: 24rpx;
              font-weight: bold;
              color: #333;
              margin-left: 8rpx;
            }
          }

          .item-content {
            font-size: 22rpx;
            color: #666;
            line-height: 1.4;
          }
        }
      }

      .lucky-elements {
        background: #fbfbfb;
        border-radius: 20rpx;
        padding: 24rpx;
        border: 2rpx solid #f5f5f5;
        margin-bottom: 32rpx;

        .elements-title {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          text {
            font-size: 26rpx;
            font-weight: bold;
            color: #333;
            margin-left: 8rpx;
          }
        }

        .elements-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .el-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;

            .label {
              font-size: 20rpx;
              color: #999;
              margin-bottom: 8rpx;
            }

            .value {
              font-size: 26rpx;
              color: #333;
              font-weight: 600;

              &.color-val {
                color: #d84315;
              }
            }
          }

          .divider {
            width: 2rpx;
            height: 40rpx;
            background: #eee;
          }
        }
      }

      .quote-text {
        text-align: center;
        font-size: 22rpx;
        color: #999;
        font-style: italic;
      }
    }
  }

  .bottom-actions {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 40rpx;
    box-sizing: border-box;

    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      line-height: 1.2;

      &::after {
        border: none;
      }

      :deep(.uni-icons) {
        width: 88rpx;
        height: 88rpx;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10rpx);
        border: 2rpx solid rgba(255, 255, 255, 0.2);
        margin-bottom: 12rpx;
        transition: all 0.3s;
      }

      &:active :deep(.uni-icons) {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(0.95);
      }

      .btn-label {
        font-size: 24rpx;
        color: #fff;
        opacity: 0.9;
      }
    }
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(40rpx) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(40rpx) rotate(-360deg);
  }
}

@keyframes flash {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.lucky-canvas {
  position: fixed;
  left: -9999px;
  top: 0;
}
</style>
