/* ============================================================
   v25：画质增强补丁
   目标：让整体 UI 更精致 —— 多层柔和阴影、内高光、品质配色、
        按钮立体感、卡片质感。不改动任何布局与类名，纯视觉增强。
   ============================================================ */

/* ---------- 1. 配色与阴影升级 ---------- */
:root {
  /* 阴影：三层递进，比原来单层更立体、更柔和 */
  --shadow: 0 1px 2px rgba(60, 90, 70, .06), 0 4px 12px rgba(60, 90, 70, .10), 0 12px 28px rgba(60, 90, 70, .07);
  --shadow-sm: 0 1px 2px rgba(60, 90, 70, .07), 0 3px 8px rgba(60, 90, 70, .07);
  --shadow-lg: 0 2px 6px rgba(60, 90, 70, .09), 0 10px 24px rgba(60, 90, 70, .12), 0 24px 56px rgba(60, 90, 70, .10);

  /* 品质配色（凡 灵 宝 仙 神） */
  --q-fan: #9aa5a0;
  --q-ling: #4e9e73;
  --q-bao: #4f8fc0;
  --q-xian: #8a5fd0;
  --q-shen: #d9a13c;

  /* 内高光：卡片边缘的一道亮边，制造玻璃/瓷质感 */
  --gloss: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(0, 0, 0, .03);
}

/* ---------- 2. 背景：更通透的纵深 ---------- */
body {
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle at 15% 20%, rgba(127, 201, 154, .16) 0%, rgba(127, 201, 154, 0) 45%),
    radial-gradient(circle at 85% 65%, rgba(217, 178, 106, .14) 0%, rgba(217, 178, 106, 0) 45%),
    linear-gradient(170deg, #f2faf4 0%, #dcefe2 55%, #cfe3d6 100%);
  background-attachment: fixed;
}

/* ---------- 3. 面板：瓷面质感 ---------- */
.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(250, 253, 250, .92));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow), var(--gloss);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- 4. 按钮：立体 + 高光 ---------- */
.btn, .btn-fight, .btn.big {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #7fc99a, #4e9e73);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
    0 2px 6px rgba(63, 143, 107, .32),
    0 6px 14px rgba(63, 143, 107, .18);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  letter-spacing: .3px;
}
.btn:active, .btn-fight:active, .btn.big:active {
  transform: scale(.97);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 3px rgba(63, 143, 107, .3);
}
.btn.ghost {
  background: linear-gradient(180deg, #fff, #f6fbf7);
  box-shadow: var(--shadow-sm), var(--gloss);
  text-shadow: none;
}

.btn-mini {
  background: linear-gradient(180deg, #fffdf6, #fdf3dd);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .9);
  font-weight: 600;
}

/* ---------- 5. 标签 / chip ---------- */
.tag {
  box-shadow: 0 2px 6px rgba(63, 143, 107, .28), inset 0 1px 0 rgba(255, 255, 255, .4);
  letter-spacing: .5px;
}
.chip {
  box-shadow: var(--shadow-sm);
  transition: background .16s, color .16s, box-shadow .16s;
}
.chip.on {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #7fc99a, #4e9e73);
  box-shadow: 0 2px 6px rgba(63, 143, 107, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ---------- 6. 卡片：装备 / 道具 / 灵宠 / 商城 ---------- */
.item-card, .pet-card, .shop-card, .stage-item, .equip-card, .gear-card {
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.item-card:active, .pet-card:active, .shop-card:active, .gear-card:active {
  transform: scale(.985);
  box-shadow: var(--shadow-sm);
}

/* ---------- 7. 品质配色：边框 + 名称着色 ---------- */
.q-凡品, .q-fan { --qc: var(--q-fan); }
.q-灵品, .q-ling { --qc: var(--q-ling); }
.q-宝品, .q-bao { --qc: var(--q-bao); }
.q-仙品, .q-xian { --qc: var(--q-xian); }
.q-神品, .q-shen { --qc: var(--q-shen); }

/* 装备名按品质着色（前端会带 data-q 属性） */
[data-q] { color: var(--qc, inherit); }
[data-q="凡品"] { --qc: var(--q-fan); }
[data-q="灵品"] { --qc: var(--q-ling); }
[data-q="宝品"] { --qc: var(--q-bao); }
[data-q="仙品"] { --qc: var(--q-xian); }
[data-q="神品"] { --qc: var(--q-shen); }

/* 品质徽章 */
.q-badge {
  display: inline-block; font-size: 10px; font-weight: 700; color: #fff;
  padding: 1px 6px; border-radius: 7px; margin-right: 4px;
  background: var(--qc, var(--q-fan));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ---------- 8. 统计块：更精致 ---------- */
.stat {
  background: linear-gradient(180deg, #fff, #fafdfb);
  box-shadow: var(--shadow-sm), var(--gloss);
  border-color: rgba(201, 176, 126, .38);
}
.stat b { text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

/* ---------- 9. 顶部 HUD：玻璃感 ---------- */
.hud {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 251, 247, .88));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- 10. 底部导航：浮起感 ---------- */
.tabbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(250, 253, 250, .93));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .9) inset, 0 -4px 16px rgba(60, 90, 70, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- 11. 数字：等宽对齐更整齐 ---------- */
.hud-power b, .stat b, .res, .stage-sub b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- 12. 图片 / SVG 渲染更平滑 ---------- */
svg { shape-rendering: geometricPrecision; }
svg text { text-rendering: optimizeLegibility; }

/* ---------- 13. 滚动条（桌面）细化 ---------- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb {
  background: rgba(127, 201, 154, .5); border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(127, 201, 154, .72); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 14. 减弱动效：保留画质但去掉过渡 ---------- */
@media (prefers-reduced-motion: reduce) {
  .chip, .item-card, .pet-card, .shop-card, .gear-card { transition: none; }
  .btn:active, .btn-fight:active, .btn.big:active { transform: none; }
}