/* ============================================================
 * v4-upgrade.css —— 视觉重构 v4
 * ============================================================
 * 改造范围：
 *   1. 结算页场景背景 + 戏剧化奖励卡片
 *   2. 功能页（擂台/宗门/街市/排行/弟子档）场景背景注入
 *   3. 导航图标从 emoji 升级为书法体单字
 *   4. 页面标题视觉增强
 * ============================================================ */

/* ============ 1. 结算页视觉升级 ============ */

/* 结算页场景背景 */
.settle-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.55) saturate(0.85);
  pointer-events: none;
}
.settle-bg-grad {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(18,27,29,0.72) 0%,
    rgba(18,27,29,0.55) 40%,
    rgba(18,27,29,0.82) 100%);
  pointer-events: none;
}

/* 结算内容容器上浮 */
.settle {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 20px 40px;
}

/* 符文点亮 — 更大更亮 */
.settle-runes { gap: 8px; max-width: 380px; }
.srune {
  width: 18px; height: 18px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.srune[data-lit="1"] {
  box-shadow: 0 0 12px var(--lingguang-glow), 0 0 0 1px rgba(216,242,78,0.3);
}

/* 结算标题 — 更大更戏剧 */
.settle-cap {
  font-size: 24px;
  letter-spacing: .14em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* 数值卡片 — 玻璃态 */
.settle-nums {
  gap: 36px;
  padding: 18px 24px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
}
.snum .v { font-size: 32px; text-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.snum .k { font-size: 12px; opacity: 0.85; }

/* 器灵对话 — 玻璃态 */
.settle-spirit {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
}

/* 灵石/掉落 — 发光药丸 */
.loot {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.loot[data-kind="artifact"] {
  border-color: var(--gilt);
  box-shadow: 0 0 16px rgba(198,151,47,0.25);
}

/* 破境 — 戏剧化大卡片 */
.ascend {
  max-width: 400px;
  padding: 28px 24px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--gilt);
  box-shadow:
    0 0 32px rgba(198,151,47,0.3),
    0 8px 32px rgba(0,0,0,0.2);
}
.ascend .cap { font-size: 28px; }

/* 结算按钮 — 更突出 */
.settle-actions { margin-top: 32px; gap: 14px; }
.settle-actions .btn { font-size: 15px; padding: 12px 28px; }

/* ============ 2. 功能页场景背景通用 ============ */
.page-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.5) saturate(0.8);
  pointer-events: none;
}
.page-scene-grad {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(18,27,29,0.7) 0%,
    rgba(18,27,29,0.5) 40%,
    rgba(18,27,29,0.85) 100%);
  pointer-events: none;
}

/* 让功能页内容浮在背景之上 */
.page-pk > *:not(.page-scene-bg):not(.page-scene-grad),
.page-sect > *:not(.page-scene-bg):not(.page-scene-grad),
.page-shop > *:not(.page-scene-bg):not(.page-scene-grad),
.page-ranking > *:not(.page-scene-bg):not(.page-scene-grad),
.page-profile > *:not(.page-scene-bg):not(.page-scene-grad) {
  position: relative;
  z-index: 1;
}

