<script setup>
import { computed, nextTick, onMounted, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import TargetPicker from "@/components/TargetPicker.vue";
import { getPersonalTrainingAPI } from "@/apis";

const checkedIcon =
  "https://static.shelingxingqiu.com/shootmini/static/training-home/done.png";
const missedIcon =
  "https://static.shelingxingqiu.com/shootmini/static/training-home/missed.png";
// 后端训练项目 id 与难度页 mode 参数的映射关系。
const trainingModeRouteMap = {
  base: "basic",
  endurance: "endurance",
  precision: "precision",
  rhythm: "rhythm",
  strength: "power",
};
const unavailableTrainingIds = new Set(["rhythm", "strength"]);
// 训练项目卡片右侧主图标。
const trainingModeIconMap = {
  base_bow:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/img_3.png",
  bow: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_4.png",
  target:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/img_5.png",
  wave: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_6.png",
  muscle:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/img_6.png",
};
// 训练项目卡片标题图，按接口 id 映射 CDN 资源。
const trainingModeTitleImageMap = {
  base:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/jichuxunlian.png",
  endurance:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/nailixunlian.png",
  precision:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/jingzhunxunlian.png",
  rhythm:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/jiezouxunlian.png",
  strength:
    "https://static.shelingxingqiu.com/shootmini/static/training-home/liliangxulian.png",
};
const defaultWeekDays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const defaultRadarDimensions = [
  { name: "基础", score: 0 },
  { name: "精准", score: 0 },
  { name: "力量", score: 0 },
  { name: "节奏", score: 0 },
  { name: "耐力", score: 0 },
];
const radarDimensionTrainingIdMap = Object.freeze({
  基础: "base",
  精准: "precision",
  力量: "strength",
  节奏: "rhythm",
  耐力: "endurance",
});

// 页面始终直接消费接口字段，这里只保留一份兜底结构，避免模板访问空值。
const createDefaultTrainingData = () => ({
  week_days: defaultWeekDays.map((day) => ({ day, status: "cross" })),
  stats: {
    total_training_days: 0,
    total_arrows: 0,
    hit_rate: 0,
    endurance_shoot_speed: 0,
    total_calories: 0,
  },
  beat_percent: 0,
  radar_max: 0,
  radar: {
    dimensions: defaultRadarDimensions,
  },
  training_items: [],
});

const trainingData = ref(createDefaultTrainingData());
const recommendedTrainingId = ref("");
const visibleTrainingItems = computed(() =>
  Array.isArray(trainingData.value.training_items)
    ? trainingData.value.training_items
    : []
);
const pageMounted = ref(false);
const showRoutineTargetPicker = ref(false);
const trainingRadarCanvasId = "training-home-radar";
const radarImageWidth = 225;
const radarImageHeight = 224;
const radarFigureWidthRpx = 448;
const radarFigureHeightRpx = Math.round(
  (radarFigureWidthRpx * radarImageHeight) / radarImageWidth
);
const radarCanvasPixelRatio = Math.max(
  1,
  Number(uni.getDeviceInfo().pixelRatio) || 1
);
const radarTargetWidth = uni.upx2px(radarFigureWidthRpx);
const radarTargetHeight = uni.upx2px(radarFigureHeightRpx);
// 画布按设备像素比直接绘制，并让显示尺寸与物理像素严格对应，避免图片二次缩放。
const radarCanvasWidth = Math.round(radarTargetWidth * radarCanvasPixelRatio);
const radarCanvasHeight = Math.round(radarTargetHeight * radarCanvasPixelRatio);
const radarDisplayWidth = radarCanvasWidth / radarCanvasPixelRatio;
const radarDisplayHeight = radarCanvasHeight / radarCanvasPixelRatio;
const radarScaleX = radarCanvasWidth / radarImageWidth;
const radarScaleY = radarCanvasHeight / radarImageHeight;
const radarScale = Math.min(radarScaleX, radarScaleY);
const radarCenterX = 112.0624 * radarScaleX;
const radarCenterY = 111.4645 * radarScaleY;
const radarStrokeWidth = Math.max(1, 2 * radarScale);
const radarPointRadius = Math.max(2.5, 3.5 * radarScale);
const radarOuterRadiusX = 110.7089 * radarScaleX;
const radarOuterRadiusY = 110.7089 * radarScaleY;
const radarFigureStyle = {
  width: `${radarDisplayWidth}px`,
  height: `${radarDisplayHeight}px`,
};
let radarRenderGeneration = 0;

const formatValue = (value, digits = 1) => {
  const numberValue = Number(value);
  if (!Number.isFinite(numberValue)) return "--";
  return String(Number(numberValue.toFixed(digits)));
};

const getLevelText = (item) => {
  if (!item) return "";
  const level = Number(item.current_level) || 0;
  return `当前进度 LV${level} >`;
};

// 卡路里字段按需求做 K / W 缩写展示。
const getCaloriesValue = (value) => {
  const numberValue = Number(value);
  if (!Number.isFinite(numberValue)) return "--";
  if (numberValue >= 10000) return `${formatValue(numberValue / 10000)}W`;
  if (numberValue >= 1000) return `${formatValue(numberValue / 1000)}K`;
  return formatValue(numberValue, 0);
};

const getTrainingIcon = (item = {}) =>
  trainingModeIconMap[item.icon] || trainingModeIconMap.bow;

const getTrainingTitleImage = (item = {}) =>
  trainingModeTitleImageMap[item.id] || "";

const getTrainingMode = (item = {}) =>
  trainingModeRouteMap[item.id] || item.id || "";

const updateRecommendedTraining = () => {
  recommendedTrainingId.value = "";

  const radarMaxValue = Number(trainingData.value.radar_max);
  const dimensions = trainingData.value.radar?.dimensions;
  if (
    !Number.isFinite(radarMaxValue) ||
    radarMaxValue <= 0 ||
    !Array.isArray(dimensions) ||
    dimensions.length !== 5
  ) {
    return;
  }

  const visibleTrainingIds = visibleTrainingItems.value.map((item) => item.id);
  const candidates = dimensions.reduce((result, item) => {
    const trainingId = radarDimensionTrainingIdMap[item?.name];
    const rawScore = item?.score;
    if (
      unavailableTrainingIds.has(trainingId) ||
      !visibleTrainingIds.includes(trainingId) ||
      rawScore === undefined ||
      rawScore === null ||
      rawScore === ""
    ) {
      return result;
    }

    const score = Number(rawScore);
    if (!Number.isFinite(score) || score < 0) return result;

    result.push({ trainingId, score });
    return result;
  }, []);
  if (!candidates.length) return;

  const lowestScore = Math.min(...candidates.map((item) => item.score));
  const lowestCandidates = candidates.filter(
    (item) => item.score === lowestScore
  );
  const selectedIndex = Math.floor(Math.random() * lowestCandidates.length);   //暂时先不随机，默认使用第一个
  console.log(candidates, selectedIndex, lowestCandidates)
  recommendedTrainingId.value =
    lowestCandidates[0]?.trainingId || "";
};

const getRadarPoint = (centerX, centerY, radiusX, radiusY, angle) => ({
  x: centerX + radiusX * Math.cos(angle),
  y: centerY + radiusY * Math.sin(angle),
});

// 雷达图直接使用接口的 5 维 score，按后端 radar_max 等比映射到顶点位置。
const drawRadar = () => {
  const dimensions = Array.isArray(trainingData.value.radar?.dimensions)
    ? trainingData.value.radar.dimensions.slice(0, 5)
    : [];
  const radarMaxValue = Number(trainingData.value.radar_max);

  const ctx = uni.createCanvasContext(trainingRadarCanvasId);
  ctx.clearRect(0, 0, radarCanvasWidth, radarCanvasHeight);

  if (
    dimensions.length !== 5 ||
    !Number.isFinite(radarMaxValue) ||
    radarMaxValue <= 0
  ) {
    ctx.draw();
    return;
  }

  const angles = dimensions.map(
    (_, index) => (-90 + index * 72) * (Math.PI / 180)
  );

  const points = dimensions.map((item, index) => {
    const normalized = Math.max(
      0,
      Math.min(Number(item.score) || 0, radarMaxValue)
    );
    const progress = normalized / radarMaxValue;

    return getRadarPoint(
      radarCenterX,
      radarCenterY,
      radarOuterRadiusX * progress,
      radarOuterRadiusY * progress,
      angles[index]
    );
  });

  ctx.beginPath();
  points.forEach((point, index) => {
    if (index === 0) ctx.moveTo(point.x, point.y);
    else ctx.lineTo(point.x, point.y);
  });
  ctx.closePath();
  ctx.setFillStyle("rgba(255, 209, 154, 0.26)");
  ctx.fill();
  ctx.setStrokeStyle("rgba(220, 162, 92, 0.92)");
  ctx.setLineWidth(radarStrokeWidth);
  ctx.stroke();

  points.forEach((point) => {
    ctx.beginPath();
    ctx.arc(point.x, point.y, radarPointRadius, 0, 2 * Math.PI);
    ctx.setFillStyle("rgba(221, 162, 90, 1)");
    ctx.fill();
  });

  ctx.beginPath();
  ctx.arc(radarCenterX, radarCenterY, radarPointRadius, 0, 2 * Math.PI);
  ctx.setFillStyle("rgba(125, 107, 83, 0.65)");
  ctx.fill();
  ctx.draw();
};

// 小程序 Canvas 首次渲染时机不稳定，延后一帧再绘制更稳。
const refreshRadar = async () => {
  const generation = ++radarRenderGeneration;
  await nextTick();
  setTimeout(() => {
    if (generation === radarRenderGeneration) {
      drawRadar();
    }
  }, 30);
};

const loadPersonalTrainingData = async () => {
  try {
    const result = await getPersonalTrainingAPI();
    trainingData.value = {
      week_days:
        Array.isArray(result?.week_days) && result.week_days.length
          ? result.week_days
          : createDefaultTrainingData().week_days,
      stats: {
        total_training_days: result?.stats?.total_training_days ?? 0,
        total_arrows: result?.stats?.total_arrows ?? 0,
        hit_rate: result?.stats?.hit_rate ?? 0,
        endurance_shoot_speed: result?.stats?.endurance_shoot_speed ?? 0,
        total_calories: result?.stats?.total_calories ?? 0,
      },
      beat_percent: result?.beat_percent ?? 0,
      radar_max: result?.radar_max ?? 0,
      radar: {
        dimensions:
          Array.isArray(result?.radar?.dimensions) &&
          result.radar.dimensions.length === 5
            ? result.radar.dimensions
            : createDefaultTrainingData().radar.dimensions,
      },
      training_items: Array.isArray(result?.training_items)
        ? result.training_items
        : [],
    };
  } catch (error) {
    console.log("personal training load failed", error);
    trainingData.value = createDefaultTrainingData();
  } finally {
    updateRecommendedTraining();
    await refreshRadar();
  }
};

const openTrainingRecord = () => {
  uni.navigateTo({
    url: "/pages/my-growth?tab=2",
  });
};

const openTrainingItem = (item = {}) => {
  if (unavailableTrainingIds.has(item.id)) {
    uni.showToast({
      title: "功能开发中...",
      icon: "none",
    });
    return;
  }

  const mode = getTrainingMode(item);
  if (!mode) return;

  uni.navigateTo({
    url: `/pages/training/difficulty?mode=${mode}`,
  });
};

const openRoutineTraining = () => {
  showRoutineTargetPicker.value = true;
};

const handleRoutineTargetConfirm = (target) => {
  showRoutineTargetPicker.value = false;
  uni.navigateTo({
    url: `/pages/practise-one?target=${target}`,
  });
};

// 首次进入页面时拉取数据并完成雷达图初始化。
onMounted(async () => {
  await loadPersonalTrainingData();
  pageMounted.value = true;
});

// 从其他页面返回时刷新训练数据，保持进度与推荐状态最新。
onShow(async () => {
  if (!pageMounted.value) return;
  await loadPersonalTrainingData();
});
</script>

<template>
  <Container
    :showBackToGame="true"
    :bgType="7"
    bgColor="#050b19"
    :usePageScroll="true"
  >
    <view class="training-home">
      <view class="week-grid">
        <view
          v-for="item in trainingData.week_days"
          :key="item.day"
          class="week-item"
        >
          <view class="week-item-bg"></view>
          <image
            class="week-item-icon"
            :src="item.status === 'checked' ? checkedIcon : missedIcon"
            mode="widthFix"
          />
          <text
            class="week-item-label"
            :class="{ 'week-item-label-active': item.status === 'checked' }"
          >
            {{ item.day }}
          </text>
        </view>
      </view>

      <view class="stats-card">
        <view class="stats-card-bg"></view>
        <image
          class="stats-quote stats-quote-left"
          src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_17.png"
          mode="widthFix"
        />
        <image
          class="stats-quote stats-quote-right"
          src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_16.png"
          mode="widthFix"
        />
        <view class="stats-grid">
          <view class="stats-item">
            <view class="stats-value-row">
              <view class="stats-value-group">
                <text class="stats-value">
                  {{ formatValue(trainingData.stats.total_training_days, 0) }}
                </text>
                <text class="stats-unit">天</text>
                <view class="stats-value-decoration"></view>
              </view>
            </view>
            <text class="stats-label">共训练</text>
          </view>

          <view class="stats-item">
            <view class="stats-value-row">
              <view class="stats-value-group">
                <text class="stats-value">
                  {{ formatValue(trainingData.stats.total_arrows, 0) }}
                </text>
                <text class="stats-unit">支</text>
                <view class="stats-value-decoration"></view>
              </view>
            </view>
            <text class="stats-label">累计射箭</text>
          </view>

          <view class="stats-item">
            <view class="stats-value-row">
              <view class="stats-value-group">
                <text class="stats-value">
                  {{ formatValue(trainingData.stats.hit_rate) }}
                </text>
                <text class="stats-unit">%</text>
                <view class="stats-value-decoration"></view>
              </view>
            </view>
            <text class="stats-label">命中率</text>
          </view>

          <view class="stats-item">
            <view class="stats-value-row">
              <view class="stats-value-group">
                <text class="stats-value">
                  {{ formatValue(trainingData.stats.endurance_shoot_speed, 0) }}
                </text>
                <text class="stats-unit">支/分钟</text>
                <view class="stats-value-decoration"></view>
              </view>
            </view>
            <text class="stats-label">耐力射击</text>
          </view>

          <view class="stats-item">
            <view class="stats-value-row">
              <view class="stats-value-group">
                <text class="stats-value">
                  {{ getCaloriesValue(trainingData.stats.total_calories) }}
                </text>
                <text class="stats-unit">卡路里</text>
                <view class="stats-value-decoration"></view>
              </view>
            </view>
            <text class="stats-label">共消耗</text>
          </view>
        </view>
      </view>

      <view class="radar-section">
        <view class="record-bubble" @click="$clickSound(openTrainingRecord)">
          <image
            class="record-bubble-bg"
            src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_28.png"
            mode="widthFix"
          />
          <view class="record-bubble-copy">
            <view class="record-main">
              已超越<text class="record-main-highlight">{{ formatValue(trainingData.beat_percent) }}%</text>对手
            </view>
            <view class="record-sub-row">
              <text class="record-sub-text">我的训练记录</text>
              <image
                class="record-arrow"
                src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_7.png"
                mode="widthFix"
              />
            </view>
          </view>
        </view>

        <view class="radar-board">
          <text class="radar-label radar-label-top">
            {{ trainingData.radar.dimensions[0].name }}
          </text>
          <text class="radar-label radar-label-right">
            {{ trainingData.radar.dimensions[1].name }}
          </text>
          <text class="radar-label radar-label-bottom-right">
            {{ trainingData.radar.dimensions[2].name }}
          </text>
          <text class="radar-label radar-label-bottom-left">
            {{ trainingData.radar.dimensions[3].name }}
          </text>
          <text class="radar-label radar-label-left">
            {{ trainingData.radar.dimensions[4].name }}
          </text>

          <view class="radar-figure" :style="radarFigureStyle">
            <image
              class="radar-grid-image"
              :style="radarFigureStyle"
              src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_19.png"
            />
            <canvas
              :canvas-id="trainingRadarCanvasId"
              :id="trainingRadarCanvasId"
              class="radar-canvas"
              :style="radarFigureStyle"
              :width="radarCanvasWidth"
              :height="radarCanvasHeight"
            />
            <image
              class="radar-mascot"
              src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_21.png"
              mode="widthFix"
            />
          </view>
        </view>
      </view>

      <view class="featured-card" @click="$clickSound(openRoutineTraining)">
        <image
          class="featured-card-bg"
          src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_22.png"
          mode="widthFix"
        />
        <view class="featured-card-mask"></view>
        <view class="featured-card-copy">
          <text class="featured-card-subtitle">12箭练习</text>
        </view>
      </view>

      <view class="mode-grid">
        <view
          v-for="item in visibleTrainingItems"
          :key="item.id"
          class="mode-card"
          @click="$clickSound(() => openTrainingItem(item))"
        >
          <view v-if="item.id === recommendedTrainingId" class="mode-tag">
            推荐
          </view>
          <view class="mode-card-copy">
            <image
              v-if="getTrainingTitleImage(item)"
              class="mode-card-title-image"
              :src="getTrainingTitleImage(item)"
              mode="widthFix"
            />
            <text v-else class="mode-card-title">{{ item.name }}</text>
            <text class="mode-card-progress">{{ getLevelText(item) }}</text>
          </view>
          <image
            class="mode-card-icon"
            :src="getTrainingIcon(item)"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>
    <TargetPicker
      :show="showRoutineTargetPicker"
      :clickSound="true"
      :onClose="() => (showRoutineTargetPicker = false)"
      :onConfirm="handleRoutineTargetConfirm"
    />
  </Container>
</template>

<style scoped>
.training-home {
  position: relative;
  overflow: hidden;
  padding: 18rpx 20rpx 60rpx 20rpx;
}

.week-grid {
  display: flex;
  justify-content: space-between;
  margin-top: 18rpx;
}

.week-item {
  position: relative;
  width: 92rpx;
  height: 96rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.week-item-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
  opacity: 0.5;
}

.week-item-icon {
  position: absolute;
  left: 28rpx;
  top: 14rpx;
  width: 36rpx;
}

.week-item-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10rpx;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20rpx;
  text-align: center;
  line-height: 28rpx;
}

