/* 手机端 2.0 — 各页纹样背景（暖色系，非纯白） */

body.app-v2 {
  --v2-pattern-gold: rgba(184, 146, 46, 0.14);
  --v2-pattern-wine: rgba(158, 58, 74, 0.08);
  --v2-pattern-forest: rgba(61, 92, 72, 0.08);
}

/* 首页底纹：铁路线 + 淡 damask */
body.app-v2 #screen-home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-color: #f3ebe0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b8922e' stroke-width='0.4' opacity='0.22'%3E%3Cpath d='M0 60h120M60 0v120'/%3E%3Ccircle cx='60' cy='60' r='18'/%3E%3Cpath d='M18 60c12-10 24-10 42 0s30 10 42 0'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(158, 58, 74, 0.06) 0%, transparent 60%);
  background-size: 120px 120px, 100% 100%;
}

body.app-v2 #screen-home > * {
  position: relative;
  z-index: 1;
}

/* 各页底色 + 纹样（PNG 之上、veil 之下） */
body.app-v2 .page-bg {
  filter: saturate(1.08) contrast(1.04) brightness(1.01);
}

body.app-v2 .page-bg--intro {
  background-color: #ede4d2;
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5c8 12 8 22 0 34s-8 22 0 34 8 22 0 34' fill='none' stroke='%23b8922e' stroke-width='0.35' opacity='0.2'/%3E%3Cpath d='M5 50c12 8 22 8 34 0s22-8 34 0 22 8 34 0' fill='none' stroke='%23b8922e' stroke-width='0.35' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 45% at 20% 15%, rgba(243, 230, 200, 0.9) 0%, transparent 55%),
    url('../images/v2/bg-page-intro.png');
  background-size: 100px 100px, 100% 100%, cover;
}

body.app-v2 .page-bg--relations {
  background-color: #ebe2d4;
  background-image:
    url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b8922e' stroke-width='0.38' opacity='0.24'%3E%3Ccircle cx='32' cy='48' r='2.5' fill='%23b8922e' fill-opacity='0.18' stroke='none'/%3E%3Ccircle cx='80' cy='32' r='2.5' fill='%23b8922e' fill-opacity='0.18' stroke='none'/%3E%3Ccircle cx='128' cy='48' r='2.5' fill='%23b8922e' fill-opacity='0.18' stroke='none'/%3E%3Ccircle cx='56' cy='96' r='2' fill='%23b8922e' fill-opacity='0.14' stroke='none'/%3E%3Ccircle cx='104' cy='96' r='2' fill='%23b8922e' fill-opacity='0.14' stroke='none'/%3E%3Ccircle cx='80' cy='128' r='2' fill='%23b8922e' fill-opacity='0.14' stroke='none'/%3E%3Cpath d='M32 48 L80 32 L128 48'/%3E%3Cpath d='M32 48 L56 96 L80 128 L104 96 L128 48'/%3E%3Cpath d='M56 96 L104 96'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.42' opacity='0.22'%3E%3Cpath d='M80 4v16'/%3E%3Ccircle cx='80' cy='4' r='2.5'/%3E%3Cpath d='M64 20 Q80 28 96 20'/%3E%3Cpath d='M80 20 L68 34 M80 20 L92 34'/%3E%3Cpath d='M68 34 L76 42 M92 34 L84 42'/%3E%3C/g%3E%3Cpath d='M80 72l2.5 7.5h7.5l-6 4.5 2.5 7.5-6-4.5-6 4.5 2.5-7.5-6-4.5h7.5z' fill='none' stroke='%23c9a84c' stroke-width='0.32' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(243, 230, 200, 0.62) 0%, transparent 58%),
    radial-gradient(ellipse 55% 38% at 92% 18%, rgba(158, 58, 74, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 48% 32% at 8% 78%, rgba(184, 146, 46, 0.12) 0%, transparent 50%),
    url('../images/v2/bg-page-relations.png');
  background-size: 140px 140px, 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: center, center top, center, center, center top;
}