/* ============ 3. 页面标题增强 ============ */
.page-title {
  font-family: var(--font-sutra);
  font-size: 22px;
  letter-spacing: .16em;
  color: var(--ornament, var(--gilt));
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ============ 4. 导航图标升级 — 书法体单字 ============ */
/* 底部导航栏图标 */
.v4-nav-icon {
  font-family: var(--font-sutra);
  font-size: 20px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: color .15s, transform .15s;
}
.nav-btn-active .v4-nav-icon {
  color: var(--accent);
  transform: scale(1.1);
}

/* 侧栏图标 */
.v4-side-icon {
  font-family: var(--font-sutra);
  font-size: 18px;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: color .15s;
}
.v4-side-active .v4-side-icon { color: var(--accent); }

/* ============ 5. 导航图标字体覆盖 ============ */
.game-nav-icon {
  font-family: var(--font-sutra) !important;
  font-size: 20px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.game-side-btn > span:first-child {
  font-family: var(--font-sutra) !important;
  font-size: 18px !important;
}
.logo-title {
  font-family: var(--font-sutra) !important;
  letter-spacing: .12em;
}

/* ============ 6. 移动端适配 ============ */
@media (max-width: 768px) {
  .settle { padding: 24px 16px 32px; }
  .settle-nums { gap: 24px; padding: 14px 16px; }
  .snum .v { font-size: 26px; }
  .ascend { padding: 22px 16px; }
  .ascend .cap { font-size: 24px; }
  .v4-nav-icon { font-size: 18px; }
}

@media (max-width: 480px) {
  .settle-cap { font-size: 20px; }
  .settle-nums { flex-direction: row; gap: 18px; }
  .snum .v { font-size: 22px; }
  .loot { font-size: 13px; padding: 6px 12px; }
}

/* ============ 7. 中景 SVG 剪影（2d-upgrade-spec §B.2 P2） ============ */
/* 装饰性中景层：在背景图与内容之间，极低 opacity，静止不旋转。
   通过 body[data-scene] 属性匹配当前秘境场景。 */

body[data-scene]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60vw auto;
  opacity: 0.08;
  max-width: 600px;
  margin: 0 auto;
}

/* 言灵脉 — 飘带剪影：3 条卷曲曲线 */
body[data-scene="yanling"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cpath d='M40,420 Q120,280 60,140 T180,30' stroke='%23C0CBCC' stroke-width='2' fill='none'/%3E%3Cpath d='M100,440 Q180,300 120,160 T240,50' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Cpath d='M160,460 Q240,320 180,180 T300,70' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

/* 衡律脉 — 刻度盘剪影：竖轴 + 刻度线 */
body[data-scene="henglu"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cline x1='150' y1='40' x2='150' y2='460' stroke='%23C0CBCC' stroke-width='1'/%3E%3Cline x1='125' y1='80' x2='175' y2='80' stroke='%23C0CBCC' stroke-width='2'/%3E%3Cline x1='135' y1='140' x2='165' y2='140' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cline x1='125' y1='200' x2='175' y2='200' stroke='%23C0CBCC' stroke-width='2'/%3E%3Cline x1='135' y1='260' x2='165' y2='260' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cline x1='125' y1='320' x2='175' y2='320' stroke='%23C0CBCC' stroke-width='2'/%3E%3Cline x1='135' y1='380' x2='165' y2='380' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cline x1='125' y1='440' x2='175' y2='440' stroke='%23C0CBCC' stroke-width='2'/%3E%3C/svg%3E");
}

/* 机关脉 — 齿轮枢轴剪影：双齿轮 + 连杆 */
body[data-scene="jiguan"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Ccircle cx='150' cy='180' r='70' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='150' cy='180' r='45' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Ccircle cx='150' cy='180' r='12' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='200' cy='340' r='50' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='200' cy='340' r='30' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Cline x1='150' y1='250' x2='200' y2='290' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* 丹道脉 — 丹炉烟雾剪影：炉身 + 上升气纹 */
body[data-scene="dandao"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cpath d='M110,280 L190,280 L210,360 L90,360 Z' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Cpath d='M110,280 Q150,250 190,280' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Cline x1='100' y1='360' x2='100' y2='390' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cline x1='150' y1='360' x2='150' y2='390' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cline x1='200' y1='360' x2='200' y2='390' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cpath d='M150,250 Q130,180 150,120 Q170,70 150,30' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Cpath d='M130,240 Q120,190 130,140' stroke='%23C0CBCC' stroke-width='0.8' fill='none'/%3E%3C/svg%3E");
}

/* 岁月脉 — 年轮枝剪影：水平轴 + 双同心环 */
body[data-scene="suiyue"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cline x1='40' y1='250' x2='260' y2='250' stroke='%23C0CBCC' stroke-width='1'/%3E%3Ccircle cx='110' cy='250' r='30' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='110' cy='250' r='18' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Ccircle cx='200' cy='250' r='45' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='200' cy='250' r='28' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Ccircle cx='40' cy='250' r='3' fill='%23C0CBCC'/%3E%3Ccircle cx='260' cy='250' r='3' fill='%23C0CBCC'/%3E%3C/svg%3E");
}

/* 文心脉 — 玉简剪影：竖长玉牌轮廓 */
body[data-scene="dianjing"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cpath d='M110,80 L190,80 L210,110 L210,420 L90,420 L90,110 Z' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Cline x1='110' y1='160' x2='190' y2='160' stroke='%23C0CBCC' stroke-width='1'/%3E%3Cline x1='110' y1='220' x2='190' y2='220' stroke='%23C0CBCC' stroke-width='1'/%3E%3Cline x1='110' y1='280' x2='190' y2='280' stroke='%23C0CBCC' stroke-width='1'/%3E%3Cline x1='110' y1='340' x2='190' y2='340' stroke='%23C0CBCC' stroke-width='1'/%3E%3C/svg%3E");
}

/* 山河脉 — 社稷印剪影：圆印 + 等高线 */
body[data-scene="shanhe"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Ccircle cx='150' cy='250' r='90' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='150' cy='250' r='65' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Ccircle cx='150' cy='250' r='40' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Ccircle cx='150' cy='250' r='15' stroke='%23C0CBCC' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* 百草脉 — 灵草剪影：对称叶形 + 主脉 */
body[data-scene="baicao"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cline x1='150' y1='440' x2='150' y2='60' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cpath d='M150,320 Q90,280 100,220 Q130,200 150,260' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Cpath d='M150,320 Q210,280 200,220 Q170,200 150,260' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Cpath d='M150,200 Q100,170 110,120 Q135,105 150,150' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3Cpath d='M150,200 Q200,170 190,120 Q165,105 150,150' stroke='%23C0CBCC' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

/* 戒律脉 — 戒律环剪影：圆环 + 天平 */
body[data-scene="jielu"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Cpath d='M150,160 A90,90 0 1,1 149.9,160' stroke='%23C0CBCC' stroke-width='1.5' fill='none' stroke-dasharray='5 3'/%3E%3Cline x1='70' y1='280' x2='230' y2='280' stroke='%23C0CBCC' stroke-width='1.5'/%3E%3Cline x1='150' y1='280' x2='150' y2='380' stroke='%23C0CBCC' stroke-width='1'/%3E%3Ccircle cx='70' cy='280' r='4' fill='%23C0CBCC'/%3E%3Ccircle cx='230' cy='280' r='4' fill='%23C0CBCC'/%3E%3C/svg%3E");
}