.week-item-label-active {
  color: #e7ba80;
}

.stats-card {
  position: relative;
  margin-top: 32rpx;
  width: 100%;
  height: 124rpx;
  overflow: hidden;
  border-radius: 24rpx;
}

.stats-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
  opacity: 0.5;
}

.stats-quote {
  position: absolute;
  z-index: 1;
  width: 53rpx;
  height: 50rpx;
}

.stats-quote-left {
  left: 4rpx;
  top: 4rpx;
}

.stats-quote-right {
  right: 4rpx;
  bottom: 4rpx;
}

.stats-grid {
  position: absolute;
  z-index: 1;
  left: 36rpx;
  right: 36rpx;
  top: 22rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.stats-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats-value-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 48rpx;
  line-height: 48rpx;
}

.stats-value-group {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 72rpx;
  white-space: nowrap;
}

.stats-value-decoration {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6rpx;
  min-width: 72rpx;
  height: 12rpx;
  border-radius: 6rpx;
  background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
  opacity: 0.5;
}

.stats-value {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 34rpx;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 46rpx;
}

.stats-unit {
  position: relative;
  z-index: 1;
  margin-left: 4rpx;
  padding-bottom: 8rpx;
  color: #fff;
  font-size: 20rpx;
  line-height: 28rpx;
  opacity: 0.6;
}