body.app-v2 .page-bg--relations::after {
  opacity: 0.2;
}

body.app-v2 .page-bg--timeline {
  background-color: #e8ece6;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%239e3a4a' stroke-width='0.5' opacity='0.12'/%3E%3Cpath d='M0 15h60M0 45h60' stroke='%233d5c48' stroke-width='0.35' opacity='0.1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(232, 240, 234, 0.85) 0%, rgba(247, 243, 238, 0.5) 100%),
    url('../images/v2/bg-page-timeline.png');
  background-size: 60px 60px, 100% 100%, cover;
}

body.app-v2 .page-bg--themes {
  background-color: #f2ebe4;
  background-image:
    url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='45' cy='45' r='1.5' fill='%23b8922e' opacity='0.25'/%3E%3Cpath d='M45 8l3 9h9l-7 6 3 9-8-6-8 6 3-9-7-6h9z' fill='none' stroke='%23b8922e' stroke-width='0.3' opacity='0.15'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 30%, rgba(184, 146, 46, 0.12) 0%, transparent 45%),
    url('../images/v2/bg-page-themes.png');
  background-size: 90px 90px, 100% 100%, cover;
}

body.app-v2 .page-bg--dialogue {
  background-color: #f4ece8;
  background-image:
    url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 35c20-8 34-8 54 0M8 20c20 6 34 6 54 0M8 50c20-6 34-6 54 0' fill='none' stroke='%23b8922e' stroke-width='0.35' opacity='0.14'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 50% 35% at 10% 80%, rgba(158, 58, 74, 0.08) 0%, transparent 55%),
    url('../images/v2/bg-page-dialogue.png');
  background-size: 70px 70px, 100% 100%, cover;
}

/* 轻 veil：保留底色与纹样，不再洗成白 */
body.app-v2 .page-bg-veil {
  background:
    radial-gradient(ellipse 90% 35% at 50% 0%, rgba(255, 252, 248, 0.35) 0%, transparent 65%),
    linear-gradient(180deg, rgba(247, 243, 238, 0.18) 0%, rgba(250, 246, 240, 0.32) 100%);
}

body.app-v2 .page-bg-veil--intro {
  background:
    radial-gradient(ellipse 80% 40% at 30% 10%, rgba(243, 230, 200, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, rgba(237, 228, 210, 0.22) 0%, rgba(247, 243, 238, 0.38) 100%);
}

body.app-v2 .page-bg-veil--relations {
  background:
    radial-gradient(ellipse 75% 50% at 50% 0%, rgba(255, 252, 248, 0.2) 0%, transparent 62%),
    radial-gradient(ellipse 55% 40% at 85% 20%, rgba(243, 220, 210, 0.14) 0%, transparent 52%),
    linear-gradient(180deg, rgba(240, 232, 220, 0.06) 0%, rgba(247, 243, 238, 0.16) 100%);
}

body.app-v2 .page-bg-veil--timeline,
body.app-v2 .page-bg-veil--chat {
  background:
    radial-gradient(ellipse 75% 40% at 50% 0%, rgba(220, 232, 224, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, rgba(232, 236, 230, 0.2) 0%, rgba(247, 243, 238, 0.34) 100%);
}

body.app-v2 .page-bg-veil--themes {
  background:
    radial-gradient(ellipse 65% 40% at 50% 20%, rgba(243, 230, 200, 0.32) 0%, transparent 50%),
    linear-gradient(180deg, rgba(242, 235, 228, 0.2) 0%, rgba(247, 243, 238, 0.35) 100%);
}

body.app-v2 .page-bg-veil--dialogue {
  background:
    radial-gradient(ellipse 60% 35% at 20% 70%, rgba(244, 228, 224, 0.35) 0%, transparent 50%),
    linear-gradient(180deg, rgba(244, 236, 232, 0.2) 0%, rgba(247, 243, 238, 0.34) 100%);
}

body.app-v2 .page-bg::after {
  opacity: 0.12;
}