\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0<\/title>\n<meta name=\"description\" content=\"\u7acb\u590f\u8282\u6c14\u4e3b\u9898\u9875\u9762\u2014\u2014\u8282\u6c14\u4ecb\u7ecd\u3001\u4f20\u7edf\u4e60\u4fd7\u3001\u517b\u751f\u6307\u5357\u3001\u7ecf\u5178\u8bd7\u8bcd\u3001\u65f6\u4ee4\u7f8e\u98df\">\n<meta property=\"og:title\" content=\"\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0\">\n<meta property=\"og:description\" content=\"\u4e8c\u5341\u56db\u8282\u6c14\u4e4b\u7acb\u590f\uff0c\u521d\u590f\u65f6\u8282\u7684\u6587\u5316\u767e\u79d1\">\n<meta property=\"og:type\" content=\"website\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ==================== CSS Variables ==================== *\/\n:root {\n --green-deep: #1a3a12;\n --green-main: #3a7d32;\n --green-mid: #5ca84e;\n --green-light: #8ecf7e;\n --green-pale: #d4edcf;\n --green-mist: #eaf6e6;\n --yellow-sun: #f5c842;\n --yellow-warm: #fce588;\n --blue-sky: #7ec8e3;\n --blue-light: #bfe3f3;\n --ink: #2c2c2c;\n --ink-light: #5a5a5a;\n --ink-muted: #8a8a8a;\n --cream: #faf8f0;\n --white: #ffffff;\n --shadow-soft: 0 4px 24px rgba(26, 58, 18, 0.08);\n --shadow-hover: 0 8px 40px rgba(26, 58, 18, 0.15);\n --radius: 16px;\n --radius-sm: 10px;\n --font-title: 'Ma Shan Zheng', cursive;\n --font-serif: 'Noto Serif SC', serif;\n --font-sans: 'Noto Sans SC', sans-serif;\n}\n\n\/* ==================== Reset & Base ==================== *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml {\n scroll-behavior: smooth;\n font-size: 16px;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n font-family: var(--font-sans);\n color: var(--ink);\n background: var(--cream);\n line-height: 1.8;\n overflow-x: hidden;\n}\n\na { color: var(--green-main); text-decoration: none; transition: color .3s; }\na:hover { color: var(--green-deep); }\n\nimg { max-width: 100%; display: block; }\n\n\/* ==================== Scrollbar ==================== *\/\n::-webkit-scrollbar { width: 8px; }\n::-webkit-scrollbar-track { background: var(--green-mist); }\n::-webkit-scrollbar-thumb { background: var(--green-light); border-radius: 4px; }\n::-webkit-scrollbar-thumb:hover { background: var(--green-main); }\n\n\/* ==================== Navigation ==================== *\/\n.nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\n padding: 12px 24px;\n display: flex; align-items: center; justify-content: space-between;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n backdrop-filter: blur(0px);\n background: transparent;\n}\n\n.nav.scrolled {\n background: rgba(250, 248, 240, 0.92);\n backdrop-filter: blur(16px);\n box-shadow: 0 2px 20px rgba(26,58,18,0.06);\n padding: 8px 24px;\n}\n\n.nav-brand {\n font-family: var(--font-title);\n font-size: 1.6rem;\n color: var(--white);\n transition: color .4s;\n text-shadow: 0 2px 8px rgba(0,0,0,0.3);\n}\n\n.nav.scrolled .nav-brand { color: var(--green-deep); text-shadow: none; }\n\n.nav-links {\n display: flex; gap: 6px; list-style: none;\n}\n\n.nav-links a {\n color: rgba(255,255,255,0.85);\n font-size: 0.88rem;\n font-weight: 500;\n padding: 6px 14px;\n border-radius: 20px;\n transition: all .3s;\n text-shadow: 0 1px 4px rgba(0,0,0,0.2);\n}\n\n.nav.scrolled .nav-links a {\n color: var(--ink-light);\n text-shadow: none;\n}\n\n.nav-links a:hover,\n.nav-links a.active {\n background: rgba(255,255,255,0.2);\n}\n\n.nav.scrolled .nav-links a:hover,\n.nav.scrolled .nav-links a.active {\n background: var(--green-pale);\n color: var(--green-deep);\n}\n\n.nav-countdown {\n font-size: 0.8rem;\n color: var(--yellow-warm);\n font-weight: 500;\n text-shadow: 0 1px 4px rgba(0,0,0,0.2);\n transition: color .4s;\n}\n\n.nav.scrolled .nav-countdown { color: var(--green-main); text-shadow: none; }\n\n\/* Mobile nav toggle *\/\n.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }\n.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: .3s; }\n\n@media (max-width: 768px) {\n .nav-toggle { display: block; color: var(--white); }\n .nav.scrolled .nav-toggle { color: var(--ink); }\n .nav-links {\n position: fixed; top: 56px; left: 0; right: 0;\n background: rgba(250,248,240,0.98);\n backdrop-filter: blur(16px);\n flex-direction: column; padding: 16px 24px; gap: 4px;\n transform: translateY(-120%); transition: transform .4s cubic-bezier(.4,0,.2,1);\n box-shadow: var(--shadow-soft);\n }\n .nav-links.open { transform: translateY(0); }\n .nav-links a { color: var(--ink); text-shadow: none; }\n .nav-countdown { display: none; }\n}\n\n\/* ==================== Hero Section ==================== *\/\n.hero {\n position: relative;\n min-height: 100vh;\n display: flex; align-items: center; justify-content: center;\n background: linear-gradient(160deg, #1a3a12 0%, #2d5a27 25%, #3a7d32 50%, #5ca84e 75%, #8ecf7e 100%);\n overflow: hidden;\n}\n\n.hero::before {\n content: '';\n position: absolute; inset: 0;\n background:\n radial-gradient(ellipse 600px 400px at 20% 80%, rgba(125,200,100,0.3), transparent),\n radial-gradient(ellipse 500px 350px at 80% 20%, rgba(245,200,66,0.15), transparent),\n radial-gradient(ellipse 400px 400px at 50% 50%, rgba(126,200,227,0.1), transparent);\n z-index: 1;\n}\n\n\/* Floating leaves decoration *\/\n.hero-leaves {\n position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;\n}\n\n.leaf {\n position: absolute;\n font-size: 2rem;\n opacity: 0.5;\n animation: leafFloat linear infinite;\n}\n\n@keyframes leafFloat {\n 0% { transform: translateY(110vh) rotate(0deg) scale(1); opacity: 0; }\n 10% { opacity: 0.5; }\n 90% { opacity: 0.5; }\n 100% { transform: translateY(-10vh) rotate(360deg) scale(0.8); opacity: 0; }\n}\n\n\/* Ripple circles *\/\n.hero-ripple {\n position: absolute; border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.15);\n animation: ripple 6s ease-out infinite;\n}\n\n@keyframes ripple {\n 0% { transform: scale(0.5); opacity: 0.6; }\n 100% { transform: scale(3); opacity: 0; }\n}\n\n.hero-content {\n position: relative; z-index: 3;\n text-align: center;\n padding: 0 24px;\n animation: fadeInUp 1.2s cubic-bezier(.4,0,.2,1);\n}\n\n@keyframes fadeInUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.hero-tag {\n display: inline-block;\n padding: 6px 20px;\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 20px;\n color: rgba(255,255,255,0.85);\n font-size: 0.82rem;\n letter-spacing: 2px;\n margin-bottom: 20px;\n backdrop-filter: blur(4px);\n}\n\n.hero-title {\n font-family: var(--font-title);\n font-size: clamp(4rem, 12vw, 8rem);\n color: var(--white);\n line-height: 1.1;\n margin-bottom: 12px;\n text-shadow: 0 4px 30px rgba(0,0,0,0.2);\n letter-spacing: 0.08em;\n}\n\n.hero-subtitle {\n font-family: var(--font-serif);\n font-size: clamp(1.1rem, 3vw, 1.5rem);\n color: rgba(255,255,255,0.8);\n margin-bottom: 32px;\n font-weight: 400;\n}\n\n.hero-desc {\n max-width: 520px;\n margin: 0 auto 40px;\n color: rgba(255,255,255,0.7);\n font-size: 0.95rem;\n line-height: 1.9;\n}\n\n.hero-cta {\n display: inline-flex; align-items: center; gap: 8px;\n padding: 14px 36px;\n background: rgba(255,255,255,0.15);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 50px;\n color: var(--white);\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all .3s;\n backdrop-filter: blur(8px);\n text-decoration: none;\n}\n\n.hero-cta:hover {\n background: rgba(255,255,255,0.25);\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(0,0,0,0.15);\n color: var(--white);\n}\n\n.hero-cta svg { transition: transform .3s; }\n.hero-cta:hover svg { transform: translateY(3px); }\n\n.hero-scroll {\n position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);\n z-index: 3;\n display: flex; flex-direction: column; align-items: center; gap: 8px;\n color: rgba(255,255,255,0.5);\n font-size: 0.75rem;\n animation: bounce 2s ease-in-out infinite;\n}\n\n@keyframes bounce {\n 0%, 100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(8px); }\n}\n\n\/* ==================== Section Commons ==================== *\/\n.section {\n padding: 100px 24px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.section-header {\n text-align: center;\n margin-bottom: 60px;\n}\n\n.section-label {\n display: inline-block;\n font-size: 0.78rem;\n letter-spacing: 3px;\n color: var(--green-main);\n text-transform: uppercase;\n margin-bottom: 12px;\n font-weight: 500;\n}\n\n.section-title {\n font-family: var(--font-title);\n font-size: clamp(2rem, 5vw, 3rem);\n color: var(--green-deep);\n margin-bottom: 12px;\n}\n\n.section-divider {\n width: 48px; height: 3px;\n background: linear-gradient(90deg, var(--green-main), var(--yellow-sun));\n border-radius: 2px;\n margin: 16px auto 0;\n}\n\n.section-desc {\n max-width: 600px;\n margin: 16px auto 0;\n color: var(--ink-muted);\n font-size: 0.92rem;\n}\n\n\/* Reveal animation *\/\n.reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);\n}\n\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.reveal-delay-1 { transition-delay: 0.1s; }\n.reveal-delay-2 { transition-delay: 0.2s; }\n.reveal-delay-3 { transition-delay: 0.3s; }\n.reveal-delay-4 { transition-delay: 0.4s; }\n.reveal-delay-5 { transition-delay: 0.5s; }\n\n\/* ==================== Intro Section ==================== *\/\n.intro {\n background: var(--white);\n}\n\n.intro-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n}\n\n.intro-visual {\n position: relative;\n aspect-ratio: 4\/5;\n border-radius: var(--radius);\n overflow: hidden;\n background: linear-gradient(135deg, var(--green-mist) 0%, var(--green-pale) 100%);\n display: flex; align-items: center; justify-content: center;\n}\n\n.intro-visual-inner {\n text-align: center;\n padding: 40px;\n}\n\n.intro-visual-glyph {\n font-family: var(--font-title);\n font-size: 10rem;\n color: var(--green-light);\n line-height: 1;\n opacity: 0.5;\n user-select: none;\n}\n\n.intro-visual-ring {\n position: absolute;\n width: 280px; height: 280px;\n border: 1px solid var(--green-light);\n border-radius: 50%;\n opacity: 0.3;\n animation: ringPulse 4s ease-in-out infinite;\n}\n\n@keyframes ringPulse {\n 0%, 100% { transform: scale(1); opacity: 0.3; }\n 50% { transform: scale(1.08); opacity: 0.15; }\n}\n\n.intro-visual-solar {\n position: absolute;\n top: 20px; right: 20px;\n width: 50px; height: 50px;\n background: var(--yellow-sun);\n border-radius: 50%;\n box-shadow: 0 0 30px rgba(245,200,66,0.4);\n animation: sunGlow 3s ease-in-out infinite;\n}\n\n@keyframes sunGlow {\n 0%, 100% { box-shadow: 0 0 30px rgba(245,200,66,0.4); }\n 50% { box-shadow: 0 0 50px rgba(245,200,66,0.6); }\n}\n\n.intro-text h3 {\n font-family: var(--font-serif);\n font-size: 1.5rem;\n color: var(--green-deep);\n margin-bottom: 16px;\n}\n\n.intro-text p {\n color: var(--ink-light);\n margin-bottom: 16px;\n font-size: 0.95rem;\n}\n\n.intro-meta {\n display: flex; flex-wrap: wrap; gap: 16px;\n margin-top: 24px;\n}\n\n.intro-meta-item {\n display: flex; align-items: center; gap: 8px;\n padding: 10px 18px;\n background: var(--green-mist);\n border-radius: var(--radius-sm);\n font-size: 0.88rem;\n color: var(--green-deep);\n}\n\n.intro-meta-item .label {\n color: var(--ink-muted);\n font-size: 0.8rem;\n}\n\n@media (max-width: 768px) {\n .intro-grid { grid-template-columns: 1fr; gap: 32px; }\n .intro-visual { max-height: 320px; }\n}\n\n\/* ==================== Three Phenology (\u4e09\u5019) ==================== *\/\n.phenology {\n background: var(--green-mist);\n}\n\n.phenology-cards {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n}\n\n.phenology-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 40px 28px 32px;\n text-align: center;\n position: relative;\n overflow: hidden;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n box-shadow: var(--shadow-soft);\n}\n\n.phenology-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-hover);\n}\n\n.phenology-card::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--green-main), var(--green-light));\n transition: height .3s;\n}\n\n.phenology-card:hover::before { height: 6px; }\n\n.phenology-icon {\n width: 72px; height: 72px;\n margin: 0 auto 20px;\n background: var(--green-mist);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.8rem;\n transition: transform .4s;\n}\n\n.phenology-card:hover .phenology-icon { transform: scale(1.1) rotate(5deg); }\n\n.phenology-order {\n font-family: var(--font-title);\n font-size: 0.85rem;\n color: var(--green-mid);\n margin-bottom: 8px;\n letter-spacing: 2px;\n}\n\n.phenology-name {\n font-family: var(--font-serif);\n font-size: 1.3rem;\n color: var(--green-deep);\n margin-bottom: 12px;\n}\n\n.phenology-desc {\n color: var(--ink-muted);\n font-size: 0.88rem;\n line-height: 1.7;\n}\n\n@media (max-width: 768px) {\n .phenology-cards { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }\n}\n\n\/* ==================== Customs Section ==================== *\/\n.customs {\n background: var(--white);\n}\n\n.customs-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n}\n\n.custom-card {\n border-radius: var(--radius);\n padding: 32px;\n position: relative;\n overflow: hidden;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n cursor: default;\n}\n\n.custom-card:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-hover);\n}\n\n.custom-card-1 { background: linear-gradient(135deg, #fef9e7 0%, #fdebd0 100%); }\n.custom-card-2 { background: linear-gradient(135deg, #eaf6e6 0%, #d4edcf 100%); }\n.custom-card-3 { background: linear-gradient(135deg, #e8f6f3 0%, #d0ece7 100%); }\n.custom-card-4 { background: linear-gradient(135deg, #fdf2e9 0%, #fae5d3 100%); }\n\n.custom-icon {\n font-size: 2.5rem;\n margin-bottom: 16px;\n display: block;\n}\n\n.custom-name {\n font-family: var(--font-serif);\n font-size: 1.3rem;\n color: var(--green-deep);\n margin-bottom: 10px;\n}\n\n.custom-desc {\n color: var(--ink-light);\n font-size: 0.9rem;\n line-height: 1.8;\n margin-bottom: 16px;\n}\n\n.custom-tag {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.custom-card-1 .custom-tag { background: rgba(245,200,66,0.2); color: #b7950b; }\n.custom-card-2 .custom-tag { background: rgba(90,168,78,0.15); color: var(--green-main); }\n.custom-card-3 .custom-tag { background: rgba(126,200,227,0.2); color: #2e86c1; }\n.custom-card-4 .custom-tag { background: rgba(230,126,34,0.15); color: #ca6f1e; }\n\n@media (max-width: 768px) {\n .customs-grid { grid-template-columns: 1fr; }\n}\n\n\/* ==================== Proverbs (\u519c\u8c1a) ==================== *\/\n.proverbs {\n background: var(--green-deep);\n color: var(--white);\n position: relative;\n overflow: hidden;\n}\n\n.proverbs::before {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(90,168,78,0.2), transparent),\n radial-gradient(ellipse 60% 50% at 70% 30%, rgba(245,200,66,0.08), transparent);\n}\n\n.proverbs .section-label { color: var(--green-light); }\n.proverbs .section-title { color: var(--white); }\n.proverbs .section-divider { background: linear-gradient(90deg, var(--green-light), var(--yellow-sun)); }\n\n.proverb-track {\n display: flex; gap: 24px;\n animation: proverbScroll 30s linear infinite;\n width: max-content;\n}\n\n.proverb-track:hover { animation-play-state: paused; }\n\n@keyframes proverbScroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n}\n\n.proverb-item {\n flex-shrink: 0;\n padding: 20px 32px;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: var(--radius-sm);\n font-family: var(--font-serif);\n font-size: 1.1rem;\n color: rgba(255,255,255,0.85);\n white-space: nowrap;\n transition: background .3s;\n backdrop-filter: blur(4px);\n}\n\n.proverb-item:hover { background: rgba(255,255,255,0.12); }\n\n\/* ==================== Health Section ==================== *\/\n.health {\n background: var(--cream);\n}\n\n.health-tabs {\n display: flex; justify-content: center; gap: 8px;\n margin-bottom: 40px;\n flex-wrap: wrap;\n}\n\n.health-tab {\n padding: 10px 24px;\n border: 1.5px solid var(--green-light);\n border-radius: 50px;\n background: transparent;\n color: var(--green-main);\n font-size: 0.9rem;\n font-weight: 500;\n cursor: pointer;\n transition: all .3s;\n font-family: var(--font-sans);\n}\n\n.health-tab.active,\n.health-tab:hover {\n background: var(--green-main);\n border-color: var(--green-main);\n color: var(--white);\n}\n\n.health-panel {\n display: none;\n animation: fadeIn .4s;\n}\n\n.health-panel.active { display: block; }\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.health-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}\n\n.health-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 28px 24px;\n box-shadow: var(--shadow-soft);\n transition: all .3s;\n border-top: 3px solid transparent;\n}\n\n.health-card:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-hover);\n}\n\n.health-card-icon {\n font-size: 2rem;\n margin-bottom: 14px;\n}\n\n.health-card-title {\n font-family: var(--font-serif);\n font-size: 1.1rem;\n color: var(--green-deep);\n margin-bottom: 8px;\n}\n\n.health-card-text {\n color: var(--ink-muted);\n font-size: 0.85rem;\n line-height: 1.7;\n}\n\n\/* Tab-specific border colors *\/\n.health-panel[data-tab=\"child\"] .health-card { border-top-color: var(--yellow-sun); }\n.health-panel[data-tab=\"adult\"] .health-card { border-top-color: var(--green-main); }\n.health-panel[data-tab=\"elder\"] .health-card { border-top-color: var(--blue-sky); }\n\n@media (max-width: 768px) {\n .health-grid { grid-template-columns: 1fr; }\n}\n\n\/* ==================== Poetry Section ==================== *\/\n.poetry {\n background: var(--white);\n position: relative;\n overflow: hidden;\n}\n\n.poetry::after {\n content: '';\n position: absolute;\n bottom: -50px; right: -50px;\n width: 300px; height: 300px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--green-mist), transparent);\n opacity: 0.6;\n pointer-events: none;\n}\n\n.poetry-showcase {\n max-width: 700px;\n margin: 0 auto;\n position: relative;\n}\n\n.poetry-frame {\n background: linear-gradient(145deg, #faf8f0 0%, #f5f0e3 100%);\n border: 1px solid rgba(90,168,78,0.15);\n border-radius: var(--radius);\n padding: 48px 40px;\n position: relative;\n overflow: hidden;\n}\n\n.poetry-frame::before {\n content: '';\n position: absolute;\n top: 16px; left: 16px; right: 16px; bottom: 16px;\n border: 1px solid rgba(90,168,78,0.08);\n border-radius: 12px;\n pointer-events: none;\n}\n\n.poetry-dynasty {\n text-align: center;\n font-size: 0.82rem;\n color: var(--ink-muted);\n letter-spacing: 3px;\n margin-bottom: 12px;\n}\n\n.poetry-title {\n text-align: center;\n font-family: var(--font-title);\n font-size: 1.8rem;\n color: var(--green-deep);\n margin-bottom: 6px;\n}\n\n.poetry-author {\n text-align: center;\n font-size: 0.9rem;\n color: var(--ink-muted);\n margin-bottom: 28px;\n}\n\n.poetry-lines {\n text-align: center;\n font-family: var(--font-serif);\n font-size: 1.15rem;\n color: var(--ink);\n line-height: 2.4;\n letter-spacing: 0.05em;\n}\n\n.poetry-lines p { margin-bottom: 4px; }\n\n.poetry-nav {\n display: flex; justify-content: center; align-items: center; gap: 20px;\n margin-top: 32px;\n}\n\n.poetry-btn {\n width: 44px; height: 44px;\n border-radius: 50%;\n border: 1.5px solid var(--green-light);\n background: var(--white);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all .3s;\n color: var(--green-main);\n font-size: 1.1rem;\n}\n\n.poetry-btn:hover {\n background: var(--green-main);\n border-color: var(--green-main);\n color: var(--white);\n}\n\n.poetry-counter {\n font-size: 0.85rem;\n color: var(--ink-muted);\n min-width: 40px;\n text-align: center;\n}\n\n.poetry-speak-btn {\n display: inline-flex; align-items: center; gap: 6px;\n margin-top: 20px;\n padding: 8px 18px;\n border-radius: 20px;\n border: 1px solid var(--green-light);\n background: transparent;\n color: var(--green-main);\n font-size: 0.82rem;\n cursor: pointer;\n transition: all .3s;\n font-family: var(--font-sans);\n}\n\n.poetry-speak-btn:hover {\n background: var(--green-mist);\n}\n\n.poetry-speak-btn.speaking {\n background: var(--green-main);\n color: var(--white);\n border-color: var(--green-main);\n}\n\n\/* ==================== Food Section ==================== *\/\n.food {\n background: var(--green-mist);\n}\n\n.food-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n}\n\n.food-card {\n background: var(--white);\n border-radius: var(--radius);\n overflow: hidden;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n box-shadow: var(--shadow-soft);\n}\n\n.food-card:hover {\n transform: translateY(-6px);\n box-shadow: var(--shadow-hover);\n}\n\n.food-img {\n height: 180px;\n background: var(--green-pale);\n display: flex; align-items: center; justify-content: center;\n font-size: 4rem;\n position: relative;\n overflow: hidden;\n}\n\n.food-img::after {\n content: '';\n position: absolute; bottom: 0; left: 0; right: 0;\n height: 40px;\n background: linear-gradient(transparent, var(--white));\n}\n\n.food-body {\n padding: 20px 24px 24px;\n}\n\n.food-name {\n font-family: var(--font-serif);\n font-size: 1.2rem;\n color: var(--green-deep);\n margin-bottom: 6px;\n}\n\n.food-origin {\n font-size: 0.78rem;\n color: var(--ink-muted);\n margin-bottom: 10px;\n}\n\n.food-desc {\n color: var(--ink-light);\n font-size: 0.85rem;\n line-height: 1.7;\n}\n\n.food-tags {\n display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;\n}\n\n.food-tag {\n padding: 3px 10px;\n background: var(--green-mist);\n border-radius: 10px;\n font-size: 0.72rem;\n color: var(--green-main);\n}\n\n@media (max-width: 768px) {\n .food-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }\n}\n\n\/* ==================== Footer ==================== *\/\n.footer {\n background: var(--green-deep);\n color: rgba(255,255,255,0.7);\n padding: 60px 24px 32px;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.footer::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0;\n height: 80px;\n background: linear-gradient(var(--cream), transparent);\n pointer-events: none;\n}\n\n.footer-brand {\n font-family: var(--font-title);\n font-size: 2rem;\n color: var(--white);\n margin-bottom: 8px;\n}\n\n.footer-text {\n font-size: 0.85rem;\n margin-bottom: 6px;\n}\n\n.footer-small {\n font-size: 0.75rem;\n color: rgba(255,255,255,0.4);\n margin-top: 20px;\n}\n\n.footer-nav-row {\n display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;\n margin-top: 20px;\n}\n\n.footer-nav-row a {\n color: rgba(255,255,255,0.5);\n font-size: 0.82rem;\n transition: color .3s;\n}\n\n.footer-nav-row a:hover { color: var(--white); }\n\n\/* ==================== Back to Top ==================== *\/\n.back-top {\n position: fixed; bottom: 32px; right: 32px;\n width: 48px; height: 48px;\n border-radius: 50%;\n background: var(--green-main);\n color: var(--white);\n border: none; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 4px 16px rgba(58,125,50,0.3);\n opacity: 0; visibility: hidden;\n transition: all .3s;\n z-index: 999;\n font-size: 1.2rem;\n}\n\n.back-top.show { opacity: 1; visibility: visible; }\n.back-top:hover { background: var(--green-deep); transform: translateY(-2px); }\n\n\/* ==================== Solar Term Timeline ==================== *\/\n.timeline-float {\n position: fixed; left: 16px; top: 50%;\n transform: translateY(-50%);\n display: flex; flex-direction: column; gap: 6px;\n z-index: 998;\n opacity: 0; visibility: hidden;\n transition: all .4s;\n}\n\n.timeline-float.show { opacity: 1; visibility: visible; }\n\n.timeline-dot {\n width: 10px; height: 10px;\n border-radius: 50%;\n border: 1.5px solid var(--green-light);\n background: transparent;\n cursor: pointer;\n transition: all .3s;\n position: relative;\n}\n\n.timeline-dot.active {\n background: var(--green-main);\n border-color: var(--green-main);\n box-shadow: 0 0 0 4px rgba(90,168,78,0.15);\n}\n\n.timeline-dot:hover {\n border-color: var(--green-main);\n transform: scale(1.3);\n}\n\n.timeline-dot::after {\n content: attr(data-label);\n position: absolute; left: 18px; top: 50%; transform: translateY(-50%);\n font-size: 0.7rem;\n color: var(--ink-muted);\n white-space: nowrap;\n opacity: 0;\n transition: opacity .2s;\n pointer-events: none;\n}\n\n.timeline-dot:hover::after { opacity: 1; }\n\n@media (max-width: 1024px) { .timeline-float { display: none; } }\n\n\/* ==================== Loading Screen ==================== *\/\n.loader {\n position: fixed; inset: 0; z-index: 9999;\n background: var(--green-deep);\n display: flex; align-items: center; justify-content: center;\n flex-direction: column; gap: 20px;\n transition: opacity .6s, visibility .6s;\n}\n\n.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }\n\n.loader-text {\n font-family: var(--font-title);\n font-size: 2.5rem;\n color: var(--white);\n animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\n}\n\n.loader-bar {\n width: 120px; height: 3px;\n background: rgba(255,255,255,0.15);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.loader-bar-inner {\n height: 100%; width: 0%;\n background: var(--green-light);\n border-radius: 2px;\n animation: loaderGrow 1.2s ease-out forwards;\n}\n\n@keyframes loaderGrow {\n to { width: 100%; }\n}\n\n\/* ==================== Game Modal ==================== *\/\n.game-modal {\n position: fixed; inset: 0; z-index: 10000;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(6px);\n display: none; align-items: center; justify-content: center;\n animation: gameModalIn .3s ease;\n}\n.game-modal.active { display: flex; }\n@keyframes gameModalIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n.game-modal-content {\n background: #fff;\n border-radius: 20px;\n max-width: 700px;\n width: 95vw;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n animation: gameModalSlideUp .3s ease;\n}\n@keyframes gameModalSlideUp {\n from { transform: translateY(40px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n.game-modal-close {\n position: absolute; top: 12px; right: 16px;\n width: 36px; height: 36px;\n border-radius: 50%; border: none;\n background: rgba(0,0,0,0.08);\n font-size: 1.2rem; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all .2s; z-index: 1;\n color: #666;\n}\n.game-modal-close:hover { background: rgba(0,0,0,0.15); color: #333; }\n.game-modal-body { padding: 0; }\n\n\/* Game wrapper containers *\/\n#doudan-wrap, #chengren-wrap {\n display: none;\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 30%, #fbbf24 100%);\n border-radius: 20px;\n padding: 16px;\n font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;\n user-select: none;\n}\n#doudan-wrap.active, #chengren-wrap.active {\n display: block;\n}\n\n\/* ===== Doudan Game Styles ===== *\/\n#doudan-wrap .title-bar {\n text-align: center; padding: 10px 10px 6px;\n}\n#doudan-wrap .title-bar h1 {\n font-size: 2em; color: #92400e;\n text-shadow: 2px 2px 0 rgba(255,255,255,0.6);\n letter-spacing: 0.15em;\n}\n#doudan-wrap .subtitle { color: #b45309; font-size: 0.9em; margin-top: 2px; }\n#doudan-wrap .score-board {\n display: flex; gap: 30px; justify-content: center;\n font-size: 1em; color: #78350f; font-weight: bold; margin: 4px 0;\n}\n#doudan-wrap #doudan-canvas {\n display: block; margin: 0 auto;\n border-radius: 14px;\n box-shadow: 0 6px 24px rgba(120,53,15,0.22);\n max-width: 100%;\n cursor: pointer;\n}\n#doudan-wrap .egg-select {\n display: flex; gap: 14px; justify-content: center; margin: 8px 0;\n}\n#doudan-wrap .egg-option {\n width: 76px; padding: 8px 4px;\n background: rgba(255,255,255,0.7); border-radius: 12px;\n border: 3px solid transparent; cursor: pointer;\n text-align: center; transition: all 0.2s;\n}\n#doudan-wrap .egg-option:hover { border-color: #f59e0b; transform: translateY(-2px); }\n#doudan-wrap .egg-option.selected { border-color: #dc2626; background: rgba(254,202,202,0.5); }\n#doudan-wrap .egg-option .egg-icon { font-size: 2em; }\n#doudan-wrap .egg-option .egg-label { font-size: 0.82em; color: #78350f; font-weight: bold; margin-top: 2px; }\n#doudan-wrap .egg-option .egg-stat { font-size: 0.7em; color: #a16207; }\n#doudan-wrap .mode-select {\n display: flex; gap: 10px; justify-content: center; margin: 6px 0;\n}\n#doudan-wrap .mode-btn {\n padding: 6px 16px; border-radius: 20px;\n border: 2px solid #d97706; background: #fffbeb;\n color: #92400e; font-weight: bold; cursor: pointer;\n font-size: 0.88em; transition: all 0.2s;\n}\n#doudan-wrap .mode-btn:hover { background: #fef3c7; }\n#doudan-wrap .mode-btn.selected { background: #92400e; color: #fde68a; border-color: #92400e; }\n#doudan-wrap .controls {\n margin: 10px 0; display: flex; gap: 10px;\n flex-wrap: wrap; justify-content: center;\n}\n#doudan-wrap .controls button {\n padding: 8px 22px; font-size: 1em;\n border: 2px solid #92400e; border-radius: 28px;\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\n color: #78350f; font-weight: bold; cursor: pointer;\n transition: all 0.2s;\n}\n#doudan-wrap .controls button:hover { transform: scale(1.04); box-shadow: 0 4px 10px rgba(146,64,14,0.25); }\n#doudan-wrap .controls button:disabled { opacity: 0.4; cursor: default; transform: none; }\n#doudan-wrap .power-hint {\n color: #b45309; font-size: 0.85em; margin-top: 4px;\n text-align: center; font-weight: bold;\n}\n#doudan-wrap .info-panel {\n background: rgba(255,255,255,0.75);\n backdrop-filter: blur(8px);\n border-radius: 14px; padding: 12px 18px;\n margin: 6px 0 12px; max-width: 600px;\n margin-left: auto; margin-right: auto;\n color: #78350f; font-size: 0.9em;\n line-height: 1.6; text-align: center;\n}\n#doudan-wrap .info-panel .king {\n font-size: 1.4em; color: #dc2626; font-weight: bold;\n animation: ddPulse 1s infinite;\n}\n@keyframes ddPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n}\n\n\/* ===== Chengren Game Styles ===== *\/\n#chengren-wrap .header {\n text-align: center; padding: 10px 10px 6px;\n}\n#chengren-wrap .header h1 {\n font-size: 1.8em; color: #92400e;\n text-shadow: 2px 2px 0 rgba(255,255,255,0.6);\n letter-spacing: 0.2em;\n}\n#chengren-wrap .header .desc { color: #b45309; font-size: 0.85em; margin-top: 2px; }\n#chengren-wrap #chengren-canvas {\n display: block; margin: 0 auto;\n border-radius: 14px;\n box-shadow: 0 6px 24px rgba(120,53,15,0.22);\n max-width: 100%;\n background: #fef9c3;\n}\n#chengren-wrap .person-select {\n display: flex; gap: 8px; justify-content: center;\n flex-wrap: wrap; margin: 10px 0 6px;\n}\n#chengren-wrap .person-card {\n width: 64px; padding: 6px 4px;\n background: rgba(255,255,255,0.85);\n border-radius: 12px; border: 2px solid transparent;\n cursor: pointer; text-align: center;\n transition: all 0.2s;\n}\n#chengren-wrap .person-card:hover { transform: translateY(-2px); border-color: #f59e0b; }\n#chengren-wrap .person-card.done { opacity: 0.45; cursor: default; transform: none; }\n#chengren-wrap .person-card.done:hover { border-color: transparent; }\n#chengren-wrap .person-card.selected { border-color: #dc2626; background: rgba(254,202,202,0.6); }\n#chengren-wrap .person-card .avatar { font-size: 1.6em; }\n#chengren-wrap .person-card .name { font-size: 0.8em; color: #78350f; font-weight: bold; margin-top: 2px; }\n#chengren-wrap .person-card .weight { font-size: 0.68em; color: #a16207; }\n#chengren-wrap .controls {\n text-align: center; margin: 8px 0;\n display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;\n}\n#chengren-wrap .controls button {\n padding: 8px 20px; font-size: 0.95em;\n border: 2px solid #92400e; border-radius: 28px;\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\n color: #78350f; font-weight: bold; cursor: pointer;\n transition: all 0.2s;\n}\n#chengren-wrap .controls button:hover { transform: scale(1.04); box-shadow: 0 4px 10px rgba(146,64,14,0.25); }\n#chengren-wrap .controls button:disabled { opacity: 0.4; cursor: default; transform: none; }\n#chengren-wrap .controls button.secondary { background: #fffbeb; font-size: 0.88em; }\n#chengren-wrap .result-panel {\n max-width: 480px; margin: 6px auto;\n background: rgba(255,255,255,0.88);\n backdrop-filter: blur(8px);\n border-radius: 14px; padding: 12px 16px;\n text-align: center;\n animation: crFadeIn 0.3s ease;\n}\n@keyframes crFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n#chengren-wrap .result-panel .weight-display { font-size: 2em; color: #dc2626; font-weight: bold; }\n#chengren-wrap .result-panel .lucky-word { font-size: 1em; color: #92400e; margin-top: 6px; line-height: 1.5; }\n#chengren-wrap .result-panel .change { font-size: 0.88em; color: #78350f; margin-top: 4px; }\n#chengren-wrap .result-panel .change.up { color: #16a34a; }\n#chengren-wrap .result-panel .change.down { color: #dc2626; }\n#chengren-wrap .hint {\n text-align: center; color: #b45309;\n font-size: 0.85em; margin: 3px 0; min-height: 18px;\n}\n#chengren-wrap .summary-panel {\n max-width: 540px; margin: 8px auto;\n background: rgba(255,255,255,0.92);\n border-radius: 14px; padding: 10px 14px;\n animation: crFadeIn 0.3s ease;\n}\n#chengren-wrap .summary-panel h3 { color: #92400e; margin-bottom: 6px; text-align: center; font-size: 1em; }\n#chengren-wrap .summary-table { width: 100%; border-collapse: collapse; font-size: 0.82em; }\n#chengren-wrap .summary-table th,\n#chengren-wrap .summary-table td { padding: 4px 5px; text-align: center; border-bottom: 1px solid #fde68a; }\n#chengren-wrap .summary-table th { color: #92400e; font-weight: bold; background: #fef3c7; }\n#chengren-wrap .summary-table td { color: #78350f; }\n#chengren-wrap .summary-panel .final-msg { text-align: center; color: #dc2626; font-weight: bold; font-size: 0.95em; margin-top: 8px; }\n\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"loader\" id=\"loader\">\n <div class=\"loader-text\">\u7acb\u590f<\/div>\n <div class=\"loader-bar\"><div class=\"loader-bar-inner\"><\/div><\/div>\n<\/div>\n\n\n<nav class=\"nav\" id=\"nav\">\n <a href=\"#hero\" class=\"nav-brand\">\u7acb\u590f<\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#intro\">\u8282\u6c14\u4ecb\u7ecd<\/a><\/li>\n <li><a href=\"#phenology\">\u7269\u5019\u4e09\u5019<\/a><\/li>\n <li><a href=\"#customs\">\u4f20\u7edf\u4e60\u4fd7<\/a><\/li>\n <li><a href=\"#health\">\u590f\u5b63\u517b\u751f<\/a><\/li>\n <li><a href=\"#poetry\">\u8bd7\u8bcd\u96c5\u97f5<\/a><\/li>\n <li><a href=\"#food\">\u65f6\u4ee4\u7f8e\u98df<\/a><\/li>\n <\/ul>\n <div class=\"nav-countdown\" id=\"countdown\"><\/div>\n <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"\u83dc\u5355\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n<\/nav>\n\n\n<div class=\"timeline-float\" id=\"timeline\">\n <div class=\"timeline-dot\" data-label=\"\u7acb\u6625\" title=\"\u7acb\u6625\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u96e8\u6c34\" title=\"\u96e8\u6c34\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u60ca\u86f0\" title=\"\u60ca\u86f0\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u6625\u5206\" title=\"\u6625\u5206\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u6e05\u660e\" title=\"\u6e05\u660e\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u8c37\u96e8\" title=\"\u8c37\u96e8\"><\/div>\n <div class=\"timeline-dot active\" data-label=\"\u7acb\u590f\" title=\"\u7acb\u590f\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u5c0f\u6ee1\" title=\"\u5c0f\u6ee1\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u8292\u79cd\" title=\"\u8292\u79cd\"><\/div>\n<\/div>\n\n\n<section class=\"hero\" id=\"hero\">\n <div class=\"hero-leaves\" id=\"heroLeaves\"><\/div>\n <div class=\"hero-ripple\" style=\"width:200px;height:200px;bottom:20%;left:10%;animation-delay:0s;\"><\/div>\n <div class=\"hero-ripple\" style=\"width:160px;height:160px;bottom:30%;right:15%;animation-delay:2s;\"><\/div>\n <div class=\"hero-ripple\" style=\"width:120px;height:120px;bottom:10%;left:40%;animation-delay:4s;\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-tag\">\u4e8c\u5341\u56db\u8282\u6c14 \u00b7 \u7b2c\u4e03<\/div>\n <h1 class=\"hero-title\">\u7acb\u590f<\/h1>\n <p class=\"hero-subtitle\">\u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0<\/p>\n <p class=\"hero-desc\">\n \u6597\u6307\u4e1c\u5357\uff0c\u7ef4\u4e3a\u7acb\u590f\u3002\u5929\u5730\u59cb\u4ea4\uff0c\u4e07\u7269\u5e76\u79c0\u3002<br>\n \u6b64\u65f6\u6625\u53bb\u590f\u6765\uff0c\u6c14\u6e29\u6e10\u5347\uff0c\u96f7\u96e8\u589e\u591a\uff0c\u519c\u4f5c\u7269\u8fdb\u5165\u751f\u957f\u65fa\u5b63\u3002\n <\/p>\n <a href=\"#intro\" class=\"hero-cta\">\n \u63a2\u7d22\u7acb\u590f\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M19 12l-7 7-7-7\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"hero-scroll\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M19 12l-7 7-7-7\"\/><\/svg>\n \u5411\u4e0b\u6eda\u52a8\n <\/div>\n<\/section>\n\n\n<section class=\"section intro\" id=\"intro\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u8282\u6c14\u4ecb\u7ecd<\/div>\n <h2 class=\"section-title\">\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb<\/h2>\n <div class=\"section-divider\"><\/div>\n <\/div>\n <div class=\"intro-grid\">\n <div class=\"intro-visual reveal reveal-delay-1\">\n <div class=\"intro-visual-inner\">\n <div class=\"intro-visual-glyph\">\u590f<\/div>\n <\/div>\n <div class=\"intro-visual-ring\"><\/div>\n <div class=\"intro-visual-ring\" style=\"width:340px;height:340px;animation-delay:1.5s;\"><\/div>\n <div class=\"intro-visual-solar\"><\/div>\n <\/div>\n <div class=\"intro-text reveal reveal-delay-2\">\n <h3>\u6597\u6307\u4e1c\u5357\uff0c\u7ef4\u4e3a\u7acb\u590f<\/h3>\n <p>\u7acb\u590f\uff0c\u662f\u4e8c\u5341\u56db\u8282\u6c14\u4e2d\u7684\u7b2c\u4e03\u4e2a\u8282\u6c14\uff0c\u590f\u5b63\u7684\u7b2c\u4e00\u4e2a\u8282\u6c14\uff0c\u6bcf\u5e74\u516c\u53865\u67085\u65e5\u81f37\u65e5\u4ea4\u8282\u3002\u6b64\u65f6\u592a\u9633\u5230\u8fbe\u9ec4\u7ecf45\u5ea6\uff0c\u5317\u6597\u4e03\u661f\u7684\u6597\u67c4\u6307\u5411\u4e1c\u5357\u65b9\u3002<\/p>\n <p>\u7acb\u590f\u6807\u5fd7\u7740\u6625\u5929\u7ed3\u675f\u3001\u590f\u5929\u5f00\u59cb\u3002\u7acb\u590f\u4e4b\u540e\uff0c\u65e5\u7167\u589e\u52a0\uff0c\u6c14\u6e29\u5347\u9ad8\uff0c\u96f7\u96e8\u589e\u591a\uff0c\u4e07\u7269\u8fdb\u5165\u84ec\u52c3\u751f\u957f\u7684\u65fa\u5b63\u3002\u519c\u8c1a\u6709\"\u7acb\u590f\u524d\u540e\u79cd\u5730\u74dc\"\"\u7acb\u590f\u79cd\u59dc\uff0c\u590f\u81f3\u6536\u5a18\"\u4e4b\u8bf4\u3002<\/p>\n <p>\u53e4\u4eba\u4ee5\u7acb\u590f\u4e3a\u91cd\u8981\u8282\u65e5\uff0c\u5386\u4ee3\u5e1d\u738b\u7387\u767e\u5b98\u81f3\u5357\u90ca\u8fce\u590f\uff0c\u6c11\u95f4\u5219\u6709\u79f0\u4eba\u3001\u6597\u86cb\u3001\u5c1d\u65b0\u7b49\u4e30\u5bcc\u7684\u4f20\u7edf\u4e60\u4fd7\uff0c\u81f3\u4eca\u4ecd\u5728\u8bb8\u591a\u5730\u533a\u4f20\u627f\u3002<\/p>\n <div class=\"intro-meta\">\n <div class=\"intro-meta-item\">\n <span class=\"label\">\u65e5\u671f<\/span> 5\u67085\u65e5\u20147\u65e5\n <\/div>\n <div class=\"intro-meta-item\">\n <span class=\"label\">\u592a\u9633\u9ec4\u7ecf<\/span> 45\u00b0\n <\/div>\n <div class=\"intro-meta-item\">\n <span class=\"label\">\u6597\u67c4\u6307\u5411<\/span> \u4e1c\u5357\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section phenology\" id=\"phenology\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u7269\u5019\u4e09\u5019<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u4e09\u5019<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u53e4\u4eba\u5c06\u7acb\u590f\u5206\u4e3a\u4e09\u5019\uff0c\u6bcf\u5019\u4e94\u65e5\uff0c\u4ee5\u7269\u5019\u53d8\u5316\u6807\u8bb0\u65f6\u4ee4\u63a8\u79fb<\/p>\n <\/div>\n <div class=\"phenology-cards\">\n <div class=\"phenology-card reveal reveal-delay-1\">\n <div class=\"phenology-icon\">\ud83d\udc38<\/div>\n <div class=\"phenology-order\">\u521d\u5019<\/div>\n <h3 class=\"phenology-name\">\u877c\u8748\u9e23<\/h3>\n <p class=\"phenology-desc\">\u7acb\u590f\u4e4b\u521d\uff0c\u877c\u8748\uff08\u86d9\u7c7b\uff09\u5728\u7530\u95f4\u6c60\u7554\u5f00\u59cb\u9e23\u53eb\uff0c\u58f0\u58f0\u5165\u8033\uff0c\u5ba3\u544a\u590f\u65e5\u7684\u6765\u4e34\u3002\u86d9\u9e23\u662f\u521d\u590f\u6700\u52a8\u542c\u7684\u81ea\u7136\u4e50\u7ae0\u3002<\/p>\n <\/div>\n <div class=\"phenology-card reveal reveal-delay-2\">\n <div class=\"phenology-icon\">\ud83e\udeb1<\/div>\n <div class=\"phenology-order\">\u4e8c\u5019<\/div>\n <h3 class=\"phenology-name\">\u86af\u8693\u51fa<\/h3>\n <p class=\"phenology-desc\">\u86af\u8693\u4ece\u571f\u58e4\u4e2d\u94bb\u51fa\u5730\u9762\uff0c\u662f\u5927\u5730\u9633\u6c14\u76db\u6781\u7684\u5f81\u5146\u3002\u6b64\u65f6\u571f\u58e4\u6e29\u6696\u6e7f\u6da6\uff0c\u86af\u8693\u6d3b\u52a8\u9891\u7e41\uff0c\u7ffb\u677e\u6ce5\u571f\uff0c\u5229\u4e8e\u519c\u4f5c\u3002<\/p>\n <\/div>\n <div class=\"phenology-card reveal reveal-delay-3\">\n <div class=\"phenology-icon\">\ud83c\udf3f<\/div>\n <div class=\"phenology-order\">\u4e09\u5019<\/div>\n <h3 class=\"phenology-name\">\u738b\u74dc\u751f<\/h3>\n <p class=\"phenology-desc\">\u738b\u74dc\uff08\u4e00\u79cd\u846b\u82a6\u79d1\u85e4\u672c\u690d\u7269\uff09\u85e4\u8513\u5feb\u901f\u6500\u722c\u751f\u957f\uff0c\u7eff\u610f\u76ce\u7136\u3002\u85e4\u8513\u8513\u5ef6\u8c61\u5f81\u7740\u590f\u65e5\u7684\u84ec\u52c3\u751f\u673a\u4e0e\u65fa\u76db\u751f\u547d\u529b\u3002<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section customs\" id=\"customs\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u4f20\u7edf\u4e60\u4fd7<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u6c11\u4fd7<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u4e16\u4ee3\u4f20\u627f\u7684\u7acb\u590f\u4e60\u4fd7\uff0c\u627f\u8f7d\u7740\u4eba\u4eec\u5bf9\u4e30\u6536\u7684\u7948\u613f\u548c\u5bf9\u5065\u5eb7\u7684\u671f\u76fc<\/p>\n <\/div>\n <div class=\"customs-grid\">\n <div class=\"custom-card custom-card-1 reveal reveal-delay-1\">\n <span class=\"custom-icon\">\ud83e\udd5a<\/span>\n <h3 class=\"custom-name\">\u7acb\u590f\u86cb<\/h3>\n <p class=\"custom-desc\">\u7acb\u590f\u8fd9\u5929\uff0c\u4eba\u4eec\u7528\u8336\u53f6\u672b\u6216\u80e1\u6843\u58f3\u716e\u86cb\uff0c\u79f0\"\u7acb\u590f\u86cb\"\u3002\u86cb\u58f3\u67d3\u6210\u7ea2\u8272\u6216\u7f16\u7ec7\u86cb\u7f51\u6302\u5728\u5b69\u5b50\u80f8\u524d\uff0c\u5bd3\u610f\"\u9022\u51f6\u5316\u5409\uff0c\u5e73\u5b89\u5ea6\u590f\"\u3002<\/p>\n <span class=\"custom-tag\">\u7948\u798f\u5e73\u5b89<\/span>\n <\/div>\n <div class=\"custom-card custom-card-2 reveal reveal-delay-2\" style=\"cursor:pointer\" onclick=\"openGameModal('doudan')\">\n <span class=\"custom-icon\">\ud83d\udca5<\/span>\n <h3 class=\"custom-name\">\u6597\u86cb<\/h3>\n <p class=\"custom-desc\">\u5b69\u5b50\u4eec\u4e09\u4e94\u6210\u7fa4\uff0c\u6301\u86cb\u76f8\u78b0\uff0c\u86cb\u5934\u5bf9\u86cb\u5934\u3001\u86cb\u5c3e\u5bf9\u86cb\u5c3e\uff0c\u7834\u8005\u8ba4\u8f93\u3002\u6700\u540e\u4e0d\u7834\u7684\u86cb\u88ab\u5c01\u4e3a\"\u5927\u738b\"\u3002\u8fd9\u4e00\u4e60\u4fd7\u81f3\u4eca\u4ecd\u662f\u5b69\u5b50\u4eec\u7684\u7acb\u590f\u76db\u4e8b\u3002<\/p>\n <span class=\"custom-tag\">\u7ae5\u8da3\u7ade\u6280<\/span>\n <\/div>\n <div class=\"custom-card custom-card-3 reveal reveal-delay-3\" style=\"cursor:pointer\" onclick=\"openGameModal('chengren')\">\n <span class=\"custom-icon\">\u2696\ufe0f<\/span>\n <h3 class=\"custom-name\">\u79f0\u4eba<\/h3>\n <p class=\"custom-desc\">\u7acb\u5348\u996d\u540e\uff0c\u4eba\u4eec\u6302\u8d77\u5927\u79e4\uff0c\u8f6e\u6d41\u79f0\u4f53\u91cd\u3002\u53f8\u79e4\u4eba\u8fb9\u6253\u79e4\u82b1\u8fb9\u8bb2\u5409\u5229\u8bdd\uff0c\u8001\u4eba\u79f0\u4e86\u7948\u957f\u5bff\uff0c\u5c0f\u5b69\u79f0\u4e86\u795d\u6210\u957f\uff0c\u4ee5\u9632\"\u75b0\u590f\"\u6d88\u7626\u3002<\/p>\n <span class=\"custom-tag\">\u5065\u5eb7\u7948\u613f<\/span>\n <\/div>\n <div class=\"custom-card custom-card-4 reveal reveal-delay-4\">\n <span class=\"custom-icon\">\ud83c\udf52<\/span>\n <h3 class=\"custom-name\">\u5c1d\u65b0<\/h3>\n <p class=\"custom-desc\">\u7acb\u590f\u5c1d\u65b0\uff0c\u54c1\u5c1d\u65f6\u4ee4\u9c9c\u5473\u2014\u2014\u9752\u6885\u3001\u6a31\u6843\u3001\u9c9c\u8695\u8c46\u3001\u82cb\u83dc\u7b49\u3002\u6c5f\u5357\u6709\"\u7acb\u590f\u89c1\u4e09\u65b0\"\u4e4b\u4fd7\uff0c\u4ee5\u6a31\u6843\u3001\u9752\u6885\u3001\u9ea6\u8695\u4e3a\u4e09\u65b0\uff0c\u656c\u5929\u5730\u4ea6\u6170\u53e3\u8179\u3002<\/p>\n <span class=\"custom-tag\">\u65f6\u4ee4\u9c9c\u5473<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section proverbs\" id=\"proverbs\">\n <div class=\"section-header reveal\" style=\"position:relative;z-index:1;\">\n <div class=\"section-label\">\u519c\u4e8b\u8c1a\u8bed<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u519c\u8c1a<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\" style=\"color:rgba(255,255,255,0.5);\">\u5343\u5e74\u519c\u8015\u667a\u6167\u7684\u7ed3\u6676\uff0c\u5b57\u5b57\u53e5\u53e5\u7686\u662f\u7ecf\u9a8c<\/p>\n <\/div>\n <div class=\"proverb-track reveal\" style=\"position:relative;z-index:1;\">\n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u524d\u540e\u79cd\u5730\u74dc<\/div>\n <div class=\"proverb-item\">\ud83c\udf31 \u7acb\u590f\u79cd\u59dc\uff0c\u590f\u81f3\u6536\u5a18<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u5c0f\u6ee1\u6b63\u683d\u79e7<\/div>\n <div class=\"proverb-item\">\u2600\ufe0f \u7acb\u590f\u4e0d\u4e0b\uff0c\u65f1\u5230\u9ea6\u7f62<\/div>\n <div class=\"proverb-item\">\ud83c\udf3f \u7acb\u590f\u4e09\u65e5\u904d\u9504\u7530<\/div>\n <div class=\"proverb-item\">\ud83d\udc38 \u7acb\u590f\u86c7\u51fa\u6d1e\uff0c\u51c6\u5907\u5feb\u9632\u6d2a<\/div>\n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u9ea6\u9f87\u7259\uff0c\u4e00\u6708\u5c31\u8981\u62d4<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u96e8\u6dcb\u6dcb\uff0c\u904d\u5730\u51fa\u9ec4\u91d1<\/div>\n \n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u524d\u540e\u79cd\u5730\u74dc<\/div>\n <div class=\"proverb-item\">\ud83c\udf31 \u7acb\u590f\u79cd\u59dc\uff0c\u590f\u81f3\u6536\u5a18<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u5c0f\u6ee1\u6b63\u683d\u79e7<\/div>\n <div class=\"proverb-item\">\u2600\ufe0f \u7acb\u590f\u4e0d\u4e0b\uff0c\u65f1\u5230\u9ea6\u7f62<\/div>\n <div class=\"proverb-item\">\ud83c\udf3f \u7acb\u590f\u4e09\u65e5\u904d\u9504\u7530<\/div>\n <div class=\"proverb-item\">\ud83d\udc38 \u7acb\u590f\u86c7\u51fa\u6d1e\uff0c\u51c6\u5907\u5feb\u9632\u6d2a<\/div>\n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u9ea6\u9f87\u7259\uff0c\u4e00\u6708\u5c31\u8981\u62d4<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u96e8\u6dcb\u6dcb\uff0c\u904d\u5730\u51fa\u9ec4\u91d1<\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section health\" id=\"health\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u590f\u5b63\u517b\u751f<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u517b\u751f\u6307\u5357<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u56e0\u4eba\u5236\u5b9c\uff0c\u987a\u65f6\u517b\u9633\uff0c\u8ba9\u8eab\u4f53\u5b89\u7136\u5165\u590f<\/p>\n <\/div>\n <div class=\"health-tabs reveal\">\n <button class=\"health-tab active\" data-tab=\"child\">\ud83d\udc76 \u513f\u7ae5\u517b\u751f<\/button>\n <button class=\"health-tab\" data-tab=\"adult\">\ud83e\uddd1 \u6210\u4eba\u517b\u751f<\/button>\n <button class=\"health-tab\" data-tab=\"elder\">\ud83e\uddd3 \u8001\u4eba\u517b\u751f<\/button>\n <\/div>\n \n <div class=\"health-panel active\" data-tab=\"child\">\n <div class=\"health-grid\">\n <div class=\"health-card reveal reveal-delay-1\">\n <div class=\"health-card-icon\">\ud83d\udecc<\/div>\n <h4 class=\"health-card-title\">\u665a\u7761\u65e9\u8d77\u52a0\u5348\u4f11<\/h4>\n <p class=\"health-card-text\">\u7acb\u590f\u540e\u663c\u957f\u591c\u77ed\uff0c\u513f\u7ae5\u53ef\u7a0d\u665a\u5165\u7761\uff08\u4e0d\u8d8521:30\uff09\uff0c\u9002\u5f53\u65e9\u8d77\uff0c\u5348\u95f4\u8865\u772030-60\u5206\u949f\uff0c\u4fdd\u8bc1\u5145\u8db3\u7761\u7720\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-2\">\n <div class=\"health-card-icon\">\ud83e\udd57<\/div>\n <h4 class=\"health-card-title\">\u996e\u98df\u6e05\u6de1\u5c11\u5bd2\u51c9<\/h4>\n <p class=\"health-card-text\">\u591a\u98df\u7ca5\u3001\u9762\u3001\u65b0\u9c9c\u852c\u679c\uff0c\u5c11\u98df\u51b7\u996e\u51b0\u54c1\u3002\u9002\u91cf\u98df\u7528\u9178\u5473\u98df\u7269\uff08\u5982\u4e4c\u6885\u6c64\uff09\u5f00\u80c3\u751f\u6d25\uff0c\u9884\u9632\u75b0\u590f\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-3\">\n <div class=\"health-card-icon\">\ud83c\udfc3<\/div>\n <h4 class=\"health-card-title\">\u9002\u5ea6\u8fd0\u52a8\u907f\u70c8\u65e5<\/h4>\n <p class=\"health-card-text\">\u9009\u62e9\u6e05\u6668\u6216\u508d\u665a\u6237\u5916\u6d3b\u52a8\uff0c\u907f\u514d\u6b63\u5348\u66b4\u6652\u3002\u8fd0\u52a8\u91cf\u4e0d\u5b9c\u8fc7\u5927\uff0c\u4ee5\u5fae\u5fae\u51fa\u6c57\u4e3a\u5b9c\uff0c\u53ca\u65f6\u8865\u5145\u6c34\u5206\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"health-panel\" data-tab=\"adult\">\n <div class=\"health-grid\">\n <div class=\"health-card reveal\">\n <div class=\"health-card-icon\">\ud83e\uddd8<\/div>\n <h4 class=\"health-card-title\">\u517b\u5fc3\u8c03\u795e\u4fdd\u5348\u4f11<\/h4>\n <p class=\"health-card-text\">\u7acb\u590f\u517b\u5fc3\u4e3a\u5148\uff0c\u4fdd\u6301\u5fc3\u60c5\u5e73\u548c\uff0c\u907f\u514d\u70e6\u8e81\u3002\u575a\u6301\u5348\u4f1120-30\u5206\u949f\uff0c\u6709\u52a9\u5fc3\u6c14\u6062\u590d\u3001\u4e0b\u5348\u7cbe\u529b\u5145\u6c9b\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-1\">\n <div class=\"health-card-icon\">\ud83c\udf75<\/div>\n <h4 class=\"health-card-title\">\u589e\u9178\u51cf\u82e6\u8865\u813e\u80c3<\/h4>\n <p class=\"health-card-text\">\u9002\u5f53\u589e\u52a0\u9178\u5473\u6444\u5165\uff08\u5c71\u6942\u3001\u67e0\u6aac\uff09\uff0c\u51cf\u5c11\u82e6\u5473\u3002\u53ef\u996e\u7eff\u8c46\u6c64\u3001\u9178\u6885\u6c64\u6d88\u6691\u3002\u5fcc\u66b4\u996e\u66b4\u98df\u4e0e\u8fc7\u5ea6\u8f9b\u8fa3\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-2\">\n <div class=\"health-card-icon\">\ud83c\udfca<\/div>\n <h4 class=\"health-card-title\">\u6709\u6c27\u8fd0\u52a8\u4fc3\u4ee3\u8c22<\/h4>\n <p class=\"health-card-text\">\u63a8\u8350\u6e38\u6cf3\u3001\u6162\u8dd1\u3001\u592a\u6781\u62f3\u7b49\u6709\u6c27\u8fd0\u52a8\uff0c\u589e\u5f3a\u5fc3\u80ba\u529f\u80fd\u3002\u8fd0\u52a8\u540e\u4e0d\u5b9c\u7acb\u5373\u51b7\u6c34\u51b2\u6dcb\uff0c\u5e94\u7b49\u6c57\u843d\u540e\u6e29\u6c34\u6c90\u6d74\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"health-panel\" data-tab=\"elder\">\n <div class=\"health-grid\">\n <div class=\"health-card reveal\">\n <div class=\"health-card-icon\">\ud83d\udc8a<\/div>\n <h4 class=\"health-card-title\">\u9632\u6691\u964d\u6e29\u9632\u65e7\u75be<\/h4>\n <p class=\"health-card-text\">\u8001\u4eba\u5bf9\u6e29\u5ea6\u9002\u5e94\u529b\u5f31\uff0c\u9700\u6ce8\u610f\u5ba4\u5185\u901a\u98ce\u964d\u6e29\u3002\u5fc3\u8111\u8840\u7ba1\u75be\u75c5\u60a3\u8005\u5c24\u5e94\u9632\u6691\uff0c\u968f\u8eab\u643a\u5e26\u6025\u6551\u836f\u7269\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-1\">\n <div class=\"health-card-icon\">\ud83c\udf72<\/div>\n <h4 class=\"health-card-title\">\u6e29\u8865\u4e3a\u4e3b\u5fcc\u8d2a\u51c9<\/h4>\n <p class=\"health-card-text\">\u996e\u98df\u4ee5\u6e29\u8f6f\u4e3a\u4e3b\uff0c\u53ef\u98df\u5c71\u836f\u3001\u858f\u4ec1\u3001\u83b2\u5b50\u7ca5\u5065\u813e\u795b\u6e7f\u3002\u5207\u5fcc\u8d2a\u51c9\u996e\u51b7\uff0c\u4ee5\u514d\u635f\u4f24\u813e\u80c3\u9633\u6c14\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-2\">\n <div class=\"health-card-icon\">\ud83d\udeb6<\/div>\n <h4 class=\"health-card-title\">\u7f13\u884c\u6162\u52a8\u517b\u6c14\u8840<\/h4>\n <p class=\"health-card-text\">\u6668\u660f\u6563\u6b65\u6700\u4f73\uff0c\u901f\u5ea6\u5b9c\u7f13\u3002\u907f\u514d\u957f\u65f6\u95f4\u6237\u5916\u66b4\u6652\u4e0e\u5267\u70c8\u8fd0\u52a8\u3002\u592a\u6781\u62f3\u3001\u516b\u6bb5\u9526\u662f\u7406\u60f3\u9009\u62e9\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section poetry\" id=\"poetry\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u8bd7\u8bcd\u96c5\u97f5<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u8bd7\u8bcd<\/h2>\n <div class=\"section-divider\"><\/div>\n <\/div>\n <div class=\"poetry-showcase reveal\">\n <div class=\"poetry-frame\" id=\"poetryFrame\">\n <div class=\"poetry-dynasty\" id=\"poetryDynasty\"><\/div>\n <h3 class=\"poetry-title\" id=\"poetryTitle\"><\/h3>\n <p class=\"poetry-author\" id=\"poetryAuthor\"><\/p>\n <div class=\"poetry-lines\" id=\"poetryLines\"><\/div>\n <div style=\"text-align:center;\">\n <button class=\"poetry-speak-btn\" id=\"poetrySpeakBtn\">\ud83d\udd0a \u6717\u8bfb<\/button>\n <\/div>\n <\/div>\n <div class=\"poetry-nav\">\n <button class=\"poetry-btn\" id=\"poetryPrev\" aria-label=\"\u4e0a\u4e00\u9996\">\u25c0<\/button>\n <span class=\"poetry-counter\" id=\"poetryCounter\"><\/span>\n <button class=\"poetry-btn\" id=\"poetryNext\" aria-label=\"\u4e0b\u4e00\u9996\">\u25b6<\/button>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section food\" id=\"food\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u65f6\u4ee4\u7f8e\u98df<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u98df\u5355<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u5e94\u5b63\u800c\u98df\uff0c\u4e0d\u8d1f\u65f6\u5149\uff0c\u4e0d\u8d1f\u5473\u857e<\/p>\n <\/div>\n <div class=\"food-grid\">\n <div class=\"food-card reveal reveal-delay-1\">\n <div class=\"food-img\">\ud83e\udedb<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u8695\u8c46<\/h4>\n <p class=\"food-origin\">\u6c5f\u5357\u5730\u533a \u00b7 \u7acb\u590f\u4e09\u65b0\u4e4b\u4e00<\/p>\n <p class=\"food-desc\">\u7acb\u590f\u65f6\u8282\u9c9c\u8695\u8c46\u6700\u4e3a\u80a5\u5ae9\uff0c\u6e05\u7092\u6216\u716e\u6c64\u7686\u5b9c\uff0c\u53e3\u611f\u7ef5\u751c\u3002\u6c5f\u5357\u4eba\u89c6\u5176\u4e3a\u7acb\u590f\u5fc5\u5c1d\u4e4b\u7269\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u9ad8\u86cb\u767d<\/span>\n <span class=\"food-tag\">\u5065\u813e\u5229\u6e7f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-2\">\n <div class=\"food-img\">\ud83c\udf52<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u6a31\u6843<\/h4>\n <p class=\"food-origin\">\u5168\u56fd\u5404\u5730 \u00b7 \u7acb\u590f\u4e09\u65b0\u4e4b\u4e00<\/p>\n <p class=\"food-desc\">\u7acb\u590f\u6a31\u6843\u7ea2\u4f3c\u706b\uff0c\u5473\u751c\u6c41\u591a\uff0c\u542b\u94c1\u91cf\u5c45\u6c34\u679c\u4e4b\u9996\u3002\u53e4\u4eba\u4ee5\u6a31\u6843\u796d\u7956\uff0c\u89c6\u4e3a\u521d\u590f\u7b2c\u4e00\u9c9c\u679c\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u8865\u8840\u517b\u989c<\/span>\n <span class=\"food-tag\">\u65f6\u4ee4\u9c9c\u679c<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-3\">\n <div class=\"food-img\">\ud83d\udfe2<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u9752\u6885<\/h4>\n <p class=\"food-origin\">\u5357\u65b9\u5730\u533a \u00b7 \u7acb\u590f\u4e09\u65b0\u4e4b\u4e00<\/p>\n <p class=\"food-desc\">\u9752\u6885\u5473\u9178\u5165\u809d\uff0c\u7acb\u590f\u98df\u4e4b\u53ef\u751f\u6d25\u6b62\u6e34\u3001\u6d88\u98df\u5f00\u80c3\u3002\u4ea6\u53ef\u917f\u5236\u9752\u6885\u9152\uff0c\u5c01\u5b58\u590f\u65e5\u8bb0\u5fc6\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u751f\u6d25\u6b62\u6e34<\/span>\n <span class=\"food-tag\">\u5f00\u80c3\u6d88\u98df<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-1\">\n <div class=\"food-img\">\ud83c\udf5c<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u7acb\u590f\u9762<\/h4>\n <p class=\"food-origin\">\u5317\u65b9\u5730\u533a \u00b7 \u4f20\u7edf\u98df\u4fd7<\/p>\n <p class=\"food-desc\">\u5317\u65b9\u6709\"\u7acb\u590f\u5403\u9762\"\u7684\u4e60\u4fd7\uff0c\u4ee5\u8fc7\u6c34\u9762\u3001\u51c9\u9762\u4e3a\u4e3b\u3002\u4e00\u7897\u6e05\u723d\u9762\u6761\uff0c\u5f00\u542f\u708e\u590f\u7684\u996e\u98df\u65b9\u5f0f\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u6e05\u51c9\u6d88\u6691<\/span>\n <span class=\"food-tag\">\u4f20\u7edf\u98df\u4fd7<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-2\">\n <div class=\"food-img\">\ud83e\udd63<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u4e4c\u7c73\u996d<\/h4>\n <p class=\"food-origin\">\u6c5f\u5357\u3001\u95fd\u5317 \u00b7 \u975e\u9057\u7f8e\u98df<\/p>\n <p class=\"food-desc\">\u4ee5\u4e4c\u6811\u53f6\u6363\u6c41\u6d78\u7cef\u7c73\u84b8\u5236\u800c\u6210\uff0c\u8272\u6cfd\u4e4c\u9ed1\u53d1\u4eae\uff0c\u6e05\u9999\u8f6f\u7cef\u3002\u6709\u795b\u98ce\u89e3\u6bd2\u3001\u76ca\u813e\u5065\u80c3\u4e4b\u6548\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u975e\u9057\u4f20\u627f<\/span>\n <span class=\"food-tag\">\u795b\u98ce\u89e3\u6bd2<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-3\">\n <div class=\"food-img\">\ud83e\uded5<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u4e94\u8272\u996d<\/h4>\n <p class=\"food-origin\">\u5357\u65b9\u591a\u5730 \u00b7 \u7acb\u590f\u996d<\/p>\n <p class=\"food-desc\">\u4ee5\u7ea2\u8c46\u3001\u9ec4\u8c46\u3001\u7eff\u8c46\u3001\u9ed1\u8c46\u4e0e\u767d\u7c73\u84b8\u6210\u4e94\u8272\u996d\uff0c\u5bd3\u610f\u4e94\u8c37\u4e30\u767b\u3001\u4e94\u798f\u4e34\u95e8\uff0c\u8272\u5f69\u7f24\u7eb7\uff0c\u8425\u517b\u4e30\u5bcc\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u4e94\u8c37\u4e30\u767b<\/span>\n <span class=\"food-tag\">\u8425\u517b\u5747\u8861<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer class=\"footer\">\n <div class=\"footer-brand\">\u7acb\u590f \u00b7 \u4e07\u7269\u5e76\u79c0<\/div>\n <p class=\"footer-text\">\u6625\u5c3d\u590f\u6765\uff0c\u4e07\u7269\u81ea\u6b64\u8d70\u5411\u7e41\u76db<\/p>\n <p class=\"footer-text\" style=\"color:rgba(255,255,255,0.5);font-size:0.82rem;\">\u4e8c\u5341\u56db\u8282\u6c14 \u00b7 \u4e2d\u534e\u4f20\u7edf\u6587\u5316<\/p>\n <div class=\"footer-nav-row\">\n <a href=\"#intro\">\u8282\u6c14\u4ecb\u7ecd<\/a>\n <a href=\"#phenology\">\u7269\u5019\u4e09\u5019<\/a>\n <a href=\"#customs\">\u4f20\u7edf\u4e60\u4fd7<\/a>\n <a href=\"#health\">\u590f\u5b63\u517b\u751f<\/a>\n <a href=\"#poetry\">\u8bd7\u8bcd\u96c5\u97f5<\/a>\n <a href=\"#food\">\u65f6\u4ee4\u7f8e\u98df<\/a>\n <\/div>\n <p class=\"footer-small\">\u00a9 2026 \u7acb\u590f\u8282\u6c14\u4e3b\u9898\u9875 \u00b7 \u6e05\u65b0\u56fd\u98ce\u8bbe\u8ba1<\/p>\n<\/footer>\n\n\n\n<div class=\"game-modal\" id=\"gameModal\">\n <div class=\"game-modal-content\">\n <button class=\"game-modal-close\" onclick=\"closeGameModal()\">×<\/button>\n <div class=\"game-modal-body\">\n \n <div id=\"doudan-wrap\">\n <div class=\"title-bar\">\n <h1>\ud83e\udd5a \u6597\u86cb \ud83e\udd5a<\/h1>\n <div class=\"subtitle\">\u7acb\u590f\u76db\u4e8b \u00b7 \u86cb\u5934\u78b0\u86cb\u5934 \u86cb\u5c3e\u78b0\u86cb\u5c3e<\/div>\n <\/div>\n <div class=\"score-board\" id=\"doudan-scoreBoard\">\n <span>\ud83c\udfc6 \u8fde\u80dc: <b id=\"doudan-winStreak\">0<\/b><\/span>\n <span>\u2694\ufe0f \u603b\u6218: <b id=\"doudan-totalBattles\">0<\/b><\/span>\n <\/div>\n <canvas id=\"doudan-canvas\" width=\"600\" height=\"420\"><\/canvas>\n <div id=\"doudan-eggSelectArea\">\n <div style=\"text-align:center;color:#78350f;font-weight:bold;margin:8px 0 4px;\">\u9009\u62e9\u4f60\u7684\u86cb<\/div>\n <div class=\"egg-select\" id=\"doudan-eggSelect\"><\/div>\n <\/div>\n <div id=\"doudan-modeArea\" style=\"display:none;\">\n <div style=\"text-align:center;color:#78350f;font-weight:bold;margin:8px 0 4px;\">\u9009\u62e9\u78b0\u6cd5<\/div>\n <div class=\"mode-select\" id=\"doudan-modeSelect\"><\/div>\n <\/div>\n <div class=\"controls\" id=\"doudan-mainControls\">\n <button id=\"doudan-btnStart\" onclick=\"Doudan_startBattle()\">\u5f00\u6218\uff01<\/button>\n <\/div>\n <div class=\"power-hint\" id=\"doudan-powerHint\"><\/div>\n <div class=\"info-panel\" id=\"doudan-infoPanel\">\n \u4e09\u4e94\u6210\u7fa4\uff0c\u6301\u86cb\u76f8\u78b0\uff0c\u86cb\u5934\u5bf9\u86cb\u5934\u3001\u86cb\u5c3e\u5bf9\u86cb\u5c3e\uff0c\u7834\u8005\u8ba4\u8f93\u3002<br>\n \u6700\u540e\u4e0d\u7834\u7684\u86cb\u88ab\u5c01\u4e3a <b>\"\u5927\u738b\"<\/b>\uff01\n <\/div>\n <\/div>\n\n \n <div id=\"chengren-wrap\">\n <div class=\"header\">\n <h1>\u2696\ufe0f \u79f0\u4eba \u2696\ufe0f<\/h1>\n <div class=\"desc\">\u7acb\u590f\u79e4\u91cd \u00b7 \u5409\u7965\u8bdd\u795d\u798f \u00b7 \u5065\u5eb7\u6210\u957f<\/div>\n <\/div>\n <div class=\"game-area\" id=\"chengren-gameArea\">\n <canvas id=\"chengren-canvas\" width=\"600\" height=\"360\"><\/canvas>\n <div class=\"hint\" id=\"chengren-hintText\">\ud83d\udc46 \u9009\u62e9\u4e00\u4eba\uff0c\u70b9\u51fb\u300c\u4e0a\u79e4\u300d\u5f00\u59cb\u79f0\u91cd<\/div>\n <div class=\"person-select\" id=\"chengren-personSelect\"><\/div>\n <div class=\"controls\" id=\"chengren-mainControls\">\n <button id=\"chengren-btnStart\" onclick=\"Chengren_startWeigh()\">\u4e0a\u79e4<\/button>\n <\/div>\n <div class=\"result-panel\" id=\"chengren-resultPanel\" style=\"display:none;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<button class=\"back-top\" id=\"backTop\" aria-label=\"\u56de\u5230\u9876\u90e8\">\u2191<\/button>\n\n<script>\n\/* ==================== Loading ==================== *\/\nwindow.addEventListener('load', () => {\n setTimeout(() => document.getElementById('loader').classList.add('done'), 1200);\n});\n\n\/* ==================== Floating Leaves ==================== *\/\n(function createLeaves() {\n const container = document.getElementById('heroLeaves');\n const leafChars = ['\ud83c\udf43','\ud83c\udf3f','\ud83c\udf42','\ud83c\udf3e','\ud83c\udf40'];\n for (let i = 0; i < 12; i++) {\n const leaf = document.createElement('span');\n leaf.className = 'leaf';\n leaf.textContent = leafChars[Math.floor(Math.random() * leafChars.length)];\n leaf.style.left = Math.random() * 100 + '%';\n leaf.style.fontSize = (1.2 + Math.random() * 1.5) + 'rem';\n leaf.style.animationDuration = (10 + Math.random() * 15) + 's';\n leaf.style.animationDelay = (Math.random() * 12) + 's';\n leaf.style.opacity = 0.25 + Math.random() * 0.3;\n container.appendChild(leaf);\n }\n})();\n\n\/* ==================== Navigation Scroll ==================== *\/\nconst nav = document.getElementById('nav');\nconst navLinks = document.getElementById('navLinks');\nconst navToggle = document.getElementById('navToggle');\nconst backTop = document.getElementById('backTop');\nconst timeline = document.getElementById('timeline');\n\nnavToggle.addEventListener('click', () => navLinks.classList.toggle('open'));\n\nnavLinks.addEventListener('click', e => {\n if (e.target.tagName === 'A') navLinks.classList.remove('open');\n});\n\nwindow.addEventListener('scroll', () => {\n const y = window.scrollY;\n nav.classList.toggle('scrolled', y > 60);\n backTop.classList.toggle('show', y > 600);\n timeline.classList.toggle('show', y > 400 && y < document.body.scrollHeight - 800);\n}, { passive: true });\n\nbackTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n\/* ==================== Countdown to Xiaoman (\u5c0f\u6ee1) ==================== *\/\n(function updateCountdown() {\n const el = document.getElementById('countdown');\n function calc() {\n const now = new Date();\n const year = now.getFullYear();\n \/\/ \u5c0f\u6ee1 is approximately May 20-22 each year\n const xiaoman = new Date(year, 4, 21, 0, 0, 0); \/\/ May 21\n if (now > xiaoman) xiaoman.setFullYear(year + 1);\n const diff = xiaoman - now;\n const days = Math.floor(diff \/ 86400000);\n const hours = Math.floor((diff % 86400000) \/ 3600000);\n el.textContent = `\u8ddd\u5c0f\u6ee1 ${days}\u5929${hours}\u65f6`;\n }\n calc();\n setInterval(calc, 60000);\n})();\n\n\/* ==================== Reveal on Scroll ==================== *\/\nconst revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));\n\n\/* ==================== Health Tabs ==================== *\/\ndocument.querySelectorAll('.health-tab').forEach(tab => {\n tab.addEventListener('click', () => {\n document.querySelectorAll('.health-tab').forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.health-panel').forEach(p => p.classList.remove('active'));\n tab.classList.add('active');\n document.querySelector(`.health-panel[data-tab=\"${tab.dataset.tab}\"]`).classList.add('active');\n });\n});\n\n\/* ==================== Poetry Carousel ==================== *\/\nconst poems = [\n {\n dynasty: '\u5b8b',\n title: '\u7acb\u590f',\n author: '\u9646\u6e38',\n lines: ['\u8d64\u5e1d\u6536\u6625\u534a\uff0c\u52fe\u8292\u9001\u590f\u6765\u3002', '\u65e5\u70d8\u8863\u8882\u6696\uff0c\u98ce\u9001\u9ea6\u79cb\u50ac\u3002', '\u65ad\u7eed\u86d9\u58f0\u5ae9\uff0c\u7eb5\u6a2a\u71d5\u5f71\u731c\u3002', '\u4e00\u5e74\u60df\u6b64\u65e5\uff0c\u6700\u597d\u662f\u697c\u53f0\u3002']\n },\n {\n dynasty: '\u5b8b',\n title: '\u7acb\u590f\u524d\u4e8c\u65e5\u4f5c',\n author: '\u9646\u6e38',\n lines: ['\u6668\u8d77\u62ab\u8863\u51fa\u8349\u5802\uff0c\u79cb\u5343\u5f71\u91cc\u5ea6\u5e74\u5149\u3002', '\u53ea\u77e5\u6625\u5df2\u8001\uff0c\u4e0d\u4fe1\u590f\u521d\u957f\u3002', '\u6885\u5b50\u672a\u9ec4\u5148\u8457\u96e8\uff0c\u7261\u4e39\u6b32\u8c22\u66f4\u95fb\u9999\u3002', '\u4e00\u5e74\u597d\u666f\u541b\u987b\u8bb0\uff0c\u6700\u662f\u6a59\u9ec4\u6a58\u7eff\u65f6\u3002']\n },\n {\n dynasty: '\u5510',\n title: '\u521d\u590f\u5373\u4e8b',\n author: '\u767d\u5c45\u6613',\n lines: ['\u5b5f\u590f\u7231\u543e\u5e90\uff0c\u9676\u6f5c\u8bed\u4e0d\u865a\u3002', '\u82b1\u6b8b\u65e0\u620f\u8776\uff0c\u5bc6\u53f6\u6709\u9e23\u8729\u3002', '\u5e18\u5377\u659c\u9633\u5916\uff0c\u7a97\u5f00\u521d\u590f\u521d\u3002', '\u6b64\u65f6\u60c5\u7eea\u6076\uff0c\u8c01\u4e0e\u9189\u76f8\u5982\u3002']\n },\n {\n dynasty: '\u5b8b',\n title: '\u7acb\u590f',\n author: '\u8d75\u53cb\u76f4',\n lines: ['\u56db\u6708\u6e05\u548c\u96e8\u6b47\u65f6\uff0c\u69b4\u82b1\u7167\u773c\u4e00\u679d\u679d\u3002', '\u6885\u9178\u672a\u892a\u4e09\u6625\u5473\uff0c\u9ea6\u6d6a\u65b0\u7ffb\u4e94\u6708\u5947\u3002', '\u5df2\u89c9\u86d9\u58f0\u60ca\u5ba2\u68a6\uff0c\u8fd8\u601c\u71d5\u8bed\u7ed5\u6a90\u8fdf\u3002', '\u5e74\u5e74\u6b64\u65e5\u5f00\u65b0\u917f\uff0c\u4e14\u5171\u4e1c\u98ce\u9189\u4e00\u536e\u3002']\n },\n {\n dynasty: '\u660e',\n title: '\u7acb\u590f',\n author: '\u9648\u7ee7\u5112',\n lines: ['\u6885\u5b50\u9752\u9752\u674f\u5b50\u7ea2\uff0c\u9ea6\u6d6a\u7ffb\u6eda\u7eff\u9634\u4e2d\u3002', '\u95e8\u524d\u86af\u8693\u8015\u65b0\u571f\uff0c\u6c60\u4e0a\u9752\u86d9\u5531\u6653\u98ce\u3002', '\u6597\u86cb\u513f\u7ae5\u58f0\u6700\u95f9\uff0c\u79f0\u4eba\u7fc1\u5aaa\u610f\u65b9\u6d53\u3002', '\u4e00\u5e74\u5149\u666f\u6765\u65f6\u534a\uff0c\u83ab\u8d1f\u5357\u7a97\u7af9\u4e0b\u98ce\u3002']\n }\n];\n\nlet currentPoem = 0;\n\nfunction renderPoem(index) {\n const p = poems[index];\n document.getElementById('poetryDynasty').textContent = '\u3010' + p.dynasty + '\u3011';\n document.getElementById('poetryTitle').textContent = p.title;\n document.getElementById('poetryAuthor').textContent = p.author;\n document.getElementById('poetryLines').innerHTML = p.lines.map(l => '<p>' + l + '<\/p>').join('');\n document.getElementById('poetryCounter').textContent = (index + 1) + ' \/ ' + poems.length;\n}\n\ndocument.getElementById('poetryPrev').addEventListener('click', () => {\n currentPoem = (currentPoem - 1 + poems.length) % poems.length;\n renderPoem(currentPoem);\n});\n\ndocument.getElementById('poetryNext').addEventListener('click', () => {\n currentPoem = (currentPoem + 1) % poems.length;\n renderPoem(currentPoem);\n});\n\nrenderPoem(0);\n\n\/* ==================== Poetry Speak (Web Speech API) ==================== *\/\nconst speakBtn = document.getElementById('poetrySpeakBtn');\nlet speaking = false;\n\nspeakBtn.addEventListener('click', () => {\n if (speaking) {\n speechSynthesis.cancel();\n speaking = false;\n speakBtn.classList.remove('speaking');\n speakBtn.textContent = '\ud83d\udd0a \u6717\u8bfb';\n return;\n }\n const p = poems[currentPoem];\n const text = p.title + '\uff0c' + p.author + '\u3002' + p.lines.join('');\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = 'zh-CN';\n utterance.rate = 0.85;\n utterance.pitch = 1;\n utterance.onend = () => {\n speaking = false;\n speakBtn.classList.remove('speaking');\n speakBtn.textContent = '\ud83d\udd0a \u6717\u8bfb';\n };\n speechSynthesis.speak(utterance);\n speaking = true;\n speakBtn.classList.add('speaking');\n speakBtn.textContent = '\u23f9 \u505c\u6b62';\n});\n\n\/* ==================== Active Nav Link Highlight ==================== *\/\nconst sections = document.querySelectorAll('section[id]');\nconst navAnchors = document.querySelectorAll('.nav-links a');\n\nconst sectionObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const id = entry.target.id;\n navAnchors.forEach(a => {\n a.classList.toggle('active', a.getAttribute('href') === '#' + id);\n });\n }\n });\n}, { threshold: 0.25, rootMargin: '-80px 0px -40% 0px' });\n\nsections.forEach(sec => sectionObserver.observe(sec));\n\n\/* ==================== Swiper on Mobile (poetry) ==================== *\/\nlet touchStartX = 0;\nconst poetryShowcase = document.querySelector('.poetry-showcase');\n\npoetryShowcase.addEventListener('touchstart', e => {\n touchStartX = e.changedTouches[0].screenX;\n}, { passive: true });\n\npoetryShowcase.addEventListener('touchend', e => {\n const diff = e.changedTouches[0].screenX - touchStartX;\n if (Math.abs(diff) > 50) {\n if (diff > 0) {\n currentPoem = (currentPoem - 1 + poems.length) % poems.length;\n } else {\n currentPoem = (currentPoem + 1) % poems.length;\n }\n renderPoem(currentPoem);\n }\n}, { passive: true });\n<\/script>\n<script>\n\n\/* ==================== Game Modal & Game Scripts ==================== *\/\nlet _activeGameRAF = null;\n\nfunction openGameModal(game) {\n const modal = document.getElementById('gameModal');\n const doudanWrap = document.getElementById('doudan-wrap');\n const chengrenWrap = document.getElementById('chengren-wrap');\n\n \/\/ Hide both games\n doudanWrap.classList.remove('active');\n chengrenWrap.classList.remove('active');\n\n \/\/ Cancel previous animation\n if (_activeGameRAF) {\n cancelAnimationFrame(_activeGameRAF);\n _activeGameRAF = null;\n }\n\n \/\/ Show selected game\n if (game === 'doudan') {\n doudanWrap.classList.add('active');\n if (!doudanWrap.dataset.initialized) {\n Doudan_initGame();\n doudanWrap.dataset.initialized = 'true';\n } else {\n Doudan_resumeLoop();\n }\n } else if (game === 'chengren') {\n chengrenWrap.classList.add('active');\n if (!chengrenWrap.dataset.initialized) {\n Chengren_initGame();\n chengrenWrap.dataset.initialized = 'true';\n } else {\n Chengren_resumeLoop();\n }\n }\n\n modal.classList.add('active');\n document.body.style.overflow = 'hidden';\n}\n\nfunction closeGameModal() {\n const modal = document.getElementById('gameModal');\n modal.classList.remove('active');\n document.body.style.overflow = '';\n\n \/\/ Stop animation\n if (_activeGameRAF) {\n cancelAnimationFrame(_activeGameRAF);\n _activeGameRAF = null;\n }\n}\n\n\/\/ Click outside to close\ndocument.getElementById('gameModal').addEventListener('click', function(e) {\n if (e.target === this) closeGameModal();\n});\n\n\/* ==================== Doudan (\u6597\u86cb) Game ==================== *\/\n(function() {\n const canvas = document.getElementById('doudan-canvas');\n const ctx = canvas.getContext('2d');\n\n const Doudan_EGG_TYPES = [\n { id: 'chicken', name: '\u9e21\u86cb', emoji: '\ud83e\udd5a', hardness: 3, luck: 3, color: '#fef3c7', stroke: '#d97706', desc: '\u5747\u8861\u578b' },\n { id: 'duck', name: '\u9e2d\u86cb', emoji: '\ud83e\udd86', hardness: 5, luck: 2, color: '#dbeafe', stroke: '#2563eb', desc: '\u786c\u58f3\u578b' },\n { id: 'goose', name: '\u9e45\u86cb', emoji: '\ud83e\udebf', hardness: 7, luck: 1, color: '#e0e7ff', stroke: '#4f46e5', desc: '\u91cd\u88c5\u578b' },\n ];\n\n const Doudan_MODES = [\n { id: 'head', name: '\u86cb\u5934\u78b0\u86cb\u5934', icon: '\ud83d\udd1d' },\n { id: 'tail', name: '\u86cb\u5c3e\u78b0\u86cb\u5c3e', icon: '\ud83d\udd1a' },\n ];\n\n let Doudan_state = {\n phase: 'select',\n myEgg: null, enemyEgg: null, mode: null,\n power: 0, charging: false, chargeDir: 1,\n result: null, winStreak: 0, totalBattles: 0, isKing: false,\n myEggX: 150, myEggY: 240, enemyEggX: 450, enemyEggY: 240,\n collisionFrame: 0, particles: [], shakeTimer: 0,\n crackLevel: 0, enemyCrackLevel: 0,\n };\n\n let _doudanRAF = null;\n\n function Doudan_initUI() {\n const eggSelectEl = document.getElementById('doudan-eggSelect');\n Doudan_EGG_TYPES.forEach(egg => {\n const div = document.createElement('div');\n div.className = 'egg-option';\n div.dataset.id = egg.id;\n div.innerHTML = `<div class=\"egg-icon\">${egg.emoji}<\/div><div class=\"egg-label\">${egg.name}<\/div><div class=\"egg-stat\">${egg.desc}<\/div><div class=\"egg-stat\">\u786c\u5ea6${'\u2605'.repeat(egg.hardness)}${'\u2606'.repeat(8-egg.hardness)}<\/div>`;\n div.onclick = () => Doudan_selectEgg(egg.id);\n eggSelectEl.appendChild(div);\n });\n\n const modeSelectEl = document.getElementById('doudan-modeSelect');\n Doudan_MODES.forEach(mode => {\n const btn = document.createElement('button');\n btn.className = 'mode-btn';\n btn.dataset.id = mode.id;\n btn.textContent = mode.icon + ' ' + mode.name;\n btn.onclick = () => Doudan_selectMode(mode.id);\n modeSelectEl.appendChild(btn);\n });\n }\n\n function Doudan_selectEgg(id) {\n Doudan_state.myEgg = Doudan_EGG_TYPES.find(e => e.id === id);\n document.querySelectorAll('#doudan-wrap .egg-option').forEach(el => {\n el.classList.toggle('selected', el.dataset.id === id);\n });\n document.getElementById('doudan-modeArea').style.display = '';\n Doudan_drawScene();\n }\n\n function Doudan_selectMode(id) {\n Doudan_state.mode = Doudan_MODES.find(m => m.id === id);\n document.querySelectorAll('#doudan-wrap .mode-btn').forEach(el => {\n el.classList.toggle('selected', el.dataset.id === id);\n });\n }\n\n function Doudan_startBattle() {\n if (!Doudan_state.myEgg) { Doudan_showInfo('\u8bf7\u5148\u9009\u62e9\u4f60\u7684\u86cb\uff01'); return; }\n if (!Doudan_state.mode) { Doudan_showInfo('\u8bf7\u9009\u62e9\u78b0\u86cb\u65b9\u5f0f\uff01'); return; }\n\n const enemies = Doudan_EGG_TYPES.filter(e => e.id !== Doudan_state.myEgg.id);\n Doudan_state.enemyEgg = enemies[Math.floor(Math.random() * enemies.length)];\n Doudan_state.phase = 'ready';\n Doudan_state.power = 0;\n Doudan_state.charging = false;\n Doudan_state.chargeDir = 1;\n Doudan_state.result = null;\n Doudan_state.crackLevel = 0;\n Doudan_state.enemyCrackLevel = 0;\n Doudan_state.collisionFrame = 0;\n Doudan_state.particles = [];\n Doudan_state.myEggX = 150;\n Doudan_state.enemyEggX = 450;\n\n document.getElementById('doudan-eggSelectArea').style.display = 'none';\n document.getElementById('doudan-modeArea').style.display = 'none';\n document.getElementById('doudan-btnStart').style.display = 'none';\n document.getElementById('doudan-powerHint').textContent = '\u6309\u4f4f\u753b\u9762\u84c4\u529b\uff0c\u677e\u5f00\u78b0\u649e\uff01';\n Doudan_drawScene();\n }\n\n function Doudan_startCharge() {\n if (Doudan_state.phase === 'ready') {\n Doudan_state.phase = 'charging';\n Doudan_state.charging = true;\n Doudan_state.power = 0;\n Doudan_state.chargeDir = 1;\n }\n }\n\n function Doudan_releaseCharge() {\n if (Doudan_state.phase === 'charging') {\n Doudan_state.charging = false;\n Doudan_state.phase = 'colliding';\n document.getElementById('doudan-powerHint').textContent = '';\n Doudan_resolveCollision();\n }\n }\n\n canvas.addEventListener('mousedown', Doudan_startCharge);\n canvas.addEventListener('touchstart', function(e) { e.preventDefault(); Doudan_startCharge(); });\n canvas.addEventListener('mouseup', Doudan_releaseCharge);\n canvas.addEventListener('touchend', function(e) { e.preventDefault(); Doudan_releaseCharge(); });\n canvas.addEventListener('mouseleave', Doudan_releaseCharge);\n\n function Doudan_resolveCollision() {\n const myPower = Doudan_state.power;\n const myHardness = Doudan_state.myEgg.hardness;\n const myLuck = Doudan_state.myEgg.luck;\n const enemyPower = 30 + Math.random() * 60;\n const enemyHardness = Doudan_state.enemyEgg.hardness;\n const enemyLuck = Doudan_state.enemyEgg.luck;\n\n const myScore = myPower * 0.6 + myHardness * 8 + myLuck * (5 + Math.random() * 10);\n const enemyScore = enemyPower * 0.6 + enemyHardness * 8 + enemyLuck * (5 + Math.random() * 10);\n\n let result;\n if (Math.abs(myScore - enemyScore) < 8) result = 'draw';\n else if (myScore > enemyScore) result = 'win';\n else result = 'lose';\n\n Doudan_state.result = result;\n Doudan_state.totalBattles++;\n\n if (result === 'win') { Doudan_state.winStreak++; Doudan_state.enemyCrackLevel = 3; }\n else if (result === 'lose') { Doudan_state.winStreak = 0; Doudan_state.crackLevel = 3; }\n else { Doudan_state.crackLevel = 1; Doudan_state.enemyCrackLevel = 1; }\n\n Doudan_state.isKing = Doudan_state.winStreak >= 5;\n\n const cx = 300, cy = 220;\n for (let i = 0; i < 25; i++) {\n const angle = Math.random() * Math.PI * 2;\n const speed = 1.5 + Math.random() * 4;\n Doudan_state.particles.push({\n x: cx, y: cy,\n vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed - 2,\n life: 40 + Math.random() * 30, maxLife: 70,\n size: 2 + Math.random() * 4,\n color: result === 'win' ? '#fbbf24' : result === 'lose' ? '#ef4444' : '#a3a3a3',\n });\n }\n setTimeout(() => Doudan_showResult(result), 1200);\n }\n\n function Doudan_showResult(result) {\n const panel = document.getElementById('doudan-infoPanel');\n if (result === 'win') {\n panel.innerHTML = '\ud83d\udca5 <b>\u4f60\u8d62\u4e86\uff01<\/b> \u5bf9\u624b\u7684' + Doudan_state.enemyEgg.name + '\u788e\u4e86\uff01<br>' +\n (Doudan_state.isKing ? '<div class=\"king\">\ud83d\udc51 \u4f60\u7684\u86cb\u88ab\u5c01\u4e3a\"\u5927\u738b\"\uff01\ud83d\udc51<\/div>' :\n '\u8fde\u80dc ' + Doudan_state.winStreak + ' \u573a' + (Doudan_state.winStreak >= 3 ? '\uff0c\u79bb\u5927\u738b\u53ea\u5dee ' + (5 - Doudan_state.winStreak) + ' \u573a\uff01' : ''));\n } else if (result === 'lose') {\n panel.innerHTML = '\ud83d\udc94 <b>\u4f60\u7684' + Doudan_state.myEgg.name + '\u788e\u4e86\uff01<\/b> \u8fde\u80dc\u4e2d\u65ad\u3002<br>\u518d\u63a5\u518d\u5389\uff01';\n } else {\n panel.innerHTML = '\ud83e\udd1d <b>\u5e73\u5c40\uff01<\/b> \u4e24\u4e2a\u86cb\u90fd\u88c2\u4e86\uff0c\u4f46\u6ca1\u788e\u3002<br>\u52bf\u5747\u529b\u654c\uff01';\n }\n Doudan_state.phase = 'result';\n document.getElementById('doudan-winStreak').textContent = Doudan_state.winStreak;\n document.getElementById('doudan-totalBattles').textContent = Doudan_state.totalBattles;\n\n const ctrl = document.getElementById('doudan-mainControls');\n ctrl.innerHTML = '';\n const btnAgain = document.createElement('button');\n btnAgain.textContent = '\u518d\u6765\u4e00\u5c40\uff01';\n btnAgain.onclick = Doudan_resetBattle;\n ctrl.appendChild(btnAgain);\n const btnReset = document.createElement('button');\n btnReset.textContent = '\u91cd\u65b0\u9009\u86cb';\n btnReset.onclick = Doudan_fullReset;\n ctrl.appendChild(btnReset);\n }\n\n function Doudan_resetBattle() {\n Doudan_state.phase = 'ready';\n Doudan_state.power = 0;\n Doudan_state.result = null;\n Doudan_state.crackLevel = 0;\n Doudan_state.enemyCrackLevel = 0;\n Doudan_state.collisionFrame = 0;\n Doudan_state.particles = [];\n Doudan_state.myEggX = 150;\n Doudan_state.enemyEggX = 450;\n Doudan_state.mode = null;\n\n document.getElementById('doudan-mainControls').innerHTML = '';\n document.getElementById('doudan-powerHint').textContent = '\u6309\u4f4f\u753b\u9762\u84c4\u529b\uff0c\u677e\u5f00\u78b0\u649e\uff01';\n Doudan_showInfo('\u7ee7\u7eed\u7528' + Doudan_state.myEgg.name + '\u6218\u6597\uff01\u9009\u62e9\u78b0\u6cd5\uff1a');\n document.getElementById('doudan-eggSelectArea').style.display = 'none';\n document.getElementById('doudan-modeArea').style.display = '';\n document.querySelectorAll('#doudan-wrap .mode-btn').forEach(el => el.classList.remove('selected'));\n\n const ctrl = document.getElementById('doudan-mainControls');\n const btn = document.createElement('button');\n btn.id = 'doudan-btnStart';\n btn.textContent = '\u5f00\u6218\uff01';\n btn.onclick = Doudan_startBattle;\n ctrl.appendChild(btn);\n Doudan_drawScene();\n }\n\n function Doudan_fullReset() {\n Doudan_state.phase = 'select';\n Doudan_state.myEgg = null;\n Doudan_state.enemyEgg = null;\n Doudan_state.mode = null;\n Doudan_state.power = 0;\n Doudan_state.result = null;\n Doudan_state.crackLevel = 0;\n Doudan_state.enemyCrackLevel = 0;\n Doudan_state.collisionFrame = 0;\n Doudan_state.particles = [];\n Doudan_state.winStreak = 0;\n\n document.getElementById('doudan-eggSelectArea').style.display = '';\n document.getElementById('doudan-modeArea').style.display = 'none';\n document.querySelectorAll('#doudan-wrap .egg-option').forEach(el => el.classList.remove('selected'));\n document.querySelectorAll('#doudan-wrap .mode-btn').forEach(el => el.classList.remove('selected'));\n\n const ctrl = document.getElementById('doudan-mainControls');\n ctrl.innerHTML = '<button id=\"doudan-btnStart\" onclick=\"Doudan_startBattle()\">\u5f00\u6218\uff01<\/button>';\n document.getElementById('doudan-powerHint').textContent = '';\n Doudan_showInfo('\u4e09\u4e94\u6210\u7fa4\uff0c\u6301\u86cb\u76f8\u78b0\uff0c\u86cb\u5934\u5bf9\u86cb\u5934\u3001\u86cb\u5c3e\u78b0\u86cb\u5c3e\uff0c\u7834\u8005\u8ba4\u8f93\u3002<br>\u6700\u540e\u4e0d\u7834\u7684\u86cb\u88ab\u5c01\u4e3a <b>\"\u5927\u738b\"<\/b>\uff01');\n document.getElementById('doudan-winStreak').textContent = 0;\n document.getElementById('doudan-totalBattles').textContent = Doudan_state.totalBattles;\n Doudan_drawScene();\n }\n\n function Doudan_showInfo(html) {\n document.getElementById('doudan-infoPanel').innerHTML = html;\n }\n\n function Doudan_drawScene() {\n ctx.clearRect(0, 0, 600, 420);\n const bgGrad = ctx.createLinearGradient(0, 0, 0, 420);\n bgGrad.addColorStop(0, '#fef9c3');\n bgGrad.addColorStop(1, '#fde68a');\n ctx.fillStyle = bgGrad;\n ctx.fillRect(0, 0, 600, 420);\n ctx.fillStyle = '#d4a76a';\n ctx.fillRect(0, 340, 600, 80);\n ctx.fillStyle = '#c4956a';\n for (let i = 0; i < 600; i += 40) ctx.fillRect(i, 340, 20, 80);\n\n if (Doudan_state.phase === 'select') {\n ctx.fillStyle = '#92400e';\n ctx.font = 'bold 28px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\ud83e\udd5a \u9009\u62e9\u4f60\u7684\u86cb\uff0c\u5f00\u6218\uff01', 300, 200);\n ctx.font = '18px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.fillStyle = '#b45309';\n ctx.fillText('\u4e0d\u540c\u86cb\u6709\u4e0d\u540c\u5c5e\u6027\u54e6~', 300, 235);\n return;\n }\n\n let shakeX = 0, shakeY = 0;\n if (Doudan_state.shakeTimer > 0) {\n shakeX = (Math.random() - 0.5) * Doudan_state.shakeTimer * 2;\n shakeY = (Math.random() - 0.5) * Doudan_state.shakeTimer * 2;\n Doudan_state.shakeTimer -= 0.5;\n }\n ctx.save();\n ctx.translate(shakeX, shakeY);\n\n if (Doudan_state.myEgg) {\n Doudan_drawEgg(Doudan_state.myEggX, Doudan_state.myEggY, Doudan_state.myEgg, Doudan_state.crackLevel, false);\n ctx.fillStyle = '#78350f';\n ctx.font = 'bold 14px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\u4f60', Doudan_state.myEggX, Doudan_state.myEggY + 70);\n }\n if (Doudan_state.enemyEgg) {\n Doudan_drawEgg(Doudan_state.enemyEggX, Doudan_state.enemyEggY, Doudan_state.enemyEgg, Doudan_state.enemyCrackLevel, true);\n ctx.fillStyle = '#78350f';\n ctx.font = 'bold 14px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\u5bf9\u624b', Doudan_state.enemyEggX, Doudan_state.enemyEggY + 70);\n }\n\n if (Doudan_state.mode && (Doudan_state.phase === 'ready' || Doudan_state.phase === 'charging')) {\n ctx.fillStyle = '#92400e';\n ctx.font = 'bold 16px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText(Doudan_state.mode.icon + ' ' + Doudan_state.mode.name, 300, 50);\n }\n\n if (Doudan_state.phase === 'charging' || Doudan_state.phase === 'ready') {\n Doudan_drawPowerBar();\n }\n\n if (Doudan_state.phase === 'colliding') {\n Doudan_drawCollisionEffect();\n }\n\n Doudan_drawParticles();\n\n if (Doudan_state.phase === 'result' && Doudan_state.result) {\n ctx.fillStyle = 'rgba(0,0,0,0.3)';\n ctx.fillRect(0, 0, 600, 420);\n ctx.fillStyle = '#fff';\n ctx.font = 'bold 36px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.shadowColor = 'rgba(0,0,0,0.5)';\n ctx.shadowBlur = 8;\n if (Doudan_state.result === 'win') ctx.fillText('\ud83c\udf89 \u80dc\uff01', 300, 210);\n else if (Doudan_state.result === 'lose') ctx.fillText('\ud83d\udc94 \u8d25\uff01', 300, 210);\n else ctx.fillText('\ud83e\udd1d \u5e73\uff01', 300, 210);\n ctx.shadowBlur = 0;\n }\n\n ctx.restore();\n }\n\n function Doudan_drawEgg(x, y, eggType, crackLevel, flipped) {\n ctx.save();\n ctx.translate(x, y);\n ctx.beginPath();\n ctx.ellipse(0, 0, 32, 44, 0, 0, Math.PI * 2);\n const grad = ctx.createRadialGradient(-8, -10, 4, 0, 0, 44);\n grad.addColorStop(0, '#ffffff');\n grad.addColorStop(0.5, eggType.color);\n grad.addColorStop(1, eggType.stroke);\n ctx.fillStyle = grad;\n ctx.fill();\n ctx.strokeStyle = eggType.stroke;\n ctx.lineWidth = 2;\n ctx.stroke();\n\n if (Doudan_state.mode) {\n ctx.fillStyle = eggType.stroke;\n ctx.font = 'bold 12px sans-serif';\n ctx.textAlign = 'center';\n if (Doudan_state.mode.id === 'head') ctx.fillText('\u5934', 0, -36);\n else ctx.fillText('\u5c3e', 0, 42);\n }\n\n if (crackLevel > 0) {\n ctx.strokeStyle = '#78350f';\n ctx.lineWidth = 1.5;\n const cracks = [[[-5,-20],[0,-5],[8,10]],[[3,-15],[10,0],[5,20]],[[-10,0],[0,5],[10,15]]];\n for (let i = 0; i < Math.min(crackLevel, cracks.length); i++) {\n ctx.beginPath();\n ctx.moveTo(cracks[i][0][0], cracks[i][0][1]);\n for (let j = 1; j < cracks[i].length; j++) ctx.lineTo(cracks[i][j][0], cracks[i][j][1]);\n ctx.stroke();\n }\n if (crackLevel >= 3) {\n ctx.fillStyle = 'rgba(120,53,15,0.15)';\n ctx.fill();\n }\n }\n ctx.restore();\n }\n\n function Doudan_drawPowerBar() {\n const barX = 200, barY = 370, barW = 200, barH = 20;\n ctx.fillStyle = 'rgba(255,255,255,0.7)';\n ctx.fillRect(barX, barY, barW, barH);\n ctx.strokeStyle = '#92400e';\n ctx.lineWidth = 2;\n ctx.strokeRect(barX, barY, barW, barH);\n const pw = (Doudan_state.power \/ 100) * barW;\n const pGrad = ctx.createLinearGradient(barX, 0, barX + barW, 0);\n pGrad.addColorStop(0, '#22c55e');\n pGrad.addColorStop(0.5, '#fbbf24');\n pGrad.addColorStop(1, '#ef4444');\n ctx.fillStyle = pGrad;\n ctx.fillRect(barX, barY, pw, barH);\n ctx.fillStyle = '#78350f';\n ctx.font = 'bold 12px sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\u529b\u5ea6: ' + Math.round(Doudan_state.power) + '%', 300, barY + 15);\n }\n\n function Doudan_drawCollisionEffect() {\n Doudan_state.collisionFrame++;\n const progress = Math.min(Doudan_state.collisionFrame \/ 30, 1);\n const targetX = 300;\n Doudan_state.myEggX = 150 + (targetX - 150) * Math.min(progress * 1.5, 1);\n Doudan_state.enemyEggX = 450 - (450 - targetX) * Math.min(progress * 1.5, 1);\n if (progress >= 0.7 && Doudan_state.shakeTimer === 0) Doudan_state.shakeTimer = 12;\n if (progress >= 0.65 && progress < 0.75) {\n ctx.fillStyle = '#fbbf24';\n ctx.font = (28 + Math.random() * 10) + 'px sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\ud83d\udca5', 300, 230);\n }\n }\n\n function Doudan_drawParticles() {\n Doudan_state.particles = Doudan_state.particles.filter(p => p.life > 0);\n Doudan_state.particles.forEach(p => {\n p.x += p.vx; p.y += p.vy; p.vy += 0.12; p.life--;\n const alpha = p.life \/ p.maxLife;\n ctx.fillStyle = p.color;\n ctx.globalAlpha = alpha;\n ctx.fillRect(p.x - p.size\/2, p.y - p.size\/2, p.size, p.size);\n ctx.globalAlpha = 1;\n });\n }\n\n function Doudan_gameLoop() {\n if (Doudan_state.charging) {\n Doudan_state.power += Doudan_state.chargeDir * 1.8;\n if (Doudan_state.power >= 100) { Doudan_state.power = 100; Doudan_state.chargeDir = -1; }\n if (Doudan_state.power <= 0) { Doudan_state.power = 0; Doudan_state.chargeDir = 1; }\n }\n Doudan_drawScene();\n _doudanRAF = requestAnimationFrame(Doudan_gameLoop);\n }\n\n window.Doudan_initGame = function() {\n Doudan_initUI();\n Doudan_gameLoop();\n };\n\n window.Doudan_startBattle = Doudan_startBattle;\n window.Doudan_resumeLoop = function() {\n if (!_doudanRAF) Doudan_gameLoop();\n };\n})();\n\n\/* ==================== Chengren (\u79f0\u4eba) Game ==================== *\/\n(function() {\n const Chengren_PEOPLE = [\n { id: 'grandpa', name: '\u7237\u7237', emoji: '\ud83d\udc74', baseWeight: 68, role: '\u8001\u4eba' },\n { id: 'grandma', name: '\u5976\u5976', emoji: '\ud83d\udc75', baseWeight: 58, role: '\u8001\u4eba' },\n { id: 'papa', name: '\u7238\u7238', emoji: '\ud83d\udc68', baseWeight: 75, role: '\u4e2d\u5e74' },\n { id: 'mama', name: '\u5988\u5988', emoji: '\ud83d\udc69', baseWeight: 55, role: '\u4e2d\u5e74' },\n { id: 'kid', name: '\u5c0f\u5b69', emoji: '\ud83d\udc66', baseWeight: 32, role: '\u5c0f\u5b69' },\n ];\n\n const Chengren_LUCKY_WORDS = {\n '\u8001\u4eba': ['\u5bff\u6bd4\u5357\u5c71\uff0c\u798f\u5982\u4e1c\u6d77\uff01', '\u8eab\u9aa8\u786c\u6717\uff0c\u8d8a\u6d3b\u8d8a\u7cbe\u795e\uff01', '\u798f\u6c14\u6ee1\u6ee1\uff0c\u513f\u5b59\u6ee1\u5802\uff01', '\u9e64\u53d1\u7ae5\u989c\uff0c\u677e\u67cf\u5e38\u9752\uff01'],\n '\u4e2d\u5e74': ['\u8eab\u4f53\u7ed3\u5b9e\uff0c\u4e8b\u4e1a\u987a\u5229\uff01', '\u5065\u5eb7\u5e73\u5b89\uff0c\u5bb6\u5ead\u548c\u7766\uff01', '\u7cbe\u529b\u5145\u6c9b\uff0c\u4e07\u4e8b\u5982\u610f\uff01', '\u7a33\u5982\u6cf0\u5c71\uff0c\u4e8b\u4e1a\u6709\u6210\uff01'],\n '\u5c0f\u5b69': ['\u5feb\u9ad8\u957f\u5927\uff0c\u5b66\u4e1a\u8fdb\u6b65\uff01', '\u806a\u660e\u4f36\u4fd0\uff0c\u5065\u5eb7\u6210\u957f\uff01', '\u6d3b\u6cfc\u53ef\u7231\uff0c\u524d\u7a0b\u4f3c\u9526\uff01', '\u8301\u58ee\u6210\u957f\uff0c\u6b65\u6b65\u9ad8\u5347\uff01']\n };\n\n let Chengren_state = {\n phase: 'select',\n currentPerson: null, weights: {},\n targetWeight: 0, scalePos: 0, currentWeight: 0,\n balanceTimer: 0, isBalanced: false,\n swingAngle: 0, swingVel: 0,\n };\n\n const canvas = document.getElementById('chengren-canvas');\n const ctx = canvas.getContext('2d');\n let _chengrenRAF = null;\n let dragging = false;\n\n function Chengren_init() {\n const el = document.getElementById('chengren-personSelect');\n Chengren_PEOPLE.forEach(p => {\n const div = document.createElement('div');\n div.className = 'person-card';\n div.dataset.id = p.id;\n div.innerHTML = '<div class=\"avatar\">' + p.emoji + '<\/div><div class=\"name\">' + p.name + '<\/div><div class=\"weight\" id=\"chengren-w-' + p.id + '\">--\u65a4<\/div>';\n div.onclick = () => Chengren_selectPerson(p.id);\n el.appendChild(div);\n });\n }\n\n function Chengren_selectPerson(id) {\n if (Chengren_state.weights[id] !== undefined) return;\n document.querySelectorAll('#chengren-wrap .person-card').forEach(el => {\n el.classList.toggle('selected', el.dataset.id === id && !el.classList.contains('done'));\n });\n Chengren_state.currentPerson = Chengren_PEOPLE.find(p => p.id === id);\n if (Chengren_state.currentPerson) {\n document.getElementById('chengren-hintText').textContent = Chengren_state.currentPerson.name + ' \u51c6\u5907\u4e0a\u79e4...';\n }\n }\n\n function Chengren_startWeigh() {\n if (!Chengren_state.currentPerson) {\n document.getElementById('chengren-hintText').textContent = '\ud83d\udc46 \u8bf7\u5148\u9009\u62e9\u4e00\u4eba\uff01';\n return;\n }\n if (Chengren_state.weights[Chengren_state.currentPerson.id] !== undefined) {\n document.getElementById('chengren-hintText').textContent = '\u6b64\u4eba\u5df2\u79f0\u8fc7\uff01';\n return;\n }\n Chengren_state.phase = 'weighing';\n Chengren_state.targetWeight = Math.round(Chengren_state.currentPerson.baseWeight * 2 * (0.92 + Math.random() * 0.16));\n Chengren_state.scalePos = 20 + Math.random() * 60;\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n Chengren_state.isBalanced = false;\n Chengren_state.swingAngle = 0;\n Chengren_state.swingVel = 0;\n document.getElementById('chengren-hintText').textContent = '\ud83c\udfaf \u62d6\u52a8\u79e4\u7823\u6216\u6309 \u2190 \u2192 \u8c03\u6574\uff0c\u8ba9\u79e4\u6746\u5e73\u8861';\n document.getElementById('chengren-btnStart').disabled = true;\n document.getElementById('chengren-resultPanel').style.display = 'none';\n }\n\n function Chengren_calcWeight(pos) {\n return Math.round(40 + pos * 1.4);\n }\n\n canvas.addEventListener('mousedown', function(e) { if (Chengren_state.phase === 'weighing') { dragging = true; Chengren_handleInput(e); } });\n canvas.addEventListener('mousemove', function(e) { if (dragging && Chengren_state.phase === 'weighing') Chengren_handleInput(e); });\n canvas.addEventListener('mouseup', function() { dragging = false; });\n canvas.addEventListener('mouseleave', function() { dragging = false; });\n canvas.addEventListener('touchstart', function(e) { e.preventDefault(); if (Chengren_state.phase === 'weighing') { dragging = true; Chengren_handleTouch(e); } });\n canvas.addEventListener('touchmove', function(e) { e.preventDefault(); if (dragging && Chengren_state.phase === 'weighing') Chengren_handleTouch(e); });\n canvas.addEventListener('touchend', function() { dragging = false; });\n\n function Chengren_handleInput(e) {\n const rect = canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) \/ rect.width * canvas.width;\n Chengren_state.scalePos = Math.max(0, Math.min(100, (x - 120) \/ 3.6));\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n }\n\n function Chengren_handleTouch(e) {\n const touch = e.touches[0];\n const rect = canvas.getBoundingClientRect();\n const x = (touch.clientX - rect.left) \/ rect.width * canvas.width;\n Chengren_state.scalePos = Math.max(0, Math.min(100, (x - 120) \/ 3.6));\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n }\n\n document.addEventListener('keydown', function(e) {\n if (Chengren_state.phase !== 'weighing') return;\n if (e.key === 'ArrowLeft' || e.key === 'a') Chengren_state.scalePos = Math.max(0, Chengren_state.scalePos - 2);\n else if (e.key === 'ArrowRight' || e.key === 'd') Chengren_state.scalePos = Math.min(100, Chengren_state.scalePos + 2);\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n });\n\n function Chengren_draw() {\n ctx.clearRect(0, 0, 600, 360);\n const bg = ctx.createLinearGradient(0, 0, 0, 360);\n bg.addColorStop(0, '#fef9c3');\n bg.addColorStop(1, '#fde68a');\n ctx.fillStyle = bg;\n ctx.fillRect(0, 0, 600, 360);\n ctx.fillStyle = '#d4a76a';\n ctx.fillRect(0, 300, 600, 60);\n ctx.fillStyle = '#c4956a';\n for (let i = 0; i < 600; i += 28) ctx.fillRect(i, 300, 14, 60);\n\n if (Chengren_state.phase === 'weighing') Chengren_drawWeighing();\n else Chengren_drawIdleScale();\n\n _chengrenRAF = requestAnimationFrame(Chengren_draw);\n }\n\n function Chengren_drawIdleScale() {\n ctx.save();\n ctx.translate(300, 120);\n ctx.fillStyle = '#78350f';\n ctx.fillRect(-8, -50, 16, 50);\n ctx.beginPath();\n ctx.arc(0, -50, 20, 0, Math.PI, true);\n ctx.fill();\n ctx.fillStyle = '#a16207';\n ctx.fillRect(-180, -4, 360, 8);\n ctx.fillStyle = '#78350f';\n ctx.beginPath();\n ctx.arc(-180, 0, 6, 0, Math.PI * 2);\n ctx.arc(180, 0, 6, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = '#44403c';\n ctx.beginPath();\n ctx.arc(140, 0, 14, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n ctx.fillStyle = '#92400e';\n ctx.font = '18px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\ud83d\udc46 \u9009\u62e9\u89d2\u8272\uff0c\u4e0a\u79e4\u79f0\u91cd\uff01', 300, 260);\n }\n\n function Chengren_drawWeighing() {\n ctx.save();\n ctx.translate(300, 100);\n const diff = Chengren_state.currentWeight - Chengren_state.targetWeight;\n const targetAngle = Math.max(-0.25, Math.min(0.25, diff * 0.006));\n Chengren_state.swingVel += (targetAngle - Chengren_state.swingAngle) * 0.08;\n Chengren_state.swingVel *= 0.88;\n Chengren_state.swingAngle += Chengren_state.swingVel;\n\n ctx.fillStyle = '#78350f';\n ctx.fillRect(-8, -45, 16, 45);\n ctx.beginPath();\n ctx.arc(0, -45, 18, 0, Math.PI, true);\n ctx.fill();\n ctx.fillStyle = '#a16207';\n ctx.fillRect(-4, -45, 8, 20);\n\n ctx.save();\n ctx.rotate(Chengren_state.swingAngle);\n const grad = ctx.createLinearGradient(-180, -4, -180, 4);\n grad.addColorStop(0, '#b45309');\n grad.addColorStop(1, '#78350f');\n ctx.fillStyle = grad;\n ctx.fillRect(-180, -4, 360, 8);\n ctx.fillStyle = '#fef3c7';\n for (let i = -160; i <= 160; i += 20) ctx.fillRect(i, -4, 1, 8);\n ctx.fillStyle = '#fff';\n for (let i = -160; i <= 160; i += 60) ctx.fillRect(i, -4, 2, 8);\n\n ctx.fillStyle = '#78350f';\n ctx.beginPath();\n ctx.arc(-175, 0, 8, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = '#a16207';\n ctx.fillRect(-179, 8, 8, 55);\n ctx.fillStyle = '#d97706';\n ctx.beginPath();\n ctx.ellipse(-175, 70, 50, 15, 0, 0, Math.PI);\n ctx.fill();\n ctx.fillRect(-225, 58, 100, 12);\n ctx.font = '34px sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText(Chengren_state.currentPerson.emoji, -175, 50);\n\n const chuX = -120 + Chengren_state.scalePos * 3.6;\n ctx.fillStyle = '#44403c';\n ctx.beginPath();\n ctx.arc(chuX, 0, 15, 0, Math.PI * 2);\n ctx.fill();\n ctx.strokeStyle = '#1c1917';\n ctx.lineWidth = 2;\n ctx.stroke();\n ctx.strokeStyle = '#a16207';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(chuX, -15);\n ctx.lineTo(chuX, -25);\n ctx.stroke();\n\n ctx.restore();\n ctx.restore();\n\n ctx.fillStyle = '#dc2626';\n ctx.font = 'bold 36px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText(Chengren_state.currentWeight + ' \u65a4', 300, 265);\n\n const isNearBalance = Math.abs(Chengren_state.currentWeight - Chengren_state.targetWeight) <= 2;\n if (isNearBalance) {\n Chengren_state.balanceTimer++;\n const balanceProgress = Math.min(Chengren_state.balanceTimer \/ 40, 1);\n ctx.fillStyle = 'rgba(22, 163, 74, ' + balanceProgress + ')';\n ctx.font = 'bold 20px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.fillText('\u2713 \u5e73\u8861\u4e2d...', 300, 295);\n ctx.fillStyle = 'rgba(22, 163, 74, 0.3)';\n ctx.fillRect(200, 305, 200, 8);\n ctx.fillStyle = '#16a34a';\n ctx.fillRect(200, 305, 200 * balanceProgress, 8);\n if (Chengren_state.balanceTimer >= 40 && !Chengren_state.isBalanced) {\n Chengren_state.isBalanced = true;\n setTimeout(Chengren_finishWeigh, 300);\n }\n } else {\n ctx.fillStyle = '#b45309';\n ctx.font = '14px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.fillText(diff > 0 ? '\u2190 \u592a\u91cd\u4e86\uff0c\u5f80\u5de6\u79fb' : '\u2192 \u592a\u8f7b\u4e86\uff0c\u5f80\u53f3\u79fb', 300, 290);\n }\n }\n\n function Chengren_finishWeigh() {\n if (Chengren_state.phase !== 'weighing') return;\n Chengren_state.phase = 'done';\n const role = Chengren_state.currentPerson.role;\n const luckyWord = Chengren_LUCKY_WORDS[role][Math.floor(Math.random() * Chengren_LUCKY_WORDS[role].length)];\n const lastYear = Math.round(Chengren_state.currentPerson.baseWeight * 2 * (0.90 + Math.random() * 0.20));\n const change = Chengren_state.currentWeight - lastYear;\n Chengren_state.weights[Chengren_state.currentPerson.id] = { weight: Chengren_state.currentWeight, change: change, luckyWord: luckyWord };\n\n document.getElementById('chengren-w-' + Chengren_state.currentPerson.id).textContent = Chengren_state.currentWeight + '\u65a4';\n const card = document.querySelector('#chengren-wrap .person-card[data-id=\"' + Chengren_state.currentPerson.id + '\"]');\n card.classList.remove('selected');\n card.classList.add('done');\n\n const panel = document.getElementById('chengren-resultPanel');\n panel.style.display = '';\n panel.innerHTML = '<div class=\"weight-display\">' + Chengren_state.currentPerson.emoji + ' ' + Chengren_state.currentWeight + '\u65a4<\/div>' +\n '<div class=\"lucky-word\">\"' + luckyWord + '\"<\/div>' +\n '<div class=\"change ' + (change > 0 ? 'up' : change < 0 ? 'down' : '') + '\">\u4e0e\u53bb\u5e74\u76f8\u6bd4\uff1a' +\n (change > 0 ? '\u2191' + change : change < 0 ? '\u2193' + (-change) : '\u6301\u5e73') + ' \u65a4' +\n (change < -3 ? ' \u26a0\ufe0f \u6ce8\u610f\u8425\u517b\uff0c\u9884\u9632\u6d88\u7626\uff01' : '') + '<\/div>';\n\n const ctrl = document.getElementById('chengren-mainControls');\n ctrl.innerHTML = '';\n if (Object.keys(Chengren_state.weights).length < Chengren_PEOPLE.length) {\n const btnNext = document.createElement('button');\n btnNext.textContent = '\u7ee7\u7eed\u79f0\u91cd';\n btnNext.onclick = Chengren_continueWeigh;\n ctrl.appendChild(btnNext);\n }\n const btnSummary = document.createElement('button');\n btnSummary.textContent = '\u67e5\u770b\u6c47\u603b';\n btnSummary.className = 'secondary';\n btnSummary.onclick = Chengren_showSummary;\n ctrl.appendChild(btnSummary);\n const btnReset = document.createElement('button');\n btnReset.textContent = '\u91cd\u65b0\u5f00\u59cb';\n btnReset.className = 'secondary';\n btnReset.onclick = Chengren_resetAll;\n ctrl.appendChild(btnReset);\n\n document.getElementById('chengren-hintText').textContent = '\u2713 \u79f0\u91cd\u5b8c\u6210\uff01';\n Chengren_state.currentPerson = null;\n if (Object.keys(Chengren_state.weights).length >= Chengren_PEOPLE.length) Chengren_showSummary();\n }\n\n function Chengren_continueWeigh() {\n Chengren_state.phase = 'select';\n Chengren_state.currentPerson = null;\n document.getElementById('chengren-resultPanel').style.display = 'none';\n document.getElementById('chengren-hintText').textContent = '\ud83d\udc46 \u9009\u62e9\u4e0b\u4e00\u4eba\u7ee7\u7eed\u79f0\u91cd';\n const ctrl = document.getElementById('chengren-mainControls');\n ctrl.innerHTML = '<button id=\"chengren-btnStart\" onclick=\"Chengren_startWeigh()\">\u4e0a\u79e4<\/button>';\n }\n\n function Chengren_showSummary() {\n const old = document.querySelector('#chengren-wrap .summary-panel');\n if (old) old.remove();\n const panel = document.createElement('div');\n panel.className = 'summary-panel';\n const totalWeight = Chengren_PEOPLE.reduce((sum, p) => {\n const w = Chengren_state.weights[p.id];\n return sum + (w ? w.weight : 0);\n }, 0);\n panel.innerHTML = '<h3>\ud83c\udfc6 \u79f0\u4eba\u6c47\u603b<\/h3><table class=\"summary-table\"><tr><th>\u59d3\u540d<\/th><th>\u4f53\u91cd<\/th><th>\u53d8\u5316<\/th><th>\u795d\u798f\u8bed<\/th><\/tr>' +\n Chengren_PEOPLE.map(p => {\n const w = Chengren_state.weights[p.id];\n if (!w) return '<tr><td>' + p.emoji + p.name + '<\/td><td colspan=\"3\" style=\"color:#a16207\">\u672a\u79f0\u91cd<\/td><\/tr>';\n return '<tr><td>' + p.emoji + p.name + '<\/td><td><b>' + w.weight + '<\/b>\u65a4<\/td>' +\n '<td style=\"color:' + (w.change > 0 ? '#16a34a' : w.change < 0 ? '#dc2626' : '#78350f') + '\">' +\n (w.change > 0 ? '\u2191' + w.change : w.change < 0 ? '\u2193' + (-w.change) : '\u2014') + '<\/td>' +\n '<td style=\"font-size:0.8em\">' + w.luckyWord.slice(0, 7) + '...<\/td><\/tr>';\n }).join('') +\n '<\/table><div style=\"text-align:center;margin-top:8px;color:#78350f;font-size:0.9em\">\u5168\u5bb6\u603b\u91cd\uff1a<b>' + totalWeight + '<\/b> \u65a4<\/div>' +\n '<div class=\"final-msg\">' + (Object.keys(Chengren_state.weights).length >= Chengren_PEOPLE.length ?\n '\ud83c\udf89 \u5168\u5bb6\u79f0\u91cd\u5b8c\u6210\uff0c\u8eab\u4f53\u5065\u5eb7\uff0c\u7acb\u590f\u5b89\u5eb7\uff01' :\n '\ud83d\udc46 \u8fd8\u6709 ' + (Chengren_PEOPLE.length - Object.keys(Chengren_state.weights).length) + ' \u4eba\u672a\u79f0\u91cd') + '<\/div>';\n document.querySelector('#chengren-wrap .game-area').appendChild(panel);\n document.getElementById('chengren-hintText').textContent = '\u7acb\u590f\u4e60\u4fd7\u5b8c\u6210\uff01\u613f\u5927\u5bb6\u5065\u5eb7\u5e73\u5b89\uff0c\u75b0\u590f\u4e0d\u7626\uff01';\n }\n\n function Chengren_resetAll() {\n Chengren_state = {\n phase: 'select', currentPerson: null, weights: {},\n targetWeight: 0, scalePos: 0, currentWeight: 0,\n balanceTimer: 0, isBalanced: false,\n swingAngle: 0, swingVel: 0,\n };\n document.querySelectorAll('#chengren-wrap .person-card').forEach(el => el.classList.remove('selected', 'done'));\n Chengren_PEOPLE.forEach(p => {\n const el = document.getElementById('chengren-w-' + p.id);\n if (el) el.textContent = '--\u65a4';\n });\n document.getElementById('chengren-resultPanel').style.display = 'none';\n const oldSummary = document.querySelector('#chengren-wrap .summary-panel');\n if (oldSummary) oldSummary.remove();\n const ctrl = document.getElementById('chengren-mainControls');\n ctrl.innerHTML = '<button id=\"chengren-btnStart\" onclick=\"Chengren_startWeigh()\">\u4e0a\u79e4<\/button>';\n document.getElementById('chengren-hintText').textContent = '\ud83d\udc46 \u9009\u62e9\u4e00\u4eba\uff0c\u70b9\u51fb\u300c\u4e0a\u79e4\u300d\u5f00\u59cb\u79f0\u91cd';\n }\n\n function Chengren_gameLoop() {\n Chengren_draw();\n }\n\n window.Chengren_initGame = function() {\n Chengren_init();\n Chengren_gameLoop();\n };\n\n window.Chengren_startWeigh = Chengren_startWeigh;\n window.Chengren_resumeLoop = function() {\n if (!_chengrenRAF) Chengren_gameLoop();\n };\n})();\n\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0 \u7acb\u590f \u7acb\u590f \u8282\u6c14\u4ecb\u7ecd \u7269\u5019\u4e09\u5019 \u4f20\u7edf\u4e60\u4fd7 \u590f\u5b63\u517b\u751f \u8bd7\u8bcd\u96c5\u97f5 \u65f6\u4ee4\u7f8e\u98df \u4e8c\u5341\u56db\u8282\u6c14 […]","protected":false},"author":1,"featured_media":1079,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template-2","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-1078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tupian","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":1,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1078\/revisions"}],"predecessor-version":[{"id":1080,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1078\/revisions\/1080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media\/1079"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1078,"date":"2026-05-05T15:20:23","date_gmt":"2026-05-05T07:20:23","guid":{"rendered":"https:\/\/www.365ycs.com\/?p=1078"},"modified":"2026-05-10T08:24:23","modified_gmt":"2026-05-10T00:24:23","slug":"%e7%ab%8b%e5%a4%8f","status":"publish","type":"post","link":"https:\/\/www.365ycs.com\/index.php\/2026\/05\/05\/%e7%ab%8b%e5%a4%8f\/","title":{"rendered":"\u7acb\u590f"},"content":{"rendered":"\n\n\n\n\n\n\n\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0<\/title>\n<meta name=\"description\" content=\"\u7acb\u590f\u8282\u6c14\u4e3b\u9898\u9875\u9762\u2014\u2014\u8282\u6c14\u4ecb\u7ecd\u3001\u4f20\u7edf\u4e60\u4fd7\u3001\u517b\u751f\u6307\u5357\u3001\u7ecf\u5178\u8bd7\u8bcd\u3001\u65f6\u4ee4\u7f8e\u98df\">\n<meta property=\"og:title\" content=\"\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0\">\n<meta property=\"og:description\" content=\"\u4e8c\u5341\u56db\u8282\u6c14\u4e4b\u7acb\u590f\uff0c\u521d\u590f\u65f6\u8282\u7684\u6587\u5316\u767e\u79d1\">\n<meta property=\"og:type\" content=\"website\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ==================== CSS Variables ==================== *\/\n:root {\n --green-deep: #1a3a12;\n --green-main: #3a7d32;\n --green-mid: #5ca84e;\n --green-light: #8ecf7e;\n --green-pale: #d4edcf;\n --green-mist: #eaf6e6;\n --yellow-sun: #f5c842;\n --yellow-warm: #fce588;\n --blue-sky: #7ec8e3;\n --blue-light: #bfe3f3;\n --ink: #2c2c2c;\n --ink-light: #5a5a5a;\n --ink-muted: #8a8a8a;\n --cream: #faf8f0;\n --white: #ffffff;\n --shadow-soft: 0 4px 24px rgba(26, 58, 18, 0.08);\n --shadow-hover: 0 8px 40px rgba(26, 58, 18, 0.15);\n --radius: 16px;\n --radius-sm: 10px;\n --font-title: 'Ma Shan Zheng', cursive;\n --font-serif: 'Noto Serif SC', serif;\n --font-sans: 'Noto Sans SC', sans-serif;\n}\n\n\/* ==================== Reset & Base ==================== *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml {\n scroll-behavior: smooth;\n font-size: 16px;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n font-family: var(--font-sans);\n color: var(--ink);\n background: var(--cream);\n line-height: 1.8;\n overflow-x: hidden;\n}\n\na { color: var(--green-main); text-decoration: none; transition: color .3s; }\na:hover { color: var(--green-deep); }\n\nimg { max-width: 100%; display: block; }\n\n\/* ==================== Scrollbar ==================== *\/\n::-webkit-scrollbar { width: 8px; }\n::-webkit-scrollbar-track { background: var(--green-mist); }\n::-webkit-scrollbar-thumb { background: var(--green-light); border-radius: 4px; }\n::-webkit-scrollbar-thumb:hover { background: var(--green-main); }\n\n\/* ==================== Navigation ==================== *\/\n.nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\n padding: 12px 24px;\n display: flex; align-items: center; justify-content: space-between;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n backdrop-filter: blur(0px);\n background: transparent;\n}\n\n.nav.scrolled {\n background: rgba(250, 248, 240, 0.92);\n backdrop-filter: blur(16px);\n box-shadow: 0 2px 20px rgba(26,58,18,0.06);\n padding: 8px 24px;\n}\n\n.nav-brand {\n font-family: var(--font-title);\n font-size: 1.6rem;\n color: var(--white);\n transition: color .4s;\n text-shadow: 0 2px 8px rgba(0,0,0,0.3);\n}\n\n.nav.scrolled .nav-brand { color: var(--green-deep); text-shadow: none; }\n\n.nav-links {\n display: flex; gap: 6px; list-style: none;\n}\n\n.nav-links a {\n color: rgba(255,255,255,0.85);\n font-size: 0.88rem;\n font-weight: 500;\n padding: 6px 14px;\n border-radius: 20px;\n transition: all .3s;\n text-shadow: 0 1px 4px rgba(0,0,0,0.2);\n}\n\n.nav.scrolled .nav-links a {\n color: var(--ink-light);\n text-shadow: none;\n}\n\n.nav-links a:hover,\n.nav-links a.active {\n background: rgba(255,255,255,0.2);\n}\n\n.nav.scrolled .nav-links a:hover,\n.nav.scrolled .nav-links a.active {\n background: var(--green-pale);\n color: var(--green-deep);\n}\n\n.nav-countdown {\n font-size: 0.8rem;\n color: var(--yellow-warm);\n font-weight: 500;\n text-shadow: 0 1px 4px rgba(0,0,0,0.2);\n transition: color .4s;\n}\n\n.nav.scrolled .nav-countdown { color: var(--green-main); text-shadow: none; }\n\n\/* Mobile nav toggle *\/\n.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }\n.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: .3s; }\n\n@media (max-width: 768px) {\n .nav-toggle { display: block; color: var(--white); }\n .nav.scrolled .nav-toggle { color: var(--ink); }\n .nav-links {\n position: fixed; top: 56px; left: 0; right: 0;\n background: rgba(250,248,240,0.98);\n backdrop-filter: blur(16px);\n flex-direction: column; padding: 16px 24px; gap: 4px;\n transform: translateY(-120%); transition: transform .4s cubic-bezier(.4,0,.2,1);\n box-shadow: var(--shadow-soft);\n }\n .nav-links.open { transform: translateY(0); }\n .nav-links a { color: var(--ink); text-shadow: none; }\n .nav-countdown { display: none; }\n}\n\n\/* ==================== Hero Section ==================== *\/\n.hero {\n position: relative;\n min-height: 100vh;\n display: flex; align-items: center; justify-content: center;\n background: linear-gradient(160deg, #1a3a12 0%, #2d5a27 25%, #3a7d32 50%, #5ca84e 75%, #8ecf7e 100%);\n overflow: hidden;\n}\n\n.hero::before {\n content: '';\n position: absolute; inset: 0;\n background:\n radial-gradient(ellipse 600px 400px at 20% 80%, rgba(125,200,100,0.3), transparent),\n radial-gradient(ellipse 500px 350px at 80% 20%, rgba(245,200,66,0.15), transparent),\n radial-gradient(ellipse 400px 400px at 50% 50%, rgba(126,200,227,0.1), transparent);\n z-index: 1;\n}\n\n\/* Floating leaves decoration *\/\n.hero-leaves {\n position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;\n}\n\n.leaf {\n position: absolute;\n font-size: 2rem;\n opacity: 0.5;\n animation: leafFloat linear infinite;\n}\n\n@keyframes leafFloat {\n 0% { transform: translateY(110vh) rotate(0deg) scale(1); opacity: 0; }\n 10% { opacity: 0.5; }\n 90% { opacity: 0.5; }\n 100% { transform: translateY(-10vh) rotate(360deg) scale(0.8); opacity: 0; }\n}\n\n\/* Ripple circles *\/\n.hero-ripple {\n position: absolute; border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.15);\n animation: ripple 6s ease-out infinite;\n}\n\n@keyframes ripple {\n 0% { transform: scale(0.5); opacity: 0.6; }\n 100% { transform: scale(3); opacity: 0; }\n}\n\n.hero-content {\n position: relative; z-index: 3;\n text-align: center;\n padding: 0 24px;\n animation: fadeInUp 1.2s cubic-bezier(.4,0,.2,1);\n}\n\n@keyframes fadeInUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.hero-tag {\n display: inline-block;\n padding: 6px 20px;\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 20px;\n color: rgba(255,255,255,0.85);\n font-size: 0.82rem;\n letter-spacing: 2px;\n margin-bottom: 20px;\n backdrop-filter: blur(4px);\n}\n\n.hero-title {\n font-family: var(--font-title);\n font-size: clamp(4rem, 12vw, 8rem);\n color: var(--white);\n line-height: 1.1;\n margin-bottom: 12px;\n text-shadow: 0 4px 30px rgba(0,0,0,0.2);\n letter-spacing: 0.08em;\n}\n\n.hero-subtitle {\n font-family: var(--font-serif);\n font-size: clamp(1.1rem, 3vw, 1.5rem);\n color: rgba(255,255,255,0.8);\n margin-bottom: 32px;\n font-weight: 400;\n}\n\n.hero-desc {\n max-width: 520px;\n margin: 0 auto 40px;\n color: rgba(255,255,255,0.7);\n font-size: 0.95rem;\n line-height: 1.9;\n}\n\n.hero-cta {\n display: inline-flex; align-items: center; gap: 8px;\n padding: 14px 36px;\n background: rgba(255,255,255,0.15);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 50px;\n color: var(--white);\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all .3s;\n backdrop-filter: blur(8px);\n text-decoration: none;\n}\n\n.hero-cta:hover {\n background: rgba(255,255,255,0.25);\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(0,0,0,0.15);\n color: var(--white);\n}\n\n.hero-cta svg { transition: transform .3s; }\n.hero-cta:hover svg { transform: translateY(3px); }\n\n.hero-scroll {\n position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);\n z-index: 3;\n display: flex; flex-direction: column; align-items: center; gap: 8px;\n color: rgba(255,255,255,0.5);\n font-size: 0.75rem;\n animation: bounce 2s ease-in-out infinite;\n}\n\n@keyframes bounce {\n 0%, 100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(8px); }\n}\n\n\/* ==================== Section Commons ==================== *\/\n.section {\n padding: 100px 24px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.section-header {\n text-align: center;\n margin-bottom: 60px;\n}\n\n.section-label {\n display: inline-block;\n font-size: 0.78rem;\n letter-spacing: 3px;\n color: var(--green-main);\n text-transform: uppercase;\n margin-bottom: 12px;\n font-weight: 500;\n}\n\n.section-title {\n font-family: var(--font-title);\n font-size: clamp(2rem, 5vw, 3rem);\n color: var(--green-deep);\n margin-bottom: 12px;\n}\n\n.section-divider {\n width: 48px; height: 3px;\n background: linear-gradient(90deg, var(--green-main), var(--yellow-sun));\n border-radius: 2px;\n margin: 16px auto 0;\n}\n\n.section-desc {\n max-width: 600px;\n margin: 16px auto 0;\n color: var(--ink-muted);\n font-size: 0.92rem;\n}\n\n\/* Reveal animation *\/\n.reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);\n}\n\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.reveal-delay-1 { transition-delay: 0.1s; }\n.reveal-delay-2 { transition-delay: 0.2s; }\n.reveal-delay-3 { transition-delay: 0.3s; }\n.reveal-delay-4 { transition-delay: 0.4s; }\n.reveal-delay-5 { transition-delay: 0.5s; }\n\n\/* ==================== Intro Section ==================== *\/\n.intro {\n background: var(--white);\n}\n\n.intro-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n}\n\n.intro-visual {\n position: relative;\n aspect-ratio: 4\/5;\n border-radius: var(--radius);\n overflow: hidden;\n background: linear-gradient(135deg, var(--green-mist) 0%, var(--green-pale) 100%);\n display: flex; align-items: center; justify-content: center;\n}\n\n.intro-visual-inner {\n text-align: center;\n padding: 40px;\n}\n\n.intro-visual-glyph {\n font-family: var(--font-title);\n font-size: 10rem;\n color: var(--green-light);\n line-height: 1;\n opacity: 0.5;\n user-select: none;\n}\n\n.intro-visual-ring {\n position: absolute;\n width: 280px; height: 280px;\n border: 1px solid var(--green-light);\n border-radius: 50%;\n opacity: 0.3;\n animation: ringPulse 4s ease-in-out infinite;\n}\n\n@keyframes ringPulse {\n 0%, 100% { transform: scale(1); opacity: 0.3; }\n 50% { transform: scale(1.08); opacity: 0.15; }\n}\n\n.intro-visual-solar {\n position: absolute;\n top: 20px; right: 20px;\n width: 50px; height: 50px;\n background: var(--yellow-sun);\n border-radius: 50%;\n box-shadow: 0 0 30px rgba(245,200,66,0.4);\n animation: sunGlow 3s ease-in-out infinite;\n}\n\n@keyframes sunGlow {\n 0%, 100% { box-shadow: 0 0 30px rgba(245,200,66,0.4); }\n 50% { box-shadow: 0 0 50px rgba(245,200,66,0.6); }\n}\n\n.intro-text h3 {\n font-family: var(--font-serif);\n font-size: 1.5rem;\n color: var(--green-deep);\n margin-bottom: 16px;\n}\n\n.intro-text p {\n color: var(--ink-light);\n margin-bottom: 16px;\n font-size: 0.95rem;\n}\n\n.intro-meta {\n display: flex; flex-wrap: wrap; gap: 16px;\n margin-top: 24px;\n}\n\n.intro-meta-item {\n display: flex; align-items: center; gap: 8px;\n padding: 10px 18px;\n background: var(--green-mist);\n border-radius: var(--radius-sm);\n font-size: 0.88rem;\n color: var(--green-deep);\n}\n\n.intro-meta-item .label {\n color: var(--ink-muted);\n font-size: 0.8rem;\n}\n\n@media (max-width: 768px) {\n .intro-grid { grid-template-columns: 1fr; gap: 32px; }\n .intro-visual { max-height: 320px; }\n}\n\n\/* ==================== Three Phenology (\u4e09\u5019) ==================== *\/\n.phenology {\n background: var(--green-mist);\n}\n\n.phenology-cards {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n}\n\n.phenology-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 40px 28px 32px;\n text-align: center;\n position: relative;\n overflow: hidden;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n box-shadow: var(--shadow-soft);\n}\n\n.phenology-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-hover);\n}\n\n.phenology-card::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--green-main), var(--green-light));\n transition: height .3s;\n}\n\n.phenology-card:hover::before { height: 6px; }\n\n.phenology-icon {\n width: 72px; height: 72px;\n margin: 0 auto 20px;\n background: var(--green-mist);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.8rem;\n transition: transform .4s;\n}\n\n.phenology-card:hover .phenology-icon { transform: scale(1.1) rotate(5deg); }\n\n.phenology-order {\n font-family: var(--font-title);\n font-size: 0.85rem;\n color: var(--green-mid);\n margin-bottom: 8px;\n letter-spacing: 2px;\n}\n\n.phenology-name {\n font-family: var(--font-serif);\n font-size: 1.3rem;\n color: var(--green-deep);\n margin-bottom: 12px;\n}\n\n.phenology-desc {\n color: var(--ink-muted);\n font-size: 0.88rem;\n line-height: 1.7;\n}\n\n@media (max-width: 768px) {\n .phenology-cards { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }\n}\n\n\/* ==================== Customs Section ==================== *\/\n.customs {\n background: var(--white);\n}\n\n.customs-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n}\n\n.custom-card {\n border-radius: var(--radius);\n padding: 32px;\n position: relative;\n overflow: hidden;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n cursor: default;\n}\n\n.custom-card:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-hover);\n}\n\n.custom-card-1 { background: linear-gradient(135deg, #fef9e7 0%, #fdebd0 100%); }\n.custom-card-2 { background: linear-gradient(135deg, #eaf6e6 0%, #d4edcf 100%); }\n.custom-card-3 { background: linear-gradient(135deg, #e8f6f3 0%, #d0ece7 100%); }\n.custom-card-4 { background: linear-gradient(135deg, #fdf2e9 0%, #fae5d3 100%); }\n\n.custom-icon {\n font-size: 2.5rem;\n margin-bottom: 16px;\n display: block;\n}\n\n.custom-name {\n font-family: var(--font-serif);\n font-size: 1.3rem;\n color: var(--green-deep);\n margin-bottom: 10px;\n}\n\n.custom-desc {\n color: var(--ink-light);\n font-size: 0.9rem;\n line-height: 1.8;\n margin-bottom: 16px;\n}\n\n.custom-tag {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.custom-card-1 .custom-tag { background: rgba(245,200,66,0.2); color: #b7950b; }\n.custom-card-2 .custom-tag { background: rgba(90,168,78,0.15); color: var(--green-main); }\n.custom-card-3 .custom-tag { background: rgba(126,200,227,0.2); color: #2e86c1; }\n.custom-card-4 .custom-tag { background: rgba(230,126,34,0.15); color: #ca6f1e; }\n\n@media (max-width: 768px) {\n .customs-grid { grid-template-columns: 1fr; }\n}\n\n\/* ==================== Proverbs (\u519c\u8c1a) ==================== *\/\n.proverbs {\n background: var(--green-deep);\n color: var(--white);\n position: relative;\n overflow: hidden;\n}\n\n.proverbs::before {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(90,168,78,0.2), transparent),\n radial-gradient(ellipse 60% 50% at 70% 30%, rgba(245,200,66,0.08), transparent);\n}\n\n.proverbs .section-label { color: var(--green-light); }\n.proverbs .section-title { color: var(--white); }\n.proverbs .section-divider { background: linear-gradient(90deg, var(--green-light), var(--yellow-sun)); }\n\n.proverb-track {\n display: flex; gap: 24px;\n animation: proverbScroll 30s linear infinite;\n width: max-content;\n}\n\n.proverb-track:hover { animation-play-state: paused; }\n\n@keyframes proverbScroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n}\n\n.proverb-item {\n flex-shrink: 0;\n padding: 20px 32px;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: var(--radius-sm);\n font-family: var(--font-serif);\n font-size: 1.1rem;\n color: rgba(255,255,255,0.85);\n white-space: nowrap;\n transition: background .3s;\n backdrop-filter: blur(4px);\n}\n\n.proverb-item:hover { background: rgba(255,255,255,0.12); }\n\n\/* ==================== Health Section ==================== *\/\n.health {\n background: var(--cream);\n}\n\n.health-tabs {\n display: flex; justify-content: center; gap: 8px;\n margin-bottom: 40px;\n flex-wrap: wrap;\n}\n\n.health-tab {\n padding: 10px 24px;\n border: 1.5px solid var(--green-light);\n border-radius: 50px;\n background: transparent;\n color: var(--green-main);\n font-size: 0.9rem;\n font-weight: 500;\n cursor: pointer;\n transition: all .3s;\n font-family: var(--font-sans);\n}\n\n.health-tab.active,\n.health-tab:hover {\n background: var(--green-main);\n border-color: var(--green-main);\n color: var(--white);\n}\n\n.health-panel {\n display: none;\n animation: fadeIn .4s;\n}\n\n.health-panel.active { display: block; }\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.health-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}\n\n.health-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 28px 24px;\n box-shadow: var(--shadow-soft);\n transition: all .3s;\n border-top: 3px solid transparent;\n}\n\n.health-card:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-hover);\n}\n\n.health-card-icon {\n font-size: 2rem;\n margin-bottom: 14px;\n}\n\n.health-card-title {\n font-family: var(--font-serif);\n font-size: 1.1rem;\n color: var(--green-deep);\n margin-bottom: 8px;\n}\n\n.health-card-text {\n color: var(--ink-muted);\n font-size: 0.85rem;\n line-height: 1.7;\n}\n\n\/* Tab-specific border colors *\/\n.health-panel[data-tab=\"child\"] .health-card { border-top-color: var(--yellow-sun); }\n.health-panel[data-tab=\"adult\"] .health-card { border-top-color: var(--green-main); }\n.health-panel[data-tab=\"elder\"] .health-card { border-top-color: var(--blue-sky); }\n\n@media (max-width: 768px) {\n .health-grid { grid-template-columns: 1fr; }\n}\n\n\/* ==================== Poetry Section ==================== *\/\n.poetry {\n background: var(--white);\n position: relative;\n overflow: hidden;\n}\n\n.poetry::after {\n content: '';\n position: absolute;\n bottom: -50px; right: -50px;\n width: 300px; height: 300px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--green-mist), transparent);\n opacity: 0.6;\n pointer-events: none;\n}\n\n.poetry-showcase {\n max-width: 700px;\n margin: 0 auto;\n position: relative;\n}\n\n.poetry-frame {\n background: linear-gradient(145deg, #faf8f0 0%, #f5f0e3 100%);\n border: 1px solid rgba(90,168,78,0.15);\n border-radius: var(--radius);\n padding: 48px 40px;\n position: relative;\n overflow: hidden;\n}\n\n.poetry-frame::before {\n content: '';\n position: absolute;\n top: 16px; left: 16px; right: 16px; bottom: 16px;\n border: 1px solid rgba(90,168,78,0.08);\n border-radius: 12px;\n pointer-events: none;\n}\n\n.poetry-dynasty {\n text-align: center;\n font-size: 0.82rem;\n color: var(--ink-muted);\n letter-spacing: 3px;\n margin-bottom: 12px;\n}\n\n.poetry-title {\n text-align: center;\n font-family: var(--font-title);\n font-size: 1.8rem;\n color: var(--green-deep);\n margin-bottom: 6px;\n}\n\n.poetry-author {\n text-align: center;\n font-size: 0.9rem;\n color: var(--ink-muted);\n margin-bottom: 28px;\n}\n\n.poetry-lines {\n text-align: center;\n font-family: var(--font-serif);\n font-size: 1.15rem;\n color: var(--ink);\n line-height: 2.4;\n letter-spacing: 0.05em;\n}\n\n.poetry-lines p { margin-bottom: 4px; }\n\n.poetry-nav {\n display: flex; justify-content: center; align-items: center; gap: 20px;\n margin-top: 32px;\n}\n\n.poetry-btn {\n width: 44px; height: 44px;\n border-radius: 50%;\n border: 1.5px solid var(--green-light);\n background: var(--white);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all .3s;\n color: var(--green-main);\n font-size: 1.1rem;\n}\n\n.poetry-btn:hover {\n background: var(--green-main);\n border-color: var(--green-main);\n color: var(--white);\n}\n\n.poetry-counter {\n font-size: 0.85rem;\n color: var(--ink-muted);\n min-width: 40px;\n text-align: center;\n}\n\n.poetry-speak-btn {\n display: inline-flex; align-items: center; gap: 6px;\n margin-top: 20px;\n padding: 8px 18px;\n border-radius: 20px;\n border: 1px solid var(--green-light);\n background: transparent;\n color: var(--green-main);\n font-size: 0.82rem;\n cursor: pointer;\n transition: all .3s;\n font-family: var(--font-sans);\n}\n\n.poetry-speak-btn:hover {\n background: var(--green-mist);\n}\n\n.poetry-speak-btn.speaking {\n background: var(--green-main);\n color: var(--white);\n border-color: var(--green-main);\n}\n\n\/* ==================== Food Section ==================== *\/\n.food {\n background: var(--green-mist);\n}\n\n.food-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n}\n\n.food-card {\n background: var(--white);\n border-radius: var(--radius);\n overflow: hidden;\n transition: all .4s cubic-bezier(.4,0,.2,1);\n box-shadow: var(--shadow-soft);\n}\n\n.food-card:hover {\n transform: translateY(-6px);\n box-shadow: var(--shadow-hover);\n}\n\n.food-img {\n height: 180px;\n background: var(--green-pale);\n display: flex; align-items: center; justify-content: center;\n font-size: 4rem;\n position: relative;\n overflow: hidden;\n}\n\n.food-img::after {\n content: '';\n position: absolute; bottom: 0; left: 0; right: 0;\n height: 40px;\n background: linear-gradient(transparent, var(--white));\n}\n\n.food-body {\n padding: 20px 24px 24px;\n}\n\n.food-name {\n font-family: var(--font-serif);\n font-size: 1.2rem;\n color: var(--green-deep);\n margin-bottom: 6px;\n}\n\n.food-origin {\n font-size: 0.78rem;\n color: var(--ink-muted);\n margin-bottom: 10px;\n}\n\n.food-desc {\n color: var(--ink-light);\n font-size: 0.85rem;\n line-height: 1.7;\n}\n\n.food-tags {\n display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;\n}\n\n.food-tag {\n padding: 3px 10px;\n background: var(--green-mist);\n border-radius: 10px;\n font-size: 0.72rem;\n color: var(--green-main);\n}\n\n@media (max-width: 768px) {\n .food-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }\n}\n\n\/* ==================== Footer ==================== *\/\n.footer {\n background: var(--green-deep);\n color: rgba(255,255,255,0.7);\n padding: 60px 24px 32px;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.footer::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0;\n height: 80px;\n background: linear-gradient(var(--cream), transparent);\n pointer-events: none;\n}\n\n.footer-brand {\n font-family: var(--font-title);\n font-size: 2rem;\n color: var(--white);\n margin-bottom: 8px;\n}\n\n.footer-text {\n font-size: 0.85rem;\n margin-bottom: 6px;\n}\n\n.footer-small {\n font-size: 0.75rem;\n color: rgba(255,255,255,0.4);\n margin-top: 20px;\n}\n\n.footer-nav-row {\n display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;\n margin-top: 20px;\n}\n\n.footer-nav-row a {\n color: rgba(255,255,255,0.5);\n font-size: 0.82rem;\n transition: color .3s;\n}\n\n.footer-nav-row a:hover { color: var(--white); }\n\n\/* ==================== Back to Top ==================== *\/\n.back-top {\n position: fixed; bottom: 32px; right: 32px;\n width: 48px; height: 48px;\n border-radius: 50%;\n background: var(--green-main);\n color: var(--white);\n border: none; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 4px 16px rgba(58,125,50,0.3);\n opacity: 0; visibility: hidden;\n transition: all .3s;\n z-index: 999;\n font-size: 1.2rem;\n}\n\n.back-top.show { opacity: 1; visibility: visible; }\n.back-top:hover { background: var(--green-deep); transform: translateY(-2px); }\n\n\/* ==================== Solar Term Timeline ==================== *\/\n.timeline-float {\n position: fixed; left: 16px; top: 50%;\n transform: translateY(-50%);\n display: flex; flex-direction: column; gap: 6px;\n z-index: 998;\n opacity: 0; visibility: hidden;\n transition: all .4s;\n}\n\n.timeline-float.show { opacity: 1; visibility: visible; }\n\n.timeline-dot {\n width: 10px; height: 10px;\n border-radius: 50%;\n border: 1.5px solid var(--green-light);\n background: transparent;\n cursor: pointer;\n transition: all .3s;\n position: relative;\n}\n\n.timeline-dot.active {\n background: var(--green-main);\n border-color: var(--green-main);\n box-shadow: 0 0 0 4px rgba(90,168,78,0.15);\n}\n\n.timeline-dot:hover {\n border-color: var(--green-main);\n transform: scale(1.3);\n}\n\n.timeline-dot::after {\n content: attr(data-label);\n position: absolute; left: 18px; top: 50%; transform: translateY(-50%);\n font-size: 0.7rem;\n color: var(--ink-muted);\n white-space: nowrap;\n opacity: 0;\n transition: opacity .2s;\n pointer-events: none;\n}\n\n.timeline-dot:hover::after { opacity: 1; }\n\n@media (max-width: 1024px) { .timeline-float { display: none; } }\n\n\/* ==================== Loading Screen ==================== *\/\n.loader {\n position: fixed; inset: 0; z-index: 9999;\n background: var(--green-deep);\n display: flex; align-items: center; justify-content: center;\n flex-direction: column; gap: 20px;\n transition: opacity .6s, visibility .6s;\n}\n\n.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }\n\n.loader-text {\n font-family: var(--font-title);\n font-size: 2.5rem;\n color: var(--white);\n animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\n}\n\n.loader-bar {\n width: 120px; height: 3px;\n background: rgba(255,255,255,0.15);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.loader-bar-inner {\n height: 100%; width: 0%;\n background: var(--green-light);\n border-radius: 2px;\n animation: loaderGrow 1.2s ease-out forwards;\n}\n\n@keyframes loaderGrow {\n to { width: 100%; }\n}\n\n\/* ==================== Game Modal ==================== *\/\n.game-modal {\n position: fixed; inset: 0; z-index: 10000;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(6px);\n display: none; align-items: center; justify-content: center;\n animation: gameModalIn .3s ease;\n}\n.game-modal.active { display: flex; }\n@keyframes gameModalIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n.game-modal-content {\n background: #fff;\n border-radius: 20px;\n max-width: 700px;\n width: 95vw;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n animation: gameModalSlideUp .3s ease;\n}\n@keyframes gameModalSlideUp {\n from { transform: translateY(40px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n.game-modal-close {\n position: absolute; top: 12px; right: 16px;\n width: 36px; height: 36px;\n border-radius: 50%; border: none;\n background: rgba(0,0,0,0.08);\n font-size: 1.2rem; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all .2s; z-index: 1;\n color: #666;\n}\n.game-modal-close:hover { background: rgba(0,0,0,0.15); color: #333; }\n.game-modal-body { padding: 0; }\n\n\/* Game wrapper containers *\/\n#doudan-wrap, #chengren-wrap {\n display: none;\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 30%, #fbbf24 100%);\n border-radius: 20px;\n padding: 16px;\n font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;\n user-select: none;\n}\n#doudan-wrap.active, #chengren-wrap.active {\n display: block;\n}\n\n\/* ===== Doudan Game Styles ===== *\/\n#doudan-wrap .title-bar {\n text-align: center; padding: 10px 10px 6px;\n}\n#doudan-wrap .title-bar h1 {\n font-size: 2em; color: #92400e;\n text-shadow: 2px 2px 0 rgba(255,255,255,0.6);\n letter-spacing: 0.15em;\n}\n#doudan-wrap .subtitle { color: #b45309; font-size: 0.9em; margin-top: 2px; }\n#doudan-wrap .score-board {\n display: flex; gap: 30px; justify-content: center;\n font-size: 1em; color: #78350f; font-weight: bold; margin: 4px 0;\n}\n#doudan-wrap #doudan-canvas {\n display: block; margin: 0 auto;\n border-radius: 14px;\n box-shadow: 0 6px 24px rgba(120,53,15,0.22);\n max-width: 100%;\n cursor: pointer;\n}\n#doudan-wrap .egg-select {\n display: flex; gap: 14px; justify-content: center; margin: 8px 0;\n}\n#doudan-wrap .egg-option {\n width: 76px; padding: 8px 4px;\n background: rgba(255,255,255,0.7); border-radius: 12px;\n border: 3px solid transparent; cursor: pointer;\n text-align: center; transition: all 0.2s;\n}\n#doudan-wrap .egg-option:hover { border-color: #f59e0b; transform: translateY(-2px); }\n#doudan-wrap .egg-option.selected { border-color: #dc2626; background: rgba(254,202,202,0.5); }\n#doudan-wrap .egg-option .egg-icon { font-size: 2em; }\n#doudan-wrap .egg-option .egg-label { font-size: 0.82em; color: #78350f; font-weight: bold; margin-top: 2px; }\n#doudan-wrap .egg-option .egg-stat { font-size: 0.7em; color: #a16207; }\n#doudan-wrap .mode-select {\n display: flex; gap: 10px; justify-content: center; margin: 6px 0;\n}\n#doudan-wrap .mode-btn {\n padding: 6px 16px; border-radius: 20px;\n border: 2px solid #d97706; background: #fffbeb;\n color: #92400e; font-weight: bold; cursor: pointer;\n font-size: 0.88em; transition: all 0.2s;\n}\n#doudan-wrap .mode-btn:hover { background: #fef3c7; }\n#doudan-wrap .mode-btn.selected { background: #92400e; color: #fde68a; border-color: #92400e; }\n#doudan-wrap .controls {\n margin: 10px 0; display: flex; gap: 10px;\n flex-wrap: wrap; justify-content: center;\n}\n#doudan-wrap .controls button {\n padding: 8px 22px; font-size: 1em;\n border: 2px solid #92400e; border-radius: 28px;\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\n color: #78350f; font-weight: bold; cursor: pointer;\n transition: all 0.2s;\n}\n#doudan-wrap .controls button:hover { transform: scale(1.04); box-shadow: 0 4px 10px rgba(146,64,14,0.25); }\n#doudan-wrap .controls button:disabled { opacity: 0.4; cursor: default; transform: none; }\n#doudan-wrap .power-hint {\n color: #b45309; font-size: 0.85em; margin-top: 4px;\n text-align: center; font-weight: bold;\n}\n#doudan-wrap .info-panel {\n background: rgba(255,255,255,0.75);\n backdrop-filter: blur(8px);\n border-radius: 14px; padding: 12px 18px;\n margin: 6px 0 12px; max-width: 600px;\n margin-left: auto; margin-right: auto;\n color: #78350f; font-size: 0.9em;\n line-height: 1.6; text-align: center;\n}\n#doudan-wrap .info-panel .king {\n font-size: 1.4em; color: #dc2626; font-weight: bold;\n animation: ddPulse 1s infinite;\n}\n@keyframes ddPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n}\n\n\/* ===== Chengren Game Styles ===== *\/\n#chengren-wrap .header {\n text-align: center; padding: 10px 10px 6px;\n}\n#chengren-wrap .header h1 {\n font-size: 1.8em; color: #92400e;\n text-shadow: 2px 2px 0 rgba(255,255,255,0.6);\n letter-spacing: 0.2em;\n}\n#chengren-wrap .header .desc { color: #b45309; font-size: 0.85em; margin-top: 2px; }\n#chengren-wrap #chengren-canvas {\n display: block; margin: 0 auto;\n border-radius: 14px;\n box-shadow: 0 6px 24px rgba(120,53,15,0.22);\n max-width: 100%;\n background: #fef9c3;\n}\n#chengren-wrap .person-select {\n display: flex; gap: 8px; justify-content: center;\n flex-wrap: wrap; margin: 10px 0 6px;\n}\n#chengren-wrap .person-card {\n width: 64px; padding: 6px 4px;\n background: rgba(255,255,255,0.85);\n border-radius: 12px; border: 2px solid transparent;\n cursor: pointer; text-align: center;\n transition: all 0.2s;\n}\n#chengren-wrap .person-card:hover { transform: translateY(-2px); border-color: #f59e0b; }\n#chengren-wrap .person-card.done { opacity: 0.45; cursor: default; transform: none; }\n#chengren-wrap .person-card.done:hover { border-color: transparent; }\n#chengren-wrap .person-card.selected { border-color: #dc2626; background: rgba(254,202,202,0.6); }\n#chengren-wrap .person-card .avatar { font-size: 1.6em; }\n#chengren-wrap .person-card .name { font-size: 0.8em; color: #78350f; font-weight: bold; margin-top: 2px; }\n#chengren-wrap .person-card .weight { font-size: 0.68em; color: #a16207; }\n#chengren-wrap .controls {\n text-align: center; margin: 8px 0;\n display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;\n}\n#chengren-wrap .controls button {\n padding: 8px 20px; font-size: 0.95em;\n border: 2px solid #92400e; border-radius: 28px;\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\n color: #78350f; font-weight: bold; cursor: pointer;\n transition: all 0.2s;\n}\n#chengren-wrap .controls button:hover { transform: scale(1.04); box-shadow: 0 4px 10px rgba(146,64,14,0.25); }\n#chengren-wrap .controls button:disabled { opacity: 0.4; cursor: default; transform: none; }\n#chengren-wrap .controls button.secondary { background: #fffbeb; font-size: 0.88em; }\n#chengren-wrap .result-panel {\n max-width: 480px; margin: 6px auto;\n background: rgba(255,255,255,0.88);\n backdrop-filter: blur(8px);\n border-radius: 14px; padding: 12px 16px;\n text-align: center;\n animation: crFadeIn 0.3s ease;\n}\n@keyframes crFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n#chengren-wrap .result-panel .weight-display { font-size: 2em; color: #dc2626; font-weight: bold; }\n#chengren-wrap .result-panel .lucky-word { font-size: 1em; color: #92400e; margin-top: 6px; line-height: 1.5; }\n#chengren-wrap .result-panel .change { font-size: 0.88em; color: #78350f; margin-top: 4px; }\n#chengren-wrap .result-panel .change.up { color: #16a34a; }\n#chengren-wrap .result-panel .change.down { color: #dc2626; }\n#chengren-wrap .hint {\n text-align: center; color: #b45309;\n font-size: 0.85em; margin: 3px 0; min-height: 18px;\n}\n#chengren-wrap .summary-panel {\n max-width: 540px; margin: 8px auto;\n background: rgba(255,255,255,0.92);\n border-radius: 14px; padding: 10px 14px;\n animation: crFadeIn 0.3s ease;\n}\n#chengren-wrap .summary-panel h3 { color: #92400e; margin-bottom: 6px; text-align: center; font-size: 1em; }\n#chengren-wrap .summary-table { width: 100%; border-collapse: collapse; font-size: 0.82em; }\n#chengren-wrap .summary-table th,\n#chengren-wrap .summary-table td { padding: 4px 5px; text-align: center; border-bottom: 1px solid #fde68a; }\n#chengren-wrap .summary-table th { color: #92400e; font-weight: bold; background: #fef3c7; }\n#chengren-wrap .summary-table td { color: #78350f; }\n#chengren-wrap .summary-panel .final-msg { text-align: center; color: #dc2626; font-weight: bold; font-size: 0.95em; margin-top: 8px; }\n\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"loader\" id=\"loader\">\n <div class=\"loader-text\">\u7acb\u590f<\/div>\n <div class=\"loader-bar\"><div class=\"loader-bar-inner\"><\/div><\/div>\n<\/div>\n\n\n<nav class=\"nav\" id=\"nav\">\n <a href=\"#hero\" class=\"nav-brand\">\u7acb\u590f<\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#intro\">\u8282\u6c14\u4ecb\u7ecd<\/a><\/li>\n <li><a href=\"#phenology\">\u7269\u5019\u4e09\u5019<\/a><\/li>\n <li><a href=\"#customs\">\u4f20\u7edf\u4e60\u4fd7<\/a><\/li>\n <li><a href=\"#health\">\u590f\u5b63\u517b\u751f<\/a><\/li>\n <li><a href=\"#poetry\">\u8bd7\u8bcd\u96c5\u97f5<\/a><\/li>\n <li><a href=\"#food\">\u65f6\u4ee4\u7f8e\u98df<\/a><\/li>\n <\/ul>\n <div class=\"nav-countdown\" id=\"countdown\"><\/div>\n <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"\u83dc\u5355\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n<\/nav>\n\n\n<div class=\"timeline-float\" id=\"timeline\">\n <div class=\"timeline-dot\" data-label=\"\u7acb\u6625\" title=\"\u7acb\u6625\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u96e8\u6c34\" title=\"\u96e8\u6c34\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u60ca\u86f0\" title=\"\u60ca\u86f0\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u6625\u5206\" title=\"\u6625\u5206\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u6e05\u660e\" title=\"\u6e05\u660e\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u8c37\u96e8\" title=\"\u8c37\u96e8\"><\/div>\n <div class=\"timeline-dot active\" data-label=\"\u7acb\u590f\" title=\"\u7acb\u590f\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u5c0f\u6ee1\" title=\"\u5c0f\u6ee1\"><\/div>\n <div class=\"timeline-dot\" data-label=\"\u8292\u79cd\" title=\"\u8292\u79cd\"><\/div>\n<\/div>\n\n\n<section class=\"hero\" id=\"hero\">\n <div class=\"hero-leaves\" id=\"heroLeaves\"><\/div>\n <div class=\"hero-ripple\" style=\"width:200px;height:200px;bottom:20%;left:10%;animation-delay:0s;\"><\/div>\n <div class=\"hero-ripple\" style=\"width:160px;height:160px;bottom:30%;right:15%;animation-delay:2s;\"><\/div>\n <div class=\"hero-ripple\" style=\"width:120px;height:120px;bottom:10%;left:40%;animation-delay:4s;\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-tag\">\u4e8c\u5341\u56db\u8282\u6c14 \u00b7 \u7b2c\u4e03<\/div>\n <h1 class=\"hero-title\">\u7acb\u590f<\/h1>\n <p class=\"hero-subtitle\">\u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0<\/p>\n <p class=\"hero-desc\">\n \u6597\u6307\u4e1c\u5357\uff0c\u7ef4\u4e3a\u7acb\u590f\u3002\u5929\u5730\u59cb\u4ea4\uff0c\u4e07\u7269\u5e76\u79c0\u3002<br>\n \u6b64\u65f6\u6625\u53bb\u590f\u6765\uff0c\u6c14\u6e29\u6e10\u5347\uff0c\u96f7\u96e8\u589e\u591a\uff0c\u519c\u4f5c\u7269\u8fdb\u5165\u751f\u957f\u65fa\u5b63\u3002\n <\/p>\n <a href=\"#intro\" class=\"hero-cta\">\n \u63a2\u7d22\u7acb\u590f\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M19 12l-7 7-7-7\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"hero-scroll\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M19 12l-7 7-7-7\"\/><\/svg>\n \u5411\u4e0b\u6eda\u52a8\n <\/div>\n<\/section>\n\n\n<section class=\"section intro\" id=\"intro\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u8282\u6c14\u4ecb\u7ecd<\/div>\n <h2 class=\"section-title\">\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb<\/h2>\n <div class=\"section-divider\"><\/div>\n <\/div>\n <div class=\"intro-grid\">\n <div class=\"intro-visual reveal reveal-delay-1\">\n <div class=\"intro-visual-inner\">\n <div class=\"intro-visual-glyph\">\u590f<\/div>\n <\/div>\n <div class=\"intro-visual-ring\"><\/div>\n <div class=\"intro-visual-ring\" style=\"width:340px;height:340px;animation-delay:1.5s;\"><\/div>\n <div class=\"intro-visual-solar\"><\/div>\n <\/div>\n <div class=\"intro-text reveal reveal-delay-2\">\n <h3>\u6597\u6307\u4e1c\u5357\uff0c\u7ef4\u4e3a\u7acb\u590f<\/h3>\n <p>\u7acb\u590f\uff0c\u662f\u4e8c\u5341\u56db\u8282\u6c14\u4e2d\u7684\u7b2c\u4e03\u4e2a\u8282\u6c14\uff0c\u590f\u5b63\u7684\u7b2c\u4e00\u4e2a\u8282\u6c14\uff0c\u6bcf\u5e74\u516c\u53865\u67085\u65e5\u81f37\u65e5\u4ea4\u8282\u3002\u6b64\u65f6\u592a\u9633\u5230\u8fbe\u9ec4\u7ecf45\u5ea6\uff0c\u5317\u6597\u4e03\u661f\u7684\u6597\u67c4\u6307\u5411\u4e1c\u5357\u65b9\u3002<\/p>\n <p>\u7acb\u590f\u6807\u5fd7\u7740\u6625\u5929\u7ed3\u675f\u3001\u590f\u5929\u5f00\u59cb\u3002\u7acb\u590f\u4e4b\u540e\uff0c\u65e5\u7167\u589e\u52a0\uff0c\u6c14\u6e29\u5347\u9ad8\uff0c\u96f7\u96e8\u589e\u591a\uff0c\u4e07\u7269\u8fdb\u5165\u84ec\u52c3\u751f\u957f\u7684\u65fa\u5b63\u3002\u519c\u8c1a\u6709\"\u7acb\u590f\u524d\u540e\u79cd\u5730\u74dc\"\"\u7acb\u590f\u79cd\u59dc\uff0c\u590f\u81f3\u6536\u5a18\"\u4e4b\u8bf4\u3002<\/p>\n <p>\u53e4\u4eba\u4ee5\u7acb\u590f\u4e3a\u91cd\u8981\u8282\u65e5\uff0c\u5386\u4ee3\u5e1d\u738b\u7387\u767e\u5b98\u81f3\u5357\u90ca\u8fce\u590f\uff0c\u6c11\u95f4\u5219\u6709\u79f0\u4eba\u3001\u6597\u86cb\u3001\u5c1d\u65b0\u7b49\u4e30\u5bcc\u7684\u4f20\u7edf\u4e60\u4fd7\uff0c\u81f3\u4eca\u4ecd\u5728\u8bb8\u591a\u5730\u533a\u4f20\u627f\u3002<\/p>\n <div class=\"intro-meta\">\n <div class=\"intro-meta-item\">\n <span class=\"label\">\u65e5\u671f<\/span> 5\u67085\u65e5\u20147\u65e5\n <\/div>\n <div class=\"intro-meta-item\">\n <span class=\"label\">\u592a\u9633\u9ec4\u7ecf<\/span> 45\u00b0\n <\/div>\n <div class=\"intro-meta-item\">\n <span class=\"label\">\u6597\u67c4\u6307\u5411<\/span> \u4e1c\u5357\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section phenology\" id=\"phenology\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u7269\u5019\u4e09\u5019<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u4e09\u5019<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u53e4\u4eba\u5c06\u7acb\u590f\u5206\u4e3a\u4e09\u5019\uff0c\u6bcf\u5019\u4e94\u65e5\uff0c\u4ee5\u7269\u5019\u53d8\u5316\u6807\u8bb0\u65f6\u4ee4\u63a8\u79fb<\/p>\n <\/div>\n <div class=\"phenology-cards\">\n <div class=\"phenology-card reveal reveal-delay-1\">\n <div class=\"phenology-icon\">\ud83d\udc38<\/div>\n <div class=\"phenology-order\">\u521d\u5019<\/div>\n <h3 class=\"phenology-name\">\u877c\u8748\u9e23<\/h3>\n <p class=\"phenology-desc\">\u7acb\u590f\u4e4b\u521d\uff0c\u877c\u8748\uff08\u86d9\u7c7b\uff09\u5728\u7530\u95f4\u6c60\u7554\u5f00\u59cb\u9e23\u53eb\uff0c\u58f0\u58f0\u5165\u8033\uff0c\u5ba3\u544a\u590f\u65e5\u7684\u6765\u4e34\u3002\u86d9\u9e23\u662f\u521d\u590f\u6700\u52a8\u542c\u7684\u81ea\u7136\u4e50\u7ae0\u3002<\/p>\n <\/div>\n <div class=\"phenology-card reveal reveal-delay-2\">\n <div class=\"phenology-icon\">\ud83e\udeb1<\/div>\n <div class=\"phenology-order\">\u4e8c\u5019<\/div>\n <h3 class=\"phenology-name\">\u86af\u8693\u51fa<\/h3>\n <p class=\"phenology-desc\">\u86af\u8693\u4ece\u571f\u58e4\u4e2d\u94bb\u51fa\u5730\u9762\uff0c\u662f\u5927\u5730\u9633\u6c14\u76db\u6781\u7684\u5f81\u5146\u3002\u6b64\u65f6\u571f\u58e4\u6e29\u6696\u6e7f\u6da6\uff0c\u86af\u8693\u6d3b\u52a8\u9891\u7e41\uff0c\u7ffb\u677e\u6ce5\u571f\uff0c\u5229\u4e8e\u519c\u4f5c\u3002<\/p>\n <\/div>\n <div class=\"phenology-card reveal reveal-delay-3\">\n <div class=\"phenology-icon\">\ud83c\udf3f<\/div>\n <div class=\"phenology-order\">\u4e09\u5019<\/div>\n <h3 class=\"phenology-name\">\u738b\u74dc\u751f<\/h3>\n <p class=\"phenology-desc\">\u738b\u74dc\uff08\u4e00\u79cd\u846b\u82a6\u79d1\u85e4\u672c\u690d\u7269\uff09\u85e4\u8513\u5feb\u901f\u6500\u722c\u751f\u957f\uff0c\u7eff\u610f\u76ce\u7136\u3002\u85e4\u8513\u8513\u5ef6\u8c61\u5f81\u7740\u590f\u65e5\u7684\u84ec\u52c3\u751f\u673a\u4e0e\u65fa\u76db\u751f\u547d\u529b\u3002<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section customs\" id=\"customs\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u4f20\u7edf\u4e60\u4fd7<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u6c11\u4fd7<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u4e16\u4ee3\u4f20\u627f\u7684\u7acb\u590f\u4e60\u4fd7\uff0c\u627f\u8f7d\u7740\u4eba\u4eec\u5bf9\u4e30\u6536\u7684\u7948\u613f\u548c\u5bf9\u5065\u5eb7\u7684\u671f\u76fc<\/p>\n <\/div>\n <div class=\"customs-grid\">\n <div class=\"custom-card custom-card-1 reveal reveal-delay-1\">\n <span class=\"custom-icon\">\ud83e\udd5a<\/span>\n <h3 class=\"custom-name\">\u7acb\u590f\u86cb<\/h3>\n <p class=\"custom-desc\">\u7acb\u590f\u8fd9\u5929\uff0c\u4eba\u4eec\u7528\u8336\u53f6\u672b\u6216\u80e1\u6843\u58f3\u716e\u86cb\uff0c\u79f0\"\u7acb\u590f\u86cb\"\u3002\u86cb\u58f3\u67d3\u6210\u7ea2\u8272\u6216\u7f16\u7ec7\u86cb\u7f51\u6302\u5728\u5b69\u5b50\u80f8\u524d\uff0c\u5bd3\u610f\"\u9022\u51f6\u5316\u5409\uff0c\u5e73\u5b89\u5ea6\u590f\"\u3002<\/p>\n <span class=\"custom-tag\">\u7948\u798f\u5e73\u5b89<\/span>\n <\/div>\n <div class=\"custom-card custom-card-2 reveal reveal-delay-2\" style=\"cursor:pointer\" onclick=\"openGameModal('doudan')\">\n <span class=\"custom-icon\">\ud83d\udca5<\/span>\n <h3 class=\"custom-name\">\u6597\u86cb<\/h3>\n <p class=\"custom-desc\">\u5b69\u5b50\u4eec\u4e09\u4e94\u6210\u7fa4\uff0c\u6301\u86cb\u76f8\u78b0\uff0c\u86cb\u5934\u5bf9\u86cb\u5934\u3001\u86cb\u5c3e\u5bf9\u86cb\u5c3e\uff0c\u7834\u8005\u8ba4\u8f93\u3002\u6700\u540e\u4e0d\u7834\u7684\u86cb\u88ab\u5c01\u4e3a\"\u5927\u738b\"\u3002\u8fd9\u4e00\u4e60\u4fd7\u81f3\u4eca\u4ecd\u662f\u5b69\u5b50\u4eec\u7684\u7acb\u590f\u76db\u4e8b\u3002<\/p>\n <span class=\"custom-tag\">\u7ae5\u8da3\u7ade\u6280<\/span>\n <\/div>\n <div class=\"custom-card custom-card-3 reveal reveal-delay-3\" style=\"cursor:pointer\" onclick=\"openGameModal('chengren')\">\n <span class=\"custom-icon\">\u2696\ufe0f<\/span>\n <h3 class=\"custom-name\">\u79f0\u4eba<\/h3>\n <p class=\"custom-desc\">\u7acb\u5348\u996d\u540e\uff0c\u4eba\u4eec\u6302\u8d77\u5927\u79e4\uff0c\u8f6e\u6d41\u79f0\u4f53\u91cd\u3002\u53f8\u79e4\u4eba\u8fb9\u6253\u79e4\u82b1\u8fb9\u8bb2\u5409\u5229\u8bdd\uff0c\u8001\u4eba\u79f0\u4e86\u7948\u957f\u5bff\uff0c\u5c0f\u5b69\u79f0\u4e86\u795d\u6210\u957f\uff0c\u4ee5\u9632\"\u75b0\u590f\"\u6d88\u7626\u3002<\/p>\n <span class=\"custom-tag\">\u5065\u5eb7\u7948\u613f<\/span>\n <\/div>\n <div class=\"custom-card custom-card-4 reveal reveal-delay-4\">\n <span class=\"custom-icon\">\ud83c\udf52<\/span>\n <h3 class=\"custom-name\">\u5c1d\u65b0<\/h3>\n <p class=\"custom-desc\">\u7acb\u590f\u5c1d\u65b0\uff0c\u54c1\u5c1d\u65f6\u4ee4\u9c9c\u5473\u2014\u2014\u9752\u6885\u3001\u6a31\u6843\u3001\u9c9c\u8695\u8c46\u3001\u82cb\u83dc\u7b49\u3002\u6c5f\u5357\u6709\"\u7acb\u590f\u89c1\u4e09\u65b0\"\u4e4b\u4fd7\uff0c\u4ee5\u6a31\u6843\u3001\u9752\u6885\u3001\u9ea6\u8695\u4e3a\u4e09\u65b0\uff0c\u656c\u5929\u5730\u4ea6\u6170\u53e3\u8179\u3002<\/p>\n <span class=\"custom-tag\">\u65f6\u4ee4\u9c9c\u5473<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section proverbs\" id=\"proverbs\">\n <div class=\"section-header reveal\" style=\"position:relative;z-index:1;\">\n <div class=\"section-label\">\u519c\u4e8b\u8c1a\u8bed<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u519c\u8c1a<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\" style=\"color:rgba(255,255,255,0.5);\">\u5343\u5e74\u519c\u8015\u667a\u6167\u7684\u7ed3\u6676\uff0c\u5b57\u5b57\u53e5\u53e5\u7686\u662f\u7ecf\u9a8c<\/p>\n <\/div>\n <div class=\"proverb-track reveal\" style=\"position:relative;z-index:1;\">\n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u524d\u540e\u79cd\u5730\u74dc<\/div>\n <div class=\"proverb-item\">\ud83c\udf31 \u7acb\u590f\u79cd\u59dc\uff0c\u590f\u81f3\u6536\u5a18<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u5c0f\u6ee1\u6b63\u683d\u79e7<\/div>\n <div class=\"proverb-item\">\u2600\ufe0f \u7acb\u590f\u4e0d\u4e0b\uff0c\u65f1\u5230\u9ea6\u7f62<\/div>\n <div class=\"proverb-item\">\ud83c\udf3f \u7acb\u590f\u4e09\u65e5\u904d\u9504\u7530<\/div>\n <div class=\"proverb-item\">\ud83d\udc38 \u7acb\u590f\u86c7\u51fa\u6d1e\uff0c\u51c6\u5907\u5feb\u9632\u6d2a<\/div>\n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u9ea6\u9f87\u7259\uff0c\u4e00\u6708\u5c31\u8981\u62d4<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u96e8\u6dcb\u6dcb\uff0c\u904d\u5730\u51fa\u9ec4\u91d1<\/div>\n \n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u524d\u540e\u79cd\u5730\u74dc<\/div>\n <div class=\"proverb-item\">\ud83c\udf31 \u7acb\u590f\u79cd\u59dc\uff0c\u590f\u81f3\u6536\u5a18<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u5c0f\u6ee1\u6b63\u683d\u79e7<\/div>\n <div class=\"proverb-item\">\u2600\ufe0f \u7acb\u590f\u4e0d\u4e0b\uff0c\u65f1\u5230\u9ea6\u7f62<\/div>\n <div class=\"proverb-item\">\ud83c\udf3f \u7acb\u590f\u4e09\u65e5\u904d\u9504\u7530<\/div>\n <div class=\"proverb-item\">\ud83d\udc38 \u7acb\u590f\u86c7\u51fa\u6d1e\uff0c\u51c6\u5907\u5feb\u9632\u6d2a<\/div>\n <div class=\"proverb-item\">\ud83c\udf3e \u7acb\u590f\u9ea6\u9f87\u7259\uff0c\u4e00\u6708\u5c31\u8981\u62d4<\/div>\n <div class=\"proverb-item\">\ud83c\udf27\ufe0f \u7acb\u590f\u96e8\u6dcb\u6dcb\uff0c\u904d\u5730\u51fa\u9ec4\u91d1<\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section health\" id=\"health\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u590f\u5b63\u517b\u751f<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u517b\u751f\u6307\u5357<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u56e0\u4eba\u5236\u5b9c\uff0c\u987a\u65f6\u517b\u9633\uff0c\u8ba9\u8eab\u4f53\u5b89\u7136\u5165\u590f<\/p>\n <\/div>\n <div class=\"health-tabs reveal\">\n <button class=\"health-tab active\" data-tab=\"child\">\ud83d\udc76 \u513f\u7ae5\u517b\u751f<\/button>\n <button class=\"health-tab\" data-tab=\"adult\">\ud83e\uddd1 \u6210\u4eba\u517b\u751f<\/button>\n <button class=\"health-tab\" data-tab=\"elder\">\ud83e\uddd3 \u8001\u4eba\u517b\u751f<\/button>\n <\/div>\n \n <div class=\"health-panel active\" data-tab=\"child\">\n <div class=\"health-grid\">\n <div class=\"health-card reveal reveal-delay-1\">\n <div class=\"health-card-icon\">\ud83d\udecc<\/div>\n <h4 class=\"health-card-title\">\u665a\u7761\u65e9\u8d77\u52a0\u5348\u4f11<\/h4>\n <p class=\"health-card-text\">\u7acb\u590f\u540e\u663c\u957f\u591c\u77ed\uff0c\u513f\u7ae5\u53ef\u7a0d\u665a\u5165\u7761\uff08\u4e0d\u8d8521:30\uff09\uff0c\u9002\u5f53\u65e9\u8d77\uff0c\u5348\u95f4\u8865\u772030-60\u5206\u949f\uff0c\u4fdd\u8bc1\u5145\u8db3\u7761\u7720\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-2\">\n <div class=\"health-card-icon\">\ud83e\udd57<\/div>\n <h4 class=\"health-card-title\">\u996e\u98df\u6e05\u6de1\u5c11\u5bd2\u51c9<\/h4>\n <p class=\"health-card-text\">\u591a\u98df\u7ca5\u3001\u9762\u3001\u65b0\u9c9c\u852c\u679c\uff0c\u5c11\u98df\u51b7\u996e\u51b0\u54c1\u3002\u9002\u91cf\u98df\u7528\u9178\u5473\u98df\u7269\uff08\u5982\u4e4c\u6885\u6c64\uff09\u5f00\u80c3\u751f\u6d25\uff0c\u9884\u9632\u75b0\u590f\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-3\">\n <div class=\"health-card-icon\">\ud83c\udfc3<\/div>\n <h4 class=\"health-card-title\">\u9002\u5ea6\u8fd0\u52a8\u907f\u70c8\u65e5<\/h4>\n <p class=\"health-card-text\">\u9009\u62e9\u6e05\u6668\u6216\u508d\u665a\u6237\u5916\u6d3b\u52a8\uff0c\u907f\u514d\u6b63\u5348\u66b4\u6652\u3002\u8fd0\u52a8\u91cf\u4e0d\u5b9c\u8fc7\u5927\uff0c\u4ee5\u5fae\u5fae\u51fa\u6c57\u4e3a\u5b9c\uff0c\u53ca\u65f6\u8865\u5145\u6c34\u5206\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"health-panel\" data-tab=\"adult\">\n <div class=\"health-grid\">\n <div class=\"health-card reveal\">\n <div class=\"health-card-icon\">\ud83e\uddd8<\/div>\n <h4 class=\"health-card-title\">\u517b\u5fc3\u8c03\u795e\u4fdd\u5348\u4f11<\/h4>\n <p class=\"health-card-text\">\u7acb\u590f\u517b\u5fc3\u4e3a\u5148\uff0c\u4fdd\u6301\u5fc3\u60c5\u5e73\u548c\uff0c\u907f\u514d\u70e6\u8e81\u3002\u575a\u6301\u5348\u4f1120-30\u5206\u949f\uff0c\u6709\u52a9\u5fc3\u6c14\u6062\u590d\u3001\u4e0b\u5348\u7cbe\u529b\u5145\u6c9b\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-1\">\n <div class=\"health-card-icon\">\ud83c\udf75<\/div>\n <h4 class=\"health-card-title\">\u589e\u9178\u51cf\u82e6\u8865\u813e\u80c3<\/h4>\n <p class=\"health-card-text\">\u9002\u5f53\u589e\u52a0\u9178\u5473\u6444\u5165\uff08\u5c71\u6942\u3001\u67e0\u6aac\uff09\uff0c\u51cf\u5c11\u82e6\u5473\u3002\u53ef\u996e\u7eff\u8c46\u6c64\u3001\u9178\u6885\u6c64\u6d88\u6691\u3002\u5fcc\u66b4\u996e\u66b4\u98df\u4e0e\u8fc7\u5ea6\u8f9b\u8fa3\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-2\">\n <div class=\"health-card-icon\">\ud83c\udfca<\/div>\n <h4 class=\"health-card-title\">\u6709\u6c27\u8fd0\u52a8\u4fc3\u4ee3\u8c22<\/h4>\n <p class=\"health-card-text\">\u63a8\u8350\u6e38\u6cf3\u3001\u6162\u8dd1\u3001\u592a\u6781\u62f3\u7b49\u6709\u6c27\u8fd0\u52a8\uff0c\u589e\u5f3a\u5fc3\u80ba\u529f\u80fd\u3002\u8fd0\u52a8\u540e\u4e0d\u5b9c\u7acb\u5373\u51b7\u6c34\u51b2\u6dcb\uff0c\u5e94\u7b49\u6c57\u843d\u540e\u6e29\u6c34\u6c90\u6d74\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"health-panel\" data-tab=\"elder\">\n <div class=\"health-grid\">\n <div class=\"health-card reveal\">\n <div class=\"health-card-icon\">\ud83d\udc8a<\/div>\n <h4 class=\"health-card-title\">\u9632\u6691\u964d\u6e29\u9632\u65e7\u75be<\/h4>\n <p class=\"health-card-text\">\u8001\u4eba\u5bf9\u6e29\u5ea6\u9002\u5e94\u529b\u5f31\uff0c\u9700\u6ce8\u610f\u5ba4\u5185\u901a\u98ce\u964d\u6e29\u3002\u5fc3\u8111\u8840\u7ba1\u75be\u75c5\u60a3\u8005\u5c24\u5e94\u9632\u6691\uff0c\u968f\u8eab\u643a\u5e26\u6025\u6551\u836f\u7269\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-1\">\n <div class=\"health-card-icon\">\ud83c\udf72<\/div>\n <h4 class=\"health-card-title\">\u6e29\u8865\u4e3a\u4e3b\u5fcc\u8d2a\u51c9<\/h4>\n <p class=\"health-card-text\">\u996e\u98df\u4ee5\u6e29\u8f6f\u4e3a\u4e3b\uff0c\u53ef\u98df\u5c71\u836f\u3001\u858f\u4ec1\u3001\u83b2\u5b50\u7ca5\u5065\u813e\u795b\u6e7f\u3002\u5207\u5fcc\u8d2a\u51c9\u996e\u51b7\uff0c\u4ee5\u514d\u635f\u4f24\u813e\u80c3\u9633\u6c14\u3002<\/p>\n <\/div>\n <div class=\"health-card reveal reveal-delay-2\">\n <div class=\"health-card-icon\">\ud83d\udeb6<\/div>\n <h4 class=\"health-card-title\">\u7f13\u884c\u6162\u52a8\u517b\u6c14\u8840<\/h4>\n <p class=\"health-card-text\">\u6668\u660f\u6563\u6b65\u6700\u4f73\uff0c\u901f\u5ea6\u5b9c\u7f13\u3002\u907f\u514d\u957f\u65f6\u95f4\u6237\u5916\u66b4\u6652\u4e0e\u5267\u70c8\u8fd0\u52a8\u3002\u592a\u6781\u62f3\u3001\u516b\u6bb5\u9526\u662f\u7406\u60f3\u9009\u62e9\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section poetry\" id=\"poetry\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u8bd7\u8bcd\u96c5\u97f5<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u8bd7\u8bcd<\/h2>\n <div class=\"section-divider\"><\/div>\n <\/div>\n <div class=\"poetry-showcase reveal\">\n <div class=\"poetry-frame\" id=\"poetryFrame\">\n <div class=\"poetry-dynasty\" id=\"poetryDynasty\"><\/div>\n <h3 class=\"poetry-title\" id=\"poetryTitle\"><\/h3>\n <p class=\"poetry-author\" id=\"poetryAuthor\"><\/p>\n <div class=\"poetry-lines\" id=\"poetryLines\"><\/div>\n <div style=\"text-align:center;\">\n <button class=\"poetry-speak-btn\" id=\"poetrySpeakBtn\">\ud83d\udd0a \u6717\u8bfb<\/button>\n <\/div>\n <\/div>\n <div class=\"poetry-nav\">\n <button class=\"poetry-btn\" id=\"poetryPrev\" aria-label=\"\u4e0a\u4e00\u9996\">\u25c0<\/button>\n <span class=\"poetry-counter\" id=\"poetryCounter\"><\/span>\n <button class=\"poetry-btn\" id=\"poetryNext\" aria-label=\"\u4e0b\u4e00\u9996\">\u25b6<\/button>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"section food\" id=\"food\">\n <div class=\"section-header reveal\">\n <div class=\"section-label\">\u65f6\u4ee4\u7f8e\u98df<\/div>\n <h2 class=\"section-title\">\u7acb\u590f\u98df\u5355<\/h2>\n <div class=\"section-divider\"><\/div>\n <p class=\"section-desc\">\u5e94\u5b63\u800c\u98df\uff0c\u4e0d\u8d1f\u65f6\u5149\uff0c\u4e0d\u8d1f\u5473\u857e<\/p>\n <\/div>\n <div class=\"food-grid\">\n <div class=\"food-card reveal reveal-delay-1\">\n <div class=\"food-img\">\ud83e\udedb<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u8695\u8c46<\/h4>\n <p class=\"food-origin\">\u6c5f\u5357\u5730\u533a \u00b7 \u7acb\u590f\u4e09\u65b0\u4e4b\u4e00<\/p>\n <p class=\"food-desc\">\u7acb\u590f\u65f6\u8282\u9c9c\u8695\u8c46\u6700\u4e3a\u80a5\u5ae9\uff0c\u6e05\u7092\u6216\u716e\u6c64\u7686\u5b9c\uff0c\u53e3\u611f\u7ef5\u751c\u3002\u6c5f\u5357\u4eba\u89c6\u5176\u4e3a\u7acb\u590f\u5fc5\u5c1d\u4e4b\u7269\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u9ad8\u86cb\u767d<\/span>\n <span class=\"food-tag\">\u5065\u813e\u5229\u6e7f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-2\">\n <div class=\"food-img\">\ud83c\udf52<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u6a31\u6843<\/h4>\n <p class=\"food-origin\">\u5168\u56fd\u5404\u5730 \u00b7 \u7acb\u590f\u4e09\u65b0\u4e4b\u4e00<\/p>\n <p class=\"food-desc\">\u7acb\u590f\u6a31\u6843\u7ea2\u4f3c\u706b\uff0c\u5473\u751c\u6c41\u591a\uff0c\u542b\u94c1\u91cf\u5c45\u6c34\u679c\u4e4b\u9996\u3002\u53e4\u4eba\u4ee5\u6a31\u6843\u796d\u7956\uff0c\u89c6\u4e3a\u521d\u590f\u7b2c\u4e00\u9c9c\u679c\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u8865\u8840\u517b\u989c<\/span>\n <span class=\"food-tag\">\u65f6\u4ee4\u9c9c\u679c<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-3\">\n <div class=\"food-img\">\ud83d\udfe2<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u9752\u6885<\/h4>\n <p class=\"food-origin\">\u5357\u65b9\u5730\u533a \u00b7 \u7acb\u590f\u4e09\u65b0\u4e4b\u4e00<\/p>\n <p class=\"food-desc\">\u9752\u6885\u5473\u9178\u5165\u809d\uff0c\u7acb\u590f\u98df\u4e4b\u53ef\u751f\u6d25\u6b62\u6e34\u3001\u6d88\u98df\u5f00\u80c3\u3002\u4ea6\u53ef\u917f\u5236\u9752\u6885\u9152\uff0c\u5c01\u5b58\u590f\u65e5\u8bb0\u5fc6\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u751f\u6d25\u6b62\u6e34<\/span>\n <span class=\"food-tag\">\u5f00\u80c3\u6d88\u98df<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-1\">\n <div class=\"food-img\">\ud83c\udf5c<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u7acb\u590f\u9762<\/h4>\n <p class=\"food-origin\">\u5317\u65b9\u5730\u533a \u00b7 \u4f20\u7edf\u98df\u4fd7<\/p>\n <p class=\"food-desc\">\u5317\u65b9\u6709\"\u7acb\u590f\u5403\u9762\"\u7684\u4e60\u4fd7\uff0c\u4ee5\u8fc7\u6c34\u9762\u3001\u51c9\u9762\u4e3a\u4e3b\u3002\u4e00\u7897\u6e05\u723d\u9762\u6761\uff0c\u5f00\u542f\u708e\u590f\u7684\u996e\u98df\u65b9\u5f0f\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u6e05\u51c9\u6d88\u6691<\/span>\n <span class=\"food-tag\">\u4f20\u7edf\u98df\u4fd7<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-2\">\n <div class=\"food-img\">\ud83e\udd63<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u4e4c\u7c73\u996d<\/h4>\n <p class=\"food-origin\">\u6c5f\u5357\u3001\u95fd\u5317 \u00b7 \u975e\u9057\u7f8e\u98df<\/p>\n <p class=\"food-desc\">\u4ee5\u4e4c\u6811\u53f6\u6363\u6c41\u6d78\u7cef\u7c73\u84b8\u5236\u800c\u6210\uff0c\u8272\u6cfd\u4e4c\u9ed1\u53d1\u4eae\uff0c\u6e05\u9999\u8f6f\u7cef\u3002\u6709\u795b\u98ce\u89e3\u6bd2\u3001\u76ca\u813e\u5065\u80c3\u4e4b\u6548\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u975e\u9057\u4f20\u627f<\/span>\n <span class=\"food-tag\">\u795b\u98ce\u89e3\u6bd2<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"food-card reveal reveal-delay-3\">\n <div class=\"food-img\">\ud83e\uded5<\/div>\n <div class=\"food-body\">\n <h4 class=\"food-name\">\u4e94\u8272\u996d<\/h4>\n <p class=\"food-origin\">\u5357\u65b9\u591a\u5730 \u00b7 \u7acb\u590f\u996d<\/p>\n <p class=\"food-desc\">\u4ee5\u7ea2\u8c46\u3001\u9ec4\u8c46\u3001\u7eff\u8c46\u3001\u9ed1\u8c46\u4e0e\u767d\u7c73\u84b8\u6210\u4e94\u8272\u996d\uff0c\u5bd3\u610f\u4e94\u8c37\u4e30\u767b\u3001\u4e94\u798f\u4e34\u95e8\uff0c\u8272\u5f69\u7f24\u7eb7\uff0c\u8425\u517b\u4e30\u5bcc\u3002<\/p>\n <div class=\"food-tags\">\n <span class=\"food-tag\">\u4e94\u8c37\u4e30\u767b<\/span>\n <span class=\"food-tag\">\u8425\u517b\u5747\u8861<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer class=\"footer\">\n <div class=\"footer-brand\">\u7acb\u590f \u00b7 \u4e07\u7269\u5e76\u79c0<\/div>\n <p class=\"footer-text\">\u6625\u5c3d\u590f\u6765\uff0c\u4e07\u7269\u81ea\u6b64\u8d70\u5411\u7e41\u76db<\/p>\n <p class=\"footer-text\" style=\"color:rgba(255,255,255,0.5);font-size:0.82rem;\">\u4e8c\u5341\u56db\u8282\u6c14 \u00b7 \u4e2d\u534e\u4f20\u7edf\u6587\u5316<\/p>\n <div class=\"footer-nav-row\">\n <a href=\"#intro\">\u8282\u6c14\u4ecb\u7ecd<\/a>\n <a href=\"#phenology\">\u7269\u5019\u4e09\u5019<\/a>\n <a href=\"#customs\">\u4f20\u7edf\u4e60\u4fd7<\/a>\n <a href=\"#health\">\u590f\u5b63\u517b\u751f<\/a>\n <a href=\"#poetry\">\u8bd7\u8bcd\u96c5\u97f5<\/a>\n <a href=\"#food\">\u65f6\u4ee4\u7f8e\u98df<\/a>\n <\/div>\n <p class=\"footer-small\">\u00a9 2026 \u7acb\u590f\u8282\u6c14\u4e3b\u9898\u9875 \u00b7 \u6e05\u65b0\u56fd\u98ce\u8bbe\u8ba1<\/p>\n<\/footer>\n\n\n\n<div class=\"game-modal\" id=\"gameModal\">\n <div class=\"game-modal-content\">\n <button class=\"game-modal-close\" onclick=\"closeGameModal()\">×<\/button>\n <div class=\"game-modal-body\">\n \n <div id=\"doudan-wrap\">\n <div class=\"title-bar\">\n <h1>\ud83e\udd5a \u6597\u86cb \ud83e\udd5a<\/h1>\n <div class=\"subtitle\">\u7acb\u590f\u76db\u4e8b \u00b7 \u86cb\u5934\u78b0\u86cb\u5934 \u86cb\u5c3e\u78b0\u86cb\u5c3e<\/div>\n <\/div>\n <div class=\"score-board\" id=\"doudan-scoreBoard\">\n <span>\ud83c\udfc6 \u8fde\u80dc: <b id=\"doudan-winStreak\">0<\/b><\/span>\n <span>\u2694\ufe0f \u603b\u6218: <b id=\"doudan-totalBattles\">0<\/b><\/span>\n <\/div>\n <canvas id=\"doudan-canvas\" width=\"600\" height=\"420\"><\/canvas>\n <div id=\"doudan-eggSelectArea\">\n <div style=\"text-align:center;color:#78350f;font-weight:bold;margin:8px 0 4px;\">\u9009\u62e9\u4f60\u7684\u86cb<\/div>\n <div class=\"egg-select\" id=\"doudan-eggSelect\"><\/div>\n <\/div>\n <div id=\"doudan-modeArea\" style=\"display:none;\">\n <div style=\"text-align:center;color:#78350f;font-weight:bold;margin:8px 0 4px;\">\u9009\u62e9\u78b0\u6cd5<\/div>\n <div class=\"mode-select\" id=\"doudan-modeSelect\"><\/div>\n <\/div>\n <div class=\"controls\" id=\"doudan-mainControls\">\n <button id=\"doudan-btnStart\" onclick=\"Doudan_startBattle()\">\u5f00\u6218\uff01<\/button>\n <\/div>\n <div class=\"power-hint\" id=\"doudan-powerHint\"><\/div>\n <div class=\"info-panel\" id=\"doudan-infoPanel\">\n \u4e09\u4e94\u6210\u7fa4\uff0c\u6301\u86cb\u76f8\u78b0\uff0c\u86cb\u5934\u5bf9\u86cb\u5934\u3001\u86cb\u5c3e\u5bf9\u86cb\u5c3e\uff0c\u7834\u8005\u8ba4\u8f93\u3002<br>\n \u6700\u540e\u4e0d\u7834\u7684\u86cb\u88ab\u5c01\u4e3a <b>\"\u5927\u738b\"<\/b>\uff01\n <\/div>\n <\/div>\n\n \n <div id=\"chengren-wrap\">\n <div class=\"header\">\n <h1>\u2696\ufe0f \u79f0\u4eba \u2696\ufe0f<\/h1>\n <div class=\"desc\">\u7acb\u590f\u79e4\u91cd \u00b7 \u5409\u7965\u8bdd\u795d\u798f \u00b7 \u5065\u5eb7\u6210\u957f<\/div>\n <\/div>\n <div class=\"game-area\" id=\"chengren-gameArea\">\n <canvas id=\"chengren-canvas\" width=\"600\" height=\"360\"><\/canvas>\n <div class=\"hint\" id=\"chengren-hintText\">\ud83d\udc46 \u9009\u62e9\u4e00\u4eba\uff0c\u70b9\u51fb\u300c\u4e0a\u79e4\u300d\u5f00\u59cb\u79f0\u91cd<\/div>\n <div class=\"person-select\" id=\"chengren-personSelect\"><\/div>\n <div class=\"controls\" id=\"chengren-mainControls\">\n <button id=\"chengren-btnStart\" onclick=\"Chengren_startWeigh()\">\u4e0a\u79e4<\/button>\n <\/div>\n <div class=\"result-panel\" id=\"chengren-resultPanel\" style=\"display:none;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<button class=\"back-top\" id=\"backTop\" aria-label=\"\u56de\u5230\u9876\u90e8\">\u2191<\/button>\n\n<script>\n\/* ==================== Loading ==================== *\/\nwindow.addEventListener('load', () => {\n setTimeout(() => document.getElementById('loader').classList.add('done'), 1200);\n});\n\n\/* ==================== Floating Leaves ==================== *\/\n(function createLeaves() {\n const container = document.getElementById('heroLeaves');\n const leafChars = ['\ud83c\udf43','\ud83c\udf3f','\ud83c\udf42','\ud83c\udf3e','\ud83c\udf40'];\n for (let i = 0; i < 12; i++) {\n const leaf = document.createElement('span');\n leaf.className = 'leaf';\n leaf.textContent = leafChars[Math.floor(Math.random() * leafChars.length)];\n leaf.style.left = Math.random() * 100 + '%';\n leaf.style.fontSize = (1.2 + Math.random() * 1.5) + 'rem';\n leaf.style.animationDuration = (10 + Math.random() * 15) + 's';\n leaf.style.animationDelay = (Math.random() * 12) + 's';\n leaf.style.opacity = 0.25 + Math.random() * 0.3;\n container.appendChild(leaf);\n }\n})();\n\n\/* ==================== Navigation Scroll ==================== *\/\nconst nav = document.getElementById('nav');\nconst navLinks = document.getElementById('navLinks');\nconst navToggle = document.getElementById('navToggle');\nconst backTop = document.getElementById('backTop');\nconst timeline = document.getElementById('timeline');\n\nnavToggle.addEventListener('click', () => navLinks.classList.toggle('open'));\n\nnavLinks.addEventListener('click', e => {\n if (e.target.tagName === 'A') navLinks.classList.remove('open');\n});\n\nwindow.addEventListener('scroll', () => {\n const y = window.scrollY;\n nav.classList.toggle('scrolled', y > 60);\n backTop.classList.toggle('show', y > 600);\n timeline.classList.toggle('show', y > 400 && y < document.body.scrollHeight - 800);\n}, { passive: true });\n\nbackTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n\/* ==================== Countdown to Xiaoman (\u5c0f\u6ee1) ==================== *\/\n(function updateCountdown() {\n const el = document.getElementById('countdown');\n function calc() {\n const now = new Date();\n const year = now.getFullYear();\n \/\/ \u5c0f\u6ee1 is approximately May 20-22 each year\n const xiaoman = new Date(year, 4, 21, 0, 0, 0); \/\/ May 21\n if (now > xiaoman) xiaoman.setFullYear(year + 1);\n const diff = xiaoman - now;\n const days = Math.floor(diff \/ 86400000);\n const hours = Math.floor((diff % 86400000) \/ 3600000);\n el.textContent = `\u8ddd\u5c0f\u6ee1 ${days}\u5929${hours}\u65f6`;\n }\n calc();\n setInterval(calc, 60000);\n})();\n\n\/* ==================== Reveal on Scroll ==================== *\/\nconst revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));\n\n\/* ==================== Health Tabs ==================== *\/\ndocument.querySelectorAll('.health-tab').forEach(tab => {\n tab.addEventListener('click', () => {\n document.querySelectorAll('.health-tab').forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.health-panel').forEach(p => p.classList.remove('active'));\n tab.classList.add('active');\n document.querySelector(`.health-panel[data-tab=\"${tab.dataset.tab}\"]`).classList.add('active');\n });\n});\n\n\/* ==================== Poetry Carousel ==================== *\/\nconst poems = [\n {\n dynasty: '\u5b8b',\n title: '\u7acb\u590f',\n author: '\u9646\u6e38',\n lines: ['\u8d64\u5e1d\u6536\u6625\u534a\uff0c\u52fe\u8292\u9001\u590f\u6765\u3002', '\u65e5\u70d8\u8863\u8882\u6696\uff0c\u98ce\u9001\u9ea6\u79cb\u50ac\u3002', '\u65ad\u7eed\u86d9\u58f0\u5ae9\uff0c\u7eb5\u6a2a\u71d5\u5f71\u731c\u3002', '\u4e00\u5e74\u60df\u6b64\u65e5\uff0c\u6700\u597d\u662f\u697c\u53f0\u3002']\n },\n {\n dynasty: '\u5b8b',\n title: '\u7acb\u590f\u524d\u4e8c\u65e5\u4f5c',\n author: '\u9646\u6e38',\n lines: ['\u6668\u8d77\u62ab\u8863\u51fa\u8349\u5802\uff0c\u79cb\u5343\u5f71\u91cc\u5ea6\u5e74\u5149\u3002', '\u53ea\u77e5\u6625\u5df2\u8001\uff0c\u4e0d\u4fe1\u590f\u521d\u957f\u3002', '\u6885\u5b50\u672a\u9ec4\u5148\u8457\u96e8\uff0c\u7261\u4e39\u6b32\u8c22\u66f4\u95fb\u9999\u3002', '\u4e00\u5e74\u597d\u666f\u541b\u987b\u8bb0\uff0c\u6700\u662f\u6a59\u9ec4\u6a58\u7eff\u65f6\u3002']\n },\n {\n dynasty: '\u5510',\n title: '\u521d\u590f\u5373\u4e8b',\n author: '\u767d\u5c45\u6613',\n lines: ['\u5b5f\u590f\u7231\u543e\u5e90\uff0c\u9676\u6f5c\u8bed\u4e0d\u865a\u3002', '\u82b1\u6b8b\u65e0\u620f\u8776\uff0c\u5bc6\u53f6\u6709\u9e23\u8729\u3002', '\u5e18\u5377\u659c\u9633\u5916\uff0c\u7a97\u5f00\u521d\u590f\u521d\u3002', '\u6b64\u65f6\u60c5\u7eea\u6076\uff0c\u8c01\u4e0e\u9189\u76f8\u5982\u3002']\n },\n {\n dynasty: '\u5b8b',\n title: '\u7acb\u590f',\n author: '\u8d75\u53cb\u76f4',\n lines: ['\u56db\u6708\u6e05\u548c\u96e8\u6b47\u65f6\uff0c\u69b4\u82b1\u7167\u773c\u4e00\u679d\u679d\u3002', '\u6885\u9178\u672a\u892a\u4e09\u6625\u5473\uff0c\u9ea6\u6d6a\u65b0\u7ffb\u4e94\u6708\u5947\u3002', '\u5df2\u89c9\u86d9\u58f0\u60ca\u5ba2\u68a6\uff0c\u8fd8\u601c\u71d5\u8bed\u7ed5\u6a90\u8fdf\u3002', '\u5e74\u5e74\u6b64\u65e5\u5f00\u65b0\u917f\uff0c\u4e14\u5171\u4e1c\u98ce\u9189\u4e00\u536e\u3002']\n },\n {\n dynasty: '\u660e',\n title: '\u7acb\u590f',\n author: '\u9648\u7ee7\u5112',\n lines: ['\u6885\u5b50\u9752\u9752\u674f\u5b50\u7ea2\uff0c\u9ea6\u6d6a\u7ffb\u6eda\u7eff\u9634\u4e2d\u3002', '\u95e8\u524d\u86af\u8693\u8015\u65b0\u571f\uff0c\u6c60\u4e0a\u9752\u86d9\u5531\u6653\u98ce\u3002', '\u6597\u86cb\u513f\u7ae5\u58f0\u6700\u95f9\uff0c\u79f0\u4eba\u7fc1\u5aaa\u610f\u65b9\u6d53\u3002', '\u4e00\u5e74\u5149\u666f\u6765\u65f6\u534a\uff0c\u83ab\u8d1f\u5357\u7a97\u7af9\u4e0b\u98ce\u3002']\n }\n];\n\nlet currentPoem = 0;\n\nfunction renderPoem(index) {\n const p = poems[index];\n document.getElementById('poetryDynasty').textContent = '\u3010' + p.dynasty + '\u3011';\n document.getElementById('poetryTitle').textContent = p.title;\n document.getElementById('poetryAuthor').textContent = p.author;\n document.getElementById('poetryLines').innerHTML = p.lines.map(l => '<p>' + l + '<\/p>').join('');\n document.getElementById('poetryCounter').textContent = (index + 1) + ' \/ ' + poems.length;\n}\n\ndocument.getElementById('poetryPrev').addEventListener('click', () => {\n currentPoem = (currentPoem - 1 + poems.length) % poems.length;\n renderPoem(currentPoem);\n});\n\ndocument.getElementById('poetryNext').addEventListener('click', () => {\n currentPoem = (currentPoem + 1) % poems.length;\n renderPoem(currentPoem);\n});\n\nrenderPoem(0);\n\n\/* ==================== Poetry Speak (Web Speech API) ==================== *\/\nconst speakBtn = document.getElementById('poetrySpeakBtn');\nlet speaking = false;\n\nspeakBtn.addEventListener('click', () => {\n if (speaking) {\n speechSynthesis.cancel();\n speaking = false;\n speakBtn.classList.remove('speaking');\n speakBtn.textContent = '\ud83d\udd0a \u6717\u8bfb';\n return;\n }\n const p = poems[currentPoem];\n const text = p.title + '\uff0c' + p.author + '\u3002' + p.lines.join('');\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = 'zh-CN';\n utterance.rate = 0.85;\n utterance.pitch = 1;\n utterance.onend = () => {\n speaking = false;\n speakBtn.classList.remove('speaking');\n speakBtn.textContent = '\ud83d\udd0a \u6717\u8bfb';\n };\n speechSynthesis.speak(utterance);\n speaking = true;\n speakBtn.classList.add('speaking');\n speakBtn.textContent = '\u23f9 \u505c\u6b62';\n});\n\n\/* ==================== Active Nav Link Highlight ==================== *\/\nconst sections = document.querySelectorAll('section[id]');\nconst navAnchors = document.querySelectorAll('.nav-links a');\n\nconst sectionObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const id = entry.target.id;\n navAnchors.forEach(a => {\n a.classList.toggle('active', a.getAttribute('href') === '#' + id);\n });\n }\n });\n}, { threshold: 0.25, rootMargin: '-80px 0px -40% 0px' });\n\nsections.forEach(sec => sectionObserver.observe(sec));\n\n\/* ==================== Swiper on Mobile (poetry) ==================== *\/\nlet touchStartX = 0;\nconst poetryShowcase = document.querySelector('.poetry-showcase');\n\npoetryShowcase.addEventListener('touchstart', e => {\n touchStartX = e.changedTouches[0].screenX;\n}, { passive: true });\n\npoetryShowcase.addEventListener('touchend', e => {\n const diff = e.changedTouches[0].screenX - touchStartX;\n if (Math.abs(diff) > 50) {\n if (diff > 0) {\n currentPoem = (currentPoem - 1 + poems.length) % poems.length;\n } else {\n currentPoem = (currentPoem + 1) % poems.length;\n }\n renderPoem(currentPoem);\n }\n}, { passive: true });\n<\/script>\n<script>\n\n\/* ==================== Game Modal & Game Scripts ==================== *\/\nlet _activeGameRAF = null;\n\nfunction openGameModal(game) {\n const modal = document.getElementById('gameModal');\n const doudanWrap = document.getElementById('doudan-wrap');\n const chengrenWrap = document.getElementById('chengren-wrap');\n\n \/\/ Hide both games\n doudanWrap.classList.remove('active');\n chengrenWrap.classList.remove('active');\n\n \/\/ Cancel previous animation\n if (_activeGameRAF) {\n cancelAnimationFrame(_activeGameRAF);\n _activeGameRAF = null;\n }\n\n \/\/ Show selected game\n if (game === 'doudan') {\n doudanWrap.classList.add('active');\n if (!doudanWrap.dataset.initialized) {\n Doudan_initGame();\n doudanWrap.dataset.initialized = 'true';\n } else {\n Doudan_resumeLoop();\n }\n } else if (game === 'chengren') {\n chengrenWrap.classList.add('active');\n if (!chengrenWrap.dataset.initialized) {\n Chengren_initGame();\n chengrenWrap.dataset.initialized = 'true';\n } else {\n Chengren_resumeLoop();\n }\n }\n\n modal.classList.add('active');\n document.body.style.overflow = 'hidden';\n}\n\nfunction closeGameModal() {\n const modal = document.getElementById('gameModal');\n modal.classList.remove('active');\n document.body.style.overflow = '';\n\n \/\/ Stop animation\n if (_activeGameRAF) {\n cancelAnimationFrame(_activeGameRAF);\n _activeGameRAF = null;\n }\n}\n\n\/\/ Click outside to close\ndocument.getElementById('gameModal').addEventListener('click', function(e) {\n if (e.target === this) closeGameModal();\n});\n\n\/* ==================== Doudan (\u6597\u86cb) Game ==================== *\/\n(function() {\n const canvas = document.getElementById('doudan-canvas');\n const ctx = canvas.getContext('2d');\n\n const Doudan_EGG_TYPES = [\n { id: 'chicken', name: '\u9e21\u86cb', emoji: '\ud83e\udd5a', hardness: 3, luck: 3, color: '#fef3c7', stroke: '#d97706', desc: '\u5747\u8861\u578b' },\n { id: 'duck', name: '\u9e2d\u86cb', emoji: '\ud83e\udd86', hardness: 5, luck: 2, color: '#dbeafe', stroke: '#2563eb', desc: '\u786c\u58f3\u578b' },\n { id: 'goose', name: '\u9e45\u86cb', emoji: '\ud83e\udebf', hardness: 7, luck: 1, color: '#e0e7ff', stroke: '#4f46e5', desc: '\u91cd\u88c5\u578b' },\n ];\n\n const Doudan_MODES = [\n { id: 'head', name: '\u86cb\u5934\u78b0\u86cb\u5934', icon: '\ud83d\udd1d' },\n { id: 'tail', name: '\u86cb\u5c3e\u78b0\u86cb\u5c3e', icon: '\ud83d\udd1a' },\n ];\n\n let Doudan_state = {\n phase: 'select',\n myEgg: null, enemyEgg: null, mode: null,\n power: 0, charging: false, chargeDir: 1,\n result: null, winStreak: 0, totalBattles: 0, isKing: false,\n myEggX: 150, myEggY: 240, enemyEggX: 450, enemyEggY: 240,\n collisionFrame: 0, particles: [], shakeTimer: 0,\n crackLevel: 0, enemyCrackLevel: 0,\n };\n\n let _doudanRAF = null;\n\n function Doudan_initUI() {\n const eggSelectEl = document.getElementById('doudan-eggSelect');\n Doudan_EGG_TYPES.forEach(egg => {\n const div = document.createElement('div');\n div.className = 'egg-option';\n div.dataset.id = egg.id;\n div.innerHTML = `<div class=\"egg-icon\">${egg.emoji}<\/div><div class=\"egg-label\">${egg.name}<\/div><div class=\"egg-stat\">${egg.desc}<\/div><div class=\"egg-stat\">\u786c\u5ea6${'\u2605'.repeat(egg.hardness)}${'\u2606'.repeat(8-egg.hardness)}<\/div>`;\n div.onclick = () => Doudan_selectEgg(egg.id);\n eggSelectEl.appendChild(div);\n });\n\n const modeSelectEl = document.getElementById('doudan-modeSelect');\n Doudan_MODES.forEach(mode => {\n const btn = document.createElement('button');\n btn.className = 'mode-btn';\n btn.dataset.id = mode.id;\n btn.textContent = mode.icon + ' ' + mode.name;\n btn.onclick = () => Doudan_selectMode(mode.id);\n modeSelectEl.appendChild(btn);\n });\n }\n\n function Doudan_selectEgg(id) {\n Doudan_state.myEgg = Doudan_EGG_TYPES.find(e => e.id === id);\n document.querySelectorAll('#doudan-wrap .egg-option').forEach(el => {\n el.classList.toggle('selected', el.dataset.id === id);\n });\n document.getElementById('doudan-modeArea').style.display = '';\n Doudan_drawScene();\n }\n\n function Doudan_selectMode(id) {\n Doudan_state.mode = Doudan_MODES.find(m => m.id === id);\n document.querySelectorAll('#doudan-wrap .mode-btn').forEach(el => {\n el.classList.toggle('selected', el.dataset.id === id);\n });\n }\n\n function Doudan_startBattle() {\n if (!Doudan_state.myEgg) { Doudan_showInfo('\u8bf7\u5148\u9009\u62e9\u4f60\u7684\u86cb\uff01'); return; }\n if (!Doudan_state.mode) { Doudan_showInfo('\u8bf7\u9009\u62e9\u78b0\u86cb\u65b9\u5f0f\uff01'); return; }\n\n const enemies = Doudan_EGG_TYPES.filter(e => e.id !== Doudan_state.myEgg.id);\n Doudan_state.enemyEgg = enemies[Math.floor(Math.random() * enemies.length)];\n Doudan_state.phase = 'ready';\n Doudan_state.power = 0;\n Doudan_state.charging = false;\n Doudan_state.chargeDir = 1;\n Doudan_state.result = null;\n Doudan_state.crackLevel = 0;\n Doudan_state.enemyCrackLevel = 0;\n Doudan_state.collisionFrame = 0;\n Doudan_state.particles = [];\n Doudan_state.myEggX = 150;\n Doudan_state.enemyEggX = 450;\n\n document.getElementById('doudan-eggSelectArea').style.display = 'none';\n document.getElementById('doudan-modeArea').style.display = 'none';\n document.getElementById('doudan-btnStart').style.display = 'none';\n document.getElementById('doudan-powerHint').textContent = '\u6309\u4f4f\u753b\u9762\u84c4\u529b\uff0c\u677e\u5f00\u78b0\u649e\uff01';\n Doudan_drawScene();\n }\n\n function Doudan_startCharge() {\n if (Doudan_state.phase === 'ready') {\n Doudan_state.phase = 'charging';\n Doudan_state.charging = true;\n Doudan_state.power = 0;\n Doudan_state.chargeDir = 1;\n }\n }\n\n function Doudan_releaseCharge() {\n if (Doudan_state.phase === 'charging') {\n Doudan_state.charging = false;\n Doudan_state.phase = 'colliding';\n document.getElementById('doudan-powerHint').textContent = '';\n Doudan_resolveCollision();\n }\n }\n\n canvas.addEventListener('mousedown', Doudan_startCharge);\n canvas.addEventListener('touchstart', function(e) { e.preventDefault(); Doudan_startCharge(); });\n canvas.addEventListener('mouseup', Doudan_releaseCharge);\n canvas.addEventListener('touchend', function(e) { e.preventDefault(); Doudan_releaseCharge(); });\n canvas.addEventListener('mouseleave', Doudan_releaseCharge);\n\n function Doudan_resolveCollision() {\n const myPower = Doudan_state.power;\n const myHardness = Doudan_state.myEgg.hardness;\n const myLuck = Doudan_state.myEgg.luck;\n const enemyPower = 30 + Math.random() * 60;\n const enemyHardness = Doudan_state.enemyEgg.hardness;\n const enemyLuck = Doudan_state.enemyEgg.luck;\n\n const myScore = myPower * 0.6 + myHardness * 8 + myLuck * (5 + Math.random() * 10);\n const enemyScore = enemyPower * 0.6 + enemyHardness * 8 + enemyLuck * (5 + Math.random() * 10);\n\n let result;\n if (Math.abs(myScore - enemyScore) < 8) result = 'draw';\n else if (myScore > enemyScore) result = 'win';\n else result = 'lose';\n\n Doudan_state.result = result;\n Doudan_state.totalBattles++;\n\n if (result === 'win') { Doudan_state.winStreak++; Doudan_state.enemyCrackLevel = 3; }\n else if (result === 'lose') { Doudan_state.winStreak = 0; Doudan_state.crackLevel = 3; }\n else { Doudan_state.crackLevel = 1; Doudan_state.enemyCrackLevel = 1; }\n\n Doudan_state.isKing = Doudan_state.winStreak >= 5;\n\n const cx = 300, cy = 220;\n for (let i = 0; i < 25; i++) {\n const angle = Math.random() * Math.PI * 2;\n const speed = 1.5 + Math.random() * 4;\n Doudan_state.particles.push({\n x: cx, y: cy,\n vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed - 2,\n life: 40 + Math.random() * 30, maxLife: 70,\n size: 2 + Math.random() * 4,\n color: result === 'win' ? '#fbbf24' : result === 'lose' ? '#ef4444' : '#a3a3a3',\n });\n }\n setTimeout(() => Doudan_showResult(result), 1200);\n }\n\n function Doudan_showResult(result) {\n const panel = document.getElementById('doudan-infoPanel');\n if (result === 'win') {\n panel.innerHTML = '\ud83d\udca5 <b>\u4f60\u8d62\u4e86\uff01<\/b> \u5bf9\u624b\u7684' + Doudan_state.enemyEgg.name + '\u788e\u4e86\uff01<br>' +\n (Doudan_state.isKing ? '<div class=\"king\">\ud83d\udc51 \u4f60\u7684\u86cb\u88ab\u5c01\u4e3a\"\u5927\u738b\"\uff01\ud83d\udc51<\/div>' :\n '\u8fde\u80dc ' + Doudan_state.winStreak + ' \u573a' + (Doudan_state.winStreak >= 3 ? '\uff0c\u79bb\u5927\u738b\u53ea\u5dee ' + (5 - Doudan_state.winStreak) + ' \u573a\uff01' : ''));\n } else if (result === 'lose') {\n panel.innerHTML = '\ud83d\udc94 <b>\u4f60\u7684' + Doudan_state.myEgg.name + '\u788e\u4e86\uff01<\/b> \u8fde\u80dc\u4e2d\u65ad\u3002<br>\u518d\u63a5\u518d\u5389\uff01';\n } else {\n panel.innerHTML = '\ud83e\udd1d <b>\u5e73\u5c40\uff01<\/b> \u4e24\u4e2a\u86cb\u90fd\u88c2\u4e86\uff0c\u4f46\u6ca1\u788e\u3002<br>\u52bf\u5747\u529b\u654c\uff01';\n }\n Doudan_state.phase = 'result';\n document.getElementById('doudan-winStreak').textContent = Doudan_state.winStreak;\n document.getElementById('doudan-totalBattles').textContent = Doudan_state.totalBattles;\n\n const ctrl = document.getElementById('doudan-mainControls');\n ctrl.innerHTML = '';\n const btnAgain = document.createElement('button');\n btnAgain.textContent = '\u518d\u6765\u4e00\u5c40\uff01';\n btnAgain.onclick = Doudan_resetBattle;\n ctrl.appendChild(btnAgain);\n const btnReset = document.createElement('button');\n btnReset.textContent = '\u91cd\u65b0\u9009\u86cb';\n btnReset.onclick = Doudan_fullReset;\n ctrl.appendChild(btnReset);\n }\n\n function Doudan_resetBattle() {\n Doudan_state.phase = 'ready';\n Doudan_state.power = 0;\n Doudan_state.result = null;\n Doudan_state.crackLevel = 0;\n Doudan_state.enemyCrackLevel = 0;\n Doudan_state.collisionFrame = 0;\n Doudan_state.particles = [];\n Doudan_state.myEggX = 150;\n Doudan_state.enemyEggX = 450;\n Doudan_state.mode = null;\n\n document.getElementById('doudan-mainControls').innerHTML = '';\n document.getElementById('doudan-powerHint').textContent = '\u6309\u4f4f\u753b\u9762\u84c4\u529b\uff0c\u677e\u5f00\u78b0\u649e\uff01';\n Doudan_showInfo('\u7ee7\u7eed\u7528' + Doudan_state.myEgg.name + '\u6218\u6597\uff01\u9009\u62e9\u78b0\u6cd5\uff1a');\n document.getElementById('doudan-eggSelectArea').style.display = 'none';\n document.getElementById('doudan-modeArea').style.display = '';\n document.querySelectorAll('#doudan-wrap .mode-btn').forEach(el => el.classList.remove('selected'));\n\n const ctrl = document.getElementById('doudan-mainControls');\n const btn = document.createElement('button');\n btn.id = 'doudan-btnStart';\n btn.textContent = '\u5f00\u6218\uff01';\n btn.onclick = Doudan_startBattle;\n ctrl.appendChild(btn);\n Doudan_drawScene();\n }\n\n function Doudan_fullReset() {\n Doudan_state.phase = 'select';\n Doudan_state.myEgg = null;\n Doudan_state.enemyEgg = null;\n Doudan_state.mode = null;\n Doudan_state.power = 0;\n Doudan_state.result = null;\n Doudan_state.crackLevel = 0;\n Doudan_state.enemyCrackLevel = 0;\n Doudan_state.collisionFrame = 0;\n Doudan_state.particles = [];\n Doudan_state.winStreak = 0;\n\n document.getElementById('doudan-eggSelectArea').style.display = '';\n document.getElementById('doudan-modeArea').style.display = 'none';\n document.querySelectorAll('#doudan-wrap .egg-option').forEach(el => el.classList.remove('selected'));\n document.querySelectorAll('#doudan-wrap .mode-btn').forEach(el => el.classList.remove('selected'));\n\n const ctrl = document.getElementById('doudan-mainControls');\n ctrl.innerHTML = '<button id=\"doudan-btnStart\" onclick=\"Doudan_startBattle()\">\u5f00\u6218\uff01<\/button>';\n document.getElementById('doudan-powerHint').textContent = '';\n Doudan_showInfo('\u4e09\u4e94\u6210\u7fa4\uff0c\u6301\u86cb\u76f8\u78b0\uff0c\u86cb\u5934\u5bf9\u86cb\u5934\u3001\u86cb\u5c3e\u78b0\u86cb\u5c3e\uff0c\u7834\u8005\u8ba4\u8f93\u3002<br>\u6700\u540e\u4e0d\u7834\u7684\u86cb\u88ab\u5c01\u4e3a <b>\"\u5927\u738b\"<\/b>\uff01');\n document.getElementById('doudan-winStreak').textContent = 0;\n document.getElementById('doudan-totalBattles').textContent = Doudan_state.totalBattles;\n Doudan_drawScene();\n }\n\n function Doudan_showInfo(html) {\n document.getElementById('doudan-infoPanel').innerHTML = html;\n }\n\n function Doudan_drawScene() {\n ctx.clearRect(0, 0, 600, 420);\n const bgGrad = ctx.createLinearGradient(0, 0, 0, 420);\n bgGrad.addColorStop(0, '#fef9c3');\n bgGrad.addColorStop(1, '#fde68a');\n ctx.fillStyle = bgGrad;\n ctx.fillRect(0, 0, 600, 420);\n ctx.fillStyle = '#d4a76a';\n ctx.fillRect(0, 340, 600, 80);\n ctx.fillStyle = '#c4956a';\n for (let i = 0; i < 600; i += 40) ctx.fillRect(i, 340, 20, 80);\n\n if (Doudan_state.phase === 'select') {\n ctx.fillStyle = '#92400e';\n ctx.font = 'bold 28px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\ud83e\udd5a \u9009\u62e9\u4f60\u7684\u86cb\uff0c\u5f00\u6218\uff01', 300, 200);\n ctx.font = '18px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.fillStyle = '#b45309';\n ctx.fillText('\u4e0d\u540c\u86cb\u6709\u4e0d\u540c\u5c5e\u6027\u54e6~', 300, 235);\n return;\n }\n\n let shakeX = 0, shakeY = 0;\n if (Doudan_state.shakeTimer > 0) {\n shakeX = (Math.random() - 0.5) * Doudan_state.shakeTimer * 2;\n shakeY = (Math.random() - 0.5) * Doudan_state.shakeTimer * 2;\n Doudan_state.shakeTimer -= 0.5;\n }\n ctx.save();\n ctx.translate(shakeX, shakeY);\n\n if (Doudan_state.myEgg) {\n Doudan_drawEgg(Doudan_state.myEggX, Doudan_state.myEggY, Doudan_state.myEgg, Doudan_state.crackLevel, false);\n ctx.fillStyle = '#78350f';\n ctx.font = 'bold 14px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\u4f60', Doudan_state.myEggX, Doudan_state.myEggY + 70);\n }\n if (Doudan_state.enemyEgg) {\n Doudan_drawEgg(Doudan_state.enemyEggX, Doudan_state.enemyEggY, Doudan_state.enemyEgg, Doudan_state.enemyCrackLevel, true);\n ctx.fillStyle = '#78350f';\n ctx.font = 'bold 14px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\u5bf9\u624b', Doudan_state.enemyEggX, Doudan_state.enemyEggY + 70);\n }\n\n if (Doudan_state.mode && (Doudan_state.phase === 'ready' || Doudan_state.phase === 'charging')) {\n ctx.fillStyle = '#92400e';\n ctx.font = 'bold 16px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText(Doudan_state.mode.icon + ' ' + Doudan_state.mode.name, 300, 50);\n }\n\n if (Doudan_state.phase === 'charging' || Doudan_state.phase === 'ready') {\n Doudan_drawPowerBar();\n }\n\n if (Doudan_state.phase === 'colliding') {\n Doudan_drawCollisionEffect();\n }\n\n Doudan_drawParticles();\n\n if (Doudan_state.phase === 'result' && Doudan_state.result) {\n ctx.fillStyle = 'rgba(0,0,0,0.3)';\n ctx.fillRect(0, 0, 600, 420);\n ctx.fillStyle = '#fff';\n ctx.font = 'bold 36px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.shadowColor = 'rgba(0,0,0,0.5)';\n ctx.shadowBlur = 8;\n if (Doudan_state.result === 'win') ctx.fillText('\ud83c\udf89 \u80dc\uff01', 300, 210);\n else if (Doudan_state.result === 'lose') ctx.fillText('\ud83d\udc94 \u8d25\uff01', 300, 210);\n else ctx.fillText('\ud83e\udd1d \u5e73\uff01', 300, 210);\n ctx.shadowBlur = 0;\n }\n\n ctx.restore();\n }\n\n function Doudan_drawEgg(x, y, eggType, crackLevel, flipped) {\n ctx.save();\n ctx.translate(x, y);\n ctx.beginPath();\n ctx.ellipse(0, 0, 32, 44, 0, 0, Math.PI * 2);\n const grad = ctx.createRadialGradient(-8, -10, 4, 0, 0, 44);\n grad.addColorStop(0, '#ffffff');\n grad.addColorStop(0.5, eggType.color);\n grad.addColorStop(1, eggType.stroke);\n ctx.fillStyle = grad;\n ctx.fill();\n ctx.strokeStyle = eggType.stroke;\n ctx.lineWidth = 2;\n ctx.stroke();\n\n if (Doudan_state.mode) {\n ctx.fillStyle = eggType.stroke;\n ctx.font = 'bold 12px sans-serif';\n ctx.textAlign = 'center';\n if (Doudan_state.mode.id === 'head') ctx.fillText('\u5934', 0, -36);\n else ctx.fillText('\u5c3e', 0, 42);\n }\n\n if (crackLevel > 0) {\n ctx.strokeStyle = '#78350f';\n ctx.lineWidth = 1.5;\n const cracks = [[[-5,-20],[0,-5],[8,10]],[[3,-15],[10,0],[5,20]],[[-10,0],[0,5],[10,15]]];\n for (let i = 0; i < Math.min(crackLevel, cracks.length); i++) {\n ctx.beginPath();\n ctx.moveTo(cracks[i][0][0], cracks[i][0][1]);\n for (let j = 1; j < cracks[i].length; j++) ctx.lineTo(cracks[i][j][0], cracks[i][j][1]);\n ctx.stroke();\n }\n if (crackLevel >= 3) {\n ctx.fillStyle = 'rgba(120,53,15,0.15)';\n ctx.fill();\n }\n }\n ctx.restore();\n }\n\n function Doudan_drawPowerBar() {\n const barX = 200, barY = 370, barW = 200, barH = 20;\n ctx.fillStyle = 'rgba(255,255,255,0.7)';\n ctx.fillRect(barX, barY, barW, barH);\n ctx.strokeStyle = '#92400e';\n ctx.lineWidth = 2;\n ctx.strokeRect(barX, barY, barW, barH);\n const pw = (Doudan_state.power \/ 100) * barW;\n const pGrad = ctx.createLinearGradient(barX, 0, barX + barW, 0);\n pGrad.addColorStop(0, '#22c55e');\n pGrad.addColorStop(0.5, '#fbbf24');\n pGrad.addColorStop(1, '#ef4444');\n ctx.fillStyle = pGrad;\n ctx.fillRect(barX, barY, pw, barH);\n ctx.fillStyle = '#78350f';\n ctx.font = 'bold 12px sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\u529b\u5ea6: ' + Math.round(Doudan_state.power) + '%', 300, barY + 15);\n }\n\n function Doudan_drawCollisionEffect() {\n Doudan_state.collisionFrame++;\n const progress = Math.min(Doudan_state.collisionFrame \/ 30, 1);\n const targetX = 300;\n Doudan_state.myEggX = 150 + (targetX - 150) * Math.min(progress * 1.5, 1);\n Doudan_state.enemyEggX = 450 - (450 - targetX) * Math.min(progress * 1.5, 1);\n if (progress >= 0.7 && Doudan_state.shakeTimer === 0) Doudan_state.shakeTimer = 12;\n if (progress >= 0.65 && progress < 0.75) {\n ctx.fillStyle = '#fbbf24';\n ctx.font = (28 + Math.random() * 10) + 'px sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\ud83d\udca5', 300, 230);\n }\n }\n\n function Doudan_drawParticles() {\n Doudan_state.particles = Doudan_state.particles.filter(p => p.life > 0);\n Doudan_state.particles.forEach(p => {\n p.x += p.vx; p.y += p.vy; p.vy += 0.12; p.life--;\n const alpha = p.life \/ p.maxLife;\n ctx.fillStyle = p.color;\n ctx.globalAlpha = alpha;\n ctx.fillRect(p.x - p.size\/2, p.y - p.size\/2, p.size, p.size);\n ctx.globalAlpha = 1;\n });\n }\n\n function Doudan_gameLoop() {\n if (Doudan_state.charging) {\n Doudan_state.power += Doudan_state.chargeDir * 1.8;\n if (Doudan_state.power >= 100) { Doudan_state.power = 100; Doudan_state.chargeDir = -1; }\n if (Doudan_state.power <= 0) { Doudan_state.power = 0; Doudan_state.chargeDir = 1; }\n }\n Doudan_drawScene();\n _doudanRAF = requestAnimationFrame(Doudan_gameLoop);\n }\n\n window.Doudan_initGame = function() {\n Doudan_initUI();\n Doudan_gameLoop();\n };\n\n window.Doudan_startBattle = Doudan_startBattle;\n window.Doudan_resumeLoop = function() {\n if (!_doudanRAF) Doudan_gameLoop();\n };\n})();\n\n\/* ==================== Chengren (\u79f0\u4eba) Game ==================== *\/\n(function() {\n const Chengren_PEOPLE = [\n { id: 'grandpa', name: '\u7237\u7237', emoji: '\ud83d\udc74', baseWeight: 68, role: '\u8001\u4eba' },\n { id: 'grandma', name: '\u5976\u5976', emoji: '\ud83d\udc75', baseWeight: 58, role: '\u8001\u4eba' },\n { id: 'papa', name: '\u7238\u7238', emoji: '\ud83d\udc68', baseWeight: 75, role: '\u4e2d\u5e74' },\n { id: 'mama', name: '\u5988\u5988', emoji: '\ud83d\udc69', baseWeight: 55, role: '\u4e2d\u5e74' },\n { id: 'kid', name: '\u5c0f\u5b69', emoji: '\ud83d\udc66', baseWeight: 32, role: '\u5c0f\u5b69' },\n ];\n\n const Chengren_LUCKY_WORDS = {\n '\u8001\u4eba': ['\u5bff\u6bd4\u5357\u5c71\uff0c\u798f\u5982\u4e1c\u6d77\uff01', '\u8eab\u9aa8\u786c\u6717\uff0c\u8d8a\u6d3b\u8d8a\u7cbe\u795e\uff01', '\u798f\u6c14\u6ee1\u6ee1\uff0c\u513f\u5b59\u6ee1\u5802\uff01', '\u9e64\u53d1\u7ae5\u989c\uff0c\u677e\u67cf\u5e38\u9752\uff01'],\n '\u4e2d\u5e74': ['\u8eab\u4f53\u7ed3\u5b9e\uff0c\u4e8b\u4e1a\u987a\u5229\uff01', '\u5065\u5eb7\u5e73\u5b89\uff0c\u5bb6\u5ead\u548c\u7766\uff01', '\u7cbe\u529b\u5145\u6c9b\uff0c\u4e07\u4e8b\u5982\u610f\uff01', '\u7a33\u5982\u6cf0\u5c71\uff0c\u4e8b\u4e1a\u6709\u6210\uff01'],\n '\u5c0f\u5b69': ['\u5feb\u9ad8\u957f\u5927\uff0c\u5b66\u4e1a\u8fdb\u6b65\uff01', '\u806a\u660e\u4f36\u4fd0\uff0c\u5065\u5eb7\u6210\u957f\uff01', '\u6d3b\u6cfc\u53ef\u7231\uff0c\u524d\u7a0b\u4f3c\u9526\uff01', '\u8301\u58ee\u6210\u957f\uff0c\u6b65\u6b65\u9ad8\u5347\uff01']\n };\n\n let Chengren_state = {\n phase: 'select',\n currentPerson: null, weights: {},\n targetWeight: 0, scalePos: 0, currentWeight: 0,\n balanceTimer: 0, isBalanced: false,\n swingAngle: 0, swingVel: 0,\n };\n\n const canvas = document.getElementById('chengren-canvas');\n const ctx = canvas.getContext('2d');\n let _chengrenRAF = null;\n let dragging = false;\n\n function Chengren_init() {\n const el = document.getElementById('chengren-personSelect');\n Chengren_PEOPLE.forEach(p => {\n const div = document.createElement('div');\n div.className = 'person-card';\n div.dataset.id = p.id;\n div.innerHTML = '<div class=\"avatar\">' + p.emoji + '<\/div><div class=\"name\">' + p.name + '<\/div><div class=\"weight\" id=\"chengren-w-' + p.id + '\">--\u65a4<\/div>';\n div.onclick = () => Chengren_selectPerson(p.id);\n el.appendChild(div);\n });\n }\n\n function Chengren_selectPerson(id) {\n if (Chengren_state.weights[id] !== undefined) return;\n document.querySelectorAll('#chengren-wrap .person-card').forEach(el => {\n el.classList.toggle('selected', el.dataset.id === id && !el.classList.contains('done'));\n });\n Chengren_state.currentPerson = Chengren_PEOPLE.find(p => p.id === id);\n if (Chengren_state.currentPerson) {\n document.getElementById('chengren-hintText').textContent = Chengren_state.currentPerson.name + ' \u51c6\u5907\u4e0a\u79e4...';\n }\n }\n\n function Chengren_startWeigh() {\n if (!Chengren_state.currentPerson) {\n document.getElementById('chengren-hintText').textContent = '\ud83d\udc46 \u8bf7\u5148\u9009\u62e9\u4e00\u4eba\uff01';\n return;\n }\n if (Chengren_state.weights[Chengren_state.currentPerson.id] !== undefined) {\n document.getElementById('chengren-hintText').textContent = '\u6b64\u4eba\u5df2\u79f0\u8fc7\uff01';\n return;\n }\n Chengren_state.phase = 'weighing';\n Chengren_state.targetWeight = Math.round(Chengren_state.currentPerson.baseWeight * 2 * (0.92 + Math.random() * 0.16));\n Chengren_state.scalePos = 20 + Math.random() * 60;\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n Chengren_state.isBalanced = false;\n Chengren_state.swingAngle = 0;\n Chengren_state.swingVel = 0;\n document.getElementById('chengren-hintText').textContent = '\ud83c\udfaf \u62d6\u52a8\u79e4\u7823\u6216\u6309 \u2190 \u2192 \u8c03\u6574\uff0c\u8ba9\u79e4\u6746\u5e73\u8861';\n document.getElementById('chengren-btnStart').disabled = true;\n document.getElementById('chengren-resultPanel').style.display = 'none';\n }\n\n function Chengren_calcWeight(pos) {\n return Math.round(40 + pos * 1.4);\n }\n\n canvas.addEventListener('mousedown', function(e) { if (Chengren_state.phase === 'weighing') { dragging = true; Chengren_handleInput(e); } });\n canvas.addEventListener('mousemove', function(e) { if (dragging && Chengren_state.phase === 'weighing') Chengren_handleInput(e); });\n canvas.addEventListener('mouseup', function() { dragging = false; });\n canvas.addEventListener('mouseleave', function() { dragging = false; });\n canvas.addEventListener('touchstart', function(e) { e.preventDefault(); if (Chengren_state.phase === 'weighing') { dragging = true; Chengren_handleTouch(e); } });\n canvas.addEventListener('touchmove', function(e) { e.preventDefault(); if (dragging && Chengren_state.phase === 'weighing') Chengren_handleTouch(e); });\n canvas.addEventListener('touchend', function() { dragging = false; });\n\n function Chengren_handleInput(e) {\n const rect = canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) \/ rect.width * canvas.width;\n Chengren_state.scalePos = Math.max(0, Math.min(100, (x - 120) \/ 3.6));\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n }\n\n function Chengren_handleTouch(e) {\n const touch = e.touches[0];\n const rect = canvas.getBoundingClientRect();\n const x = (touch.clientX - rect.left) \/ rect.width * canvas.width;\n Chengren_state.scalePos = Math.max(0, Math.min(100, (x - 120) \/ 3.6));\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n }\n\n document.addEventListener('keydown', function(e) {\n if (Chengren_state.phase !== 'weighing') return;\n if (e.key === 'ArrowLeft' || e.key === 'a') Chengren_state.scalePos = Math.max(0, Chengren_state.scalePos - 2);\n else if (e.key === 'ArrowRight' || e.key === 'd') Chengren_state.scalePos = Math.min(100, Chengren_state.scalePos + 2);\n Chengren_state.currentWeight = Chengren_calcWeight(Chengren_state.scalePos);\n Chengren_state.balanceTimer = 0;\n });\n\n function Chengren_draw() {\n ctx.clearRect(0, 0, 600, 360);\n const bg = ctx.createLinearGradient(0, 0, 0, 360);\n bg.addColorStop(0, '#fef9c3');\n bg.addColorStop(1, '#fde68a');\n ctx.fillStyle = bg;\n ctx.fillRect(0, 0, 600, 360);\n ctx.fillStyle = '#d4a76a';\n ctx.fillRect(0, 300, 600, 60);\n ctx.fillStyle = '#c4956a';\n for (let i = 0; i < 600; i += 28) ctx.fillRect(i, 300, 14, 60);\n\n if (Chengren_state.phase === 'weighing') Chengren_drawWeighing();\n else Chengren_drawIdleScale();\n\n _chengrenRAF = requestAnimationFrame(Chengren_draw);\n }\n\n function Chengren_drawIdleScale() {\n ctx.save();\n ctx.translate(300, 120);\n ctx.fillStyle = '#78350f';\n ctx.fillRect(-8, -50, 16, 50);\n ctx.beginPath();\n ctx.arc(0, -50, 20, 0, Math.PI, true);\n ctx.fill();\n ctx.fillStyle = '#a16207';\n ctx.fillRect(-180, -4, 360, 8);\n ctx.fillStyle = '#78350f';\n ctx.beginPath();\n ctx.arc(-180, 0, 6, 0, Math.PI * 2);\n ctx.arc(180, 0, 6, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = '#44403c';\n ctx.beginPath();\n ctx.arc(140, 0, 14, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n ctx.fillStyle = '#92400e';\n ctx.font = '18px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('\ud83d\udc46 \u9009\u62e9\u89d2\u8272\uff0c\u4e0a\u79e4\u79f0\u91cd\uff01', 300, 260);\n }\n\n function Chengren_drawWeighing() {\n ctx.save();\n ctx.translate(300, 100);\n const diff = Chengren_state.currentWeight - Chengren_state.targetWeight;\n const targetAngle = Math.max(-0.25, Math.min(0.25, diff * 0.006));\n Chengren_state.swingVel += (targetAngle - Chengren_state.swingAngle) * 0.08;\n Chengren_state.swingVel *= 0.88;\n Chengren_state.swingAngle += Chengren_state.swingVel;\n\n ctx.fillStyle = '#78350f';\n ctx.fillRect(-8, -45, 16, 45);\n ctx.beginPath();\n ctx.arc(0, -45, 18, 0, Math.PI, true);\n ctx.fill();\n ctx.fillStyle = '#a16207';\n ctx.fillRect(-4, -45, 8, 20);\n\n ctx.save();\n ctx.rotate(Chengren_state.swingAngle);\n const grad = ctx.createLinearGradient(-180, -4, -180, 4);\n grad.addColorStop(0, '#b45309');\n grad.addColorStop(1, '#78350f');\n ctx.fillStyle = grad;\n ctx.fillRect(-180, -4, 360, 8);\n ctx.fillStyle = '#fef3c7';\n for (let i = -160; i <= 160; i += 20) ctx.fillRect(i, -4, 1, 8);\n ctx.fillStyle = '#fff';\n for (let i = -160; i <= 160; i += 60) ctx.fillRect(i, -4, 2, 8);\n\n ctx.fillStyle = '#78350f';\n ctx.beginPath();\n ctx.arc(-175, 0, 8, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = '#a16207';\n ctx.fillRect(-179, 8, 8, 55);\n ctx.fillStyle = '#d97706';\n ctx.beginPath();\n ctx.ellipse(-175, 70, 50, 15, 0, 0, Math.PI);\n ctx.fill();\n ctx.fillRect(-225, 58, 100, 12);\n ctx.font = '34px sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText(Chengren_state.currentPerson.emoji, -175, 50);\n\n const chuX = -120 + Chengren_state.scalePos * 3.6;\n ctx.fillStyle = '#44403c';\n ctx.beginPath();\n ctx.arc(chuX, 0, 15, 0, Math.PI * 2);\n ctx.fill();\n ctx.strokeStyle = '#1c1917';\n ctx.lineWidth = 2;\n ctx.stroke();\n ctx.strokeStyle = '#a16207';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(chuX, -15);\n ctx.lineTo(chuX, -25);\n ctx.stroke();\n\n ctx.restore();\n ctx.restore();\n\n ctx.fillStyle = '#dc2626';\n ctx.font = 'bold 36px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText(Chengren_state.currentWeight + ' \u65a4', 300, 265);\n\n const isNearBalance = Math.abs(Chengren_state.currentWeight - Chengren_state.targetWeight) <= 2;\n if (isNearBalance) {\n Chengren_state.balanceTimer++;\n const balanceProgress = Math.min(Chengren_state.balanceTimer \/ 40, 1);\n ctx.fillStyle = 'rgba(22, 163, 74, ' + balanceProgress + ')';\n ctx.font = 'bold 20px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.fillText('\u2713 \u5e73\u8861\u4e2d...', 300, 295);\n ctx.fillStyle = 'rgba(22, 163, 74, 0.3)';\n ctx.fillRect(200, 305, 200, 8);\n ctx.fillStyle = '#16a34a';\n ctx.fillRect(200, 305, 200 * balanceProgress, 8);\n if (Chengren_state.balanceTimer >= 40 && !Chengren_state.isBalanced) {\n Chengren_state.isBalanced = true;\n setTimeout(Chengren_finishWeigh, 300);\n }\n } else {\n ctx.fillStyle = '#b45309';\n ctx.font = '14px \"PingFang SC\", \"Microsoft YaHei\", sans-serif';\n ctx.fillText(diff > 0 ? '\u2190 \u592a\u91cd\u4e86\uff0c\u5f80\u5de6\u79fb' : '\u2192 \u592a\u8f7b\u4e86\uff0c\u5f80\u53f3\u79fb', 300, 290);\n }\n }\n\n function Chengren_finishWeigh() {\n if (Chengren_state.phase !== 'weighing') return;\n Chengren_state.phase = 'done';\n const role = Chengren_state.currentPerson.role;\n const luckyWord = Chengren_LUCKY_WORDS[role][Math.floor(Math.random() * Chengren_LUCKY_WORDS[role].length)];\n const lastYear = Math.round(Chengren_state.currentPerson.baseWeight * 2 * (0.90 + Math.random() * 0.20));\n const change = Chengren_state.currentWeight - lastYear;\n Chengren_state.weights[Chengren_state.currentPerson.id] = { weight: Chengren_state.currentWeight, change: change, luckyWord: luckyWord };\n\n document.getElementById('chengren-w-' + Chengren_state.currentPerson.id).textContent = Chengren_state.currentWeight + '\u65a4';\n const card = document.querySelector('#chengren-wrap .person-card[data-id=\"' + Chengren_state.currentPerson.id + '\"]');\n card.classList.remove('selected');\n card.classList.add('done');\n\n const panel = document.getElementById('chengren-resultPanel');\n panel.style.display = '';\n panel.innerHTML = '<div class=\"weight-display\">' + Chengren_state.currentPerson.emoji + ' ' + Chengren_state.currentWeight + '\u65a4<\/div>' +\n '<div class=\"lucky-word\">\"' + luckyWord + '\"<\/div>' +\n '<div class=\"change ' + (change > 0 ? 'up' : change < 0 ? 'down' : '') + '\">\u4e0e\u53bb\u5e74\u76f8\u6bd4\uff1a' +\n (change > 0 ? '\u2191' + change : change < 0 ? '\u2193' + (-change) : '\u6301\u5e73') + ' \u65a4' +\n (change < -3 ? ' \u26a0\ufe0f \u6ce8\u610f\u8425\u517b\uff0c\u9884\u9632\u6d88\u7626\uff01' : '') + '<\/div>';\n\n const ctrl = document.getElementById('chengren-mainControls');\n ctrl.innerHTML = '';\n if (Object.keys(Chengren_state.weights).length < Chengren_PEOPLE.length) {\n const btnNext = document.createElement('button');\n btnNext.textContent = '\u7ee7\u7eed\u79f0\u91cd';\n btnNext.onclick = Chengren_continueWeigh;\n ctrl.appendChild(btnNext);\n }\n const btnSummary = document.createElement('button');\n btnSummary.textContent = '\u67e5\u770b\u6c47\u603b';\n btnSummary.className = 'secondary';\n btnSummary.onclick = Chengren_showSummary;\n ctrl.appendChild(btnSummary);\n const btnReset = document.createElement('button');\n btnReset.textContent = '\u91cd\u65b0\u5f00\u59cb';\n btnReset.className = 'secondary';\n btnReset.onclick = Chengren_resetAll;\n ctrl.appendChild(btnReset);\n\n document.getElementById('chengren-hintText').textContent = '\u2713 \u79f0\u91cd\u5b8c\u6210\uff01';\n Chengren_state.currentPerson = null;\n if (Object.keys(Chengren_state.weights).length >= Chengren_PEOPLE.length) Chengren_showSummary();\n }\n\n function Chengren_continueWeigh() {\n Chengren_state.phase = 'select';\n Chengren_state.currentPerson = null;\n document.getElementById('chengren-resultPanel').style.display = 'none';\n document.getElementById('chengren-hintText').textContent = '\ud83d\udc46 \u9009\u62e9\u4e0b\u4e00\u4eba\u7ee7\u7eed\u79f0\u91cd';\n const ctrl = document.getElementById('chengren-mainControls');\n ctrl.innerHTML = '<button id=\"chengren-btnStart\" onclick=\"Chengren_startWeigh()\">\u4e0a\u79e4<\/button>';\n }\n\n function Chengren_showSummary() {\n const old = document.querySelector('#chengren-wrap .summary-panel');\n if (old) old.remove();\n const panel = document.createElement('div');\n panel.className = 'summary-panel';\n const totalWeight = Chengren_PEOPLE.reduce((sum, p) => {\n const w = Chengren_state.weights[p.id];\n return sum + (w ? w.weight : 0);\n }, 0);\n panel.innerHTML = '<h3>\ud83c\udfc6 \u79f0\u4eba\u6c47\u603b<\/h3><table class=\"summary-table\"><tr><th>\u59d3\u540d<\/th><th>\u4f53\u91cd<\/th><th>\u53d8\u5316<\/th><th>\u795d\u798f\u8bed<\/th><\/tr>' +\n Chengren_PEOPLE.map(p => {\n const w = Chengren_state.weights[p.id];\n if (!w) return '<tr><td>' + p.emoji + p.name + '<\/td><td colspan=\"3\" style=\"color:#a16207\">\u672a\u79f0\u91cd<\/td><\/tr>';\n return '<tr><td>' + p.emoji + p.name + '<\/td><td><b>' + w.weight + '<\/b>\u65a4<\/td>' +\n '<td style=\"color:' + (w.change > 0 ? '#16a34a' : w.change < 0 ? '#dc2626' : '#78350f') + '\">' +\n (w.change > 0 ? '\u2191' + w.change : w.change < 0 ? '\u2193' + (-w.change) : '\u2014') + '<\/td>' +\n '<td style=\"font-size:0.8em\">' + w.luckyWord.slice(0, 7) + '...<\/td><\/tr>';\n }).join('') +\n '<\/table><div style=\"text-align:center;margin-top:8px;color:#78350f;font-size:0.9em\">\u5168\u5bb6\u603b\u91cd\uff1a<b>' + totalWeight + '<\/b> \u65a4<\/div>' +\n '<div class=\"final-msg\">' + (Object.keys(Chengren_state.weights).length >= Chengren_PEOPLE.length ?\n '\ud83c\udf89 \u5168\u5bb6\u79f0\u91cd\u5b8c\u6210\uff0c\u8eab\u4f53\u5065\u5eb7\uff0c\u7acb\u590f\u5b89\u5eb7\uff01' :\n '\ud83d\udc46 \u8fd8\u6709 ' + (Chengren_PEOPLE.length - Object.keys(Chengren_state.weights).length) + ' \u4eba\u672a\u79f0\u91cd') + '<\/div>';\n document.querySelector('#chengren-wrap .game-area').appendChild(panel);\n document.getElementById('chengren-hintText').textContent = '\u7acb\u590f\u4e60\u4fd7\u5b8c\u6210\uff01\u613f\u5927\u5bb6\u5065\u5eb7\u5e73\u5b89\uff0c\u75b0\u590f\u4e0d\u7626\uff01';\n }\n\n function Chengren_resetAll() {\n Chengren_state = {\n phase: 'select', currentPerson: null, weights: {},\n targetWeight: 0, scalePos: 0, currentWeight: 0,\n balanceTimer: 0, isBalanced: false,\n swingAngle: 0, swingVel: 0,\n };\n document.querySelectorAll('#chengren-wrap .person-card').forEach(el => el.classList.remove('selected', 'done'));\n Chengren_PEOPLE.forEach(p => {\n const el = document.getElementById('chengren-w-' + p.id);\n if (el) el.textContent = '--\u65a4';\n });\n document.getElementById('chengren-resultPanel').style.display = 'none';\n const oldSummary = document.querySelector('#chengren-wrap .summary-panel');\n if (oldSummary) oldSummary.remove();\n const ctrl = document.getElementById('chengren-mainControls');\n ctrl.innerHTML = '<button id=\"chengren-btnStart\" onclick=\"Chengren_startWeigh()\">\u4e0a\u79e4<\/button>';\n document.getElementById('chengren-hintText').textContent = '\ud83d\udc46 \u9009\u62e9\u4e00\u4eba\uff0c\u70b9\u51fb\u300c\u4e0a\u79e4\u300d\u5f00\u59cb\u79f0\u91cd';\n }\n\n function Chengren_gameLoop() {\n Chengren_draw();\n }\n\n window.Chengren_initGame = function() {\n Chengren_init();\n Chengren_gameLoop();\n };\n\n window.Chengren_startWeigh = Chengren_startWeigh;\n window.Chengren_resumeLoop = function() {\n if (!_chengrenRAF) Chengren_gameLoop();\n };\n})();\n\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"\u7acb\u590f \u00b7 \u590f\u4e4b\u59cb\uff0c\u4e07\u7269\u79c0 \u7acb\u590f \u7acb\u590f \u8282\u6c14\u4ecb\u7ecd \u7269\u5019\u4e09\u5019 \u4f20\u7edf\u4e60\u4fd7 \u590f\u5b63\u517b\u751f \u8bd7\u8bcd\u96c5\u97f5 \u65f6\u4ee4\u7f8e\u98df \u4e8c\u5341\u56db\u8282\u6c14 […]","protected":false},"author":1,"featured_media":1079,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template-2","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-1078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tupian","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":1,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1078\/revisions"}],"predecessor-version":[{"id":1080,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1078\/revisions\/1080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media\/1079"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}