.stats-label {
  display: inline-block;
  margin-top: 6rpx;
  color: #fcce96;
  font-size: 20rpx;
  line-height: 28rpx;
  opacity: 0.6;
}

.radar-section {
  position: relative;
  padding-top: 34rpx;
}

.record-bubble {
  position: absolute;
  right: 0;
  top: 10rpx;
  width: 202rpx;
  height: 122rpx;
  z-index: 3;
}

.record-bubble-bg {
  width: 202rpx;
}

.record-bubble-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 24rpx;
  text-align: center;
}

.record-main {
  color: #fff;
  font-size: 24rpx;
  line-height: 30rpx;
}

.record-main-highlight {
  color: #e7ba80;
}

.record-sub-row {
  margin-top: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-sub-text {
  color: #ffd947;
  font-size: 24rpx;
  height: 30rpx;
  line-height: 30rpx;
}

.record-arrow {
  width: 24rpx;
}

.radar-board {
  position: relative;
  width: 100%;
  height: 514rpx;
}

.radar-label {
  position: absolute;
  color: rgba(255, 255, 255, 0.78);
  font-size: 28rpx;
  line-height: 40rpx;
}

.radar-label-top {
  left: 350rpx;
  top: 14rpx;
  transform: translateX(-50%);
  opacity: 0.5;
}

.radar-label-right {
  right: 77rpx;
  top: 190rpx;
  opacity: 0.5;
}

.radar-label-bottom-right {
  right: 170rpx;
  bottom: 18rpx;
  opacity: 0.5;
}

.radar-label-bottom-left {
  left: 170rpx;
  bottom: 18rpx;
  opacity: 0.5;
}

.radar-label-left {
  left: 75rpx;
  top: 180rpx;
  opacity: 0.5;
}

.radar-figure {
  position: relative;
  top: 54rpx;
  margin: 0 auto;
  overflow: visible;
}

.radar-grid-image,
.radar-canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.radar-mascot {
  position: absolute;
  right: 38rpx;
  top: 0;
  width: 92rpx;
}

.featured-card {
  position: relative;
  width: 100%;
  height: 150rpx;
  margin-top: 70rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.featured-card-bg {
  width: 100%;
}

.featured-card-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 278rpx;
  height: 150rpx;
}

.featured-card-copy {
  position: absolute;
  left: 174rpx;
  top: 58rpx;
  display: flex;
  flex-direction: column;
}

.featured-card-title {
  display: block;
  color: #895409;
  font-size: 34rpx;
  font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
  font-weight: 700;
  line-height: 42rpx;
}

.featured-card-subtitle {
  display: block;
  margin-top: 10rpx;
  color: #895409;
  font-size: 22rpx;
  line-height: 32rpx;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16rpx 18rpx;
  margin-top: 16rpx;
}

.mode-card {
  position: relative;
  height: 150rpx;
  box-shadow: inset 2rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.27);
  border-radius: 16rpx;
  border: 2rpx solid rgba(235, 184, 123, 0.5);
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.mode-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 72rpx;
  height: 34rpx;
  line-height: 34rpx;
  text-align: center;
  font-size: 20rpx;
  color: #000;
  border-bottom-right-radius: 16rpx;
  background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
}

.mode-card-copy {
  position: absolute;
  left: 30rpx;
  top: 40rpx;
}

.mode-card-title {
  display: block;
  background-image: linear-gradient(
    133deg,
    rgba(235, 184, 123, 0.8) 0%,
    rgba(181, 140, 78, 0.8) 100%
  );
  color: #e7ba80;
  font-size: 32rpx;
  font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
  font-weight: 700;
  line-height: 38rpx;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mode-card-title-image {
  display: block;
  width: 128rpx;
}

.mode-card-progress {
  display: block;
  margin-top: 14rpx;
  color: #fcce96;
  font-size: 22rpx;
  line-height: 32rpx;
  opacity: 0.5;
}

.mode-card-icon {
  position: absolute;
  right: 12rpx;
  top: 14rpx;
  width: 124rpx;
  height: 124rpx;
}
</style>
