\u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2d\u0e34\u0e19\u0e40\u0e17\u0e2d\u0e23\u0e4c\u0e41\u0e2d\u0e04\u0e0a\u0e31\u0e48\u0e19 - Soul Quartet<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+TC:wght@400;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root { \n --txt-main: #f2ece9; \n --title-color: #d2cbc9 !important;\n --card-bg: rgba(44, 44, 44, 0.4); \n --accent-color: #a09f9b;\n --font-main: 'Noto Sans TC', sans-serif;\n --font-serif: 'Noto Serif TC', serif;\n --bg-grad-1: #5e4b49; --bg-grad-2: #695351; --bg-grad-3: #867b78; --bg-grad-4: #a09f9b; --bg-grad-5: #d2cbc9;\n }\n\n body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: var(--font-main); overflow: hidden; background-color: transparent; }\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\n\n \/* =========================================\n \u661f\u7a7a\u80cc\u666f\n ========================================= *\/\n .starry-background-wrapper { \n position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; \n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n transition: background 1.5s ease;\n }\n .starry-background-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%); }\n .starry-background-wrapper::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.5px, transparent 0.5px), radial-gradient(circle, rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px); background-size: 25px 25px, 37px 37px; opacity: 0.6; animation: grain 8s steps(10) infinite; }\n \n @keyframes grain { 0% { transform: translate(0, 0); } 100% { transform: translate(-10%, 5%); } }\n @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }\n @keyframes sparkle { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(200, 200, 255, 0.8); } }\n \n .starry-background-wrapper .stars { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }\n .starry-background-wrapper .star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle var(--duration) infinite ease-in-out; animation-delay: var(--delay); }\n .starry-background-wrapper .star.large { width: 4px; height: 4px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }\n .starry-background-wrapper .star.medium { width: 3px; height: 3px; box-shadow: 0 0 7px rgba(255, 255, 255, 0.6); }\n .starry-background-wrapper .star.small { width: 2px; height: 2px; box-shadow: 0 0 5px rgba(255, 255, 255, 0.4); }\n .starry-background-wrapper .star.sparkle { width: 5px; height: 5px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(200, 200, 255, 0.5); animation: sparkle 2.5s infinite ease-in-out; animation-delay: var(--delay); }\n \n \/* \u6d41\u661f *\/\n .starry-background-wrapper .meteor { position: fixed; width: 5px; height: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8); opacity: 0; z-index: 100; }\n .starry-background-wrapper .meteor.big { width: 10px; height: 10px; box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 255, 255, 0.9); }\n .starry-background-wrapper .meteor::before { content: ''; position: absolute; top: 50%; left: 100%; width: 150px; height: 2px; background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8), #fff); transform: translateY(-50%); border-radius: 2px; }\n .starry-background-wrapper .meteor.big::before { width: 250px; height: 4px; }\n @keyframes meteorFall { 0% { opacity: 1; transform: translate(0, 0) rotate(-45deg); } 100% { opacity: 0; transform: translate(-500px, 500px) rotate(-45deg); } }\n @keyframes meteorFallBig { 0% { opacity: 1; transform: translate(0, 0) rotate(-45deg); } 100% { opacity: 0; transform: translate(-800px, 800px) rotate(-45deg); } }\n .starry-background-wrapper .meteor.active { animation: meteorFall var(--duration) linear forwards; }\n .starry-background-wrapper .meteor.big.active { animation: meteorFallBig var(--duration) linear forwards; }\n\n \/* =========================================\n \u4ecb\u9762\u4f48\u5c40\n ========================================= *\/\n #immersive-quiz-wrapper {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100%; z-index: 10;\n background-color: transparent;\n display: flex; justify-content: center; align-items: center;\n }\n\n .quiz-card-container {\n width: 90%; max-width: 1000px;\n height: 92dvh; max-height: 900px;\n background: transparent; padding: 0;\n display: flex; flex-direction: column;\n position: relative; z-index: 10;\n padding-top: 20px;\n }\n\n .top-header {\n width: 100%; display: flex; justify-content: space-between; align-items: center;\n margin-bottom: 8px; flex-shrink: 0;\n }\n\n .chapter-pill {\n font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #fff;\n background: rgba(255,255,255,0.15); \n padding: 6px 14px; border-radius: 50px; \n border: 1px solid rgba(255,255,255,0.3);\n backdrop-filter: blur(4px);\n display: flex; align-items: center; gap: 8px;\n }\n \n #mobileBackBtn { display: none; cursor: pointer; font-size: 16px; }\n\n \/* \ud83d\udd25 \u5730\u7403\u6309\u9215 *\/\n .globe-btn {\n width: 33px;\n height: 33px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255,255,255,0.12);\n border: 1px solid rgba(255,255,255,0.35);\n box-shadow: 0 2px 6px rgba(0,0,0,0.12);\n padding: 0;\n transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n flex-shrink: 0;\n z-index: 100;\n }\n \n .globe-btn span {\n font-size: 20px;\n line-height: 1;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .globe-btn:hover {\n transform: scale(1.1);\n border-color: rgba(255,255,255,0.55);\n box-shadow: 0 3px 10px rgba(0,0,0,0.18);\n }\n \n .globe-btn:hover span {\n opacity: 0.9;\n }\n \n .globe-btn:active {\n transform: scale(0.95);\n }\n\n \/* \u9032\u5ea6\u689d *\/\n .progress-container { width: 100%; margin-bottom: 0px; flex-shrink: 0; } \n .progress-track { height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 10px; overflow: visible; }\n \n @keyframes breatheSideways {\n 0%, 100% { transform: scaleX(1); box-shadow: 0 0 4px rgba(255,255,255,0.3); }\n 50% { transform: scaleX(1.015); box-shadow: 0 0 6px rgba(255,255,255,0.5); }\n }\n \n .progress-bar-fill { \n height: 100%; width: 0%; border-radius: 10px; \n background: linear-gradient(90deg, rgba(255,255,255,0.6), #fff, rgba(255,255,255,0.85)); \n transition: width 0.5s ease; position: relative;\n transform-origin: left center;\n animation: breatheSideways 2.5s infinite ease-in-out;\n }\n \n @keyframes breatheDot {\n 0%, 100% { transform: translateY(-50%) scaleX(1); opacity: 0.6; }\n 50% { transform: translateY(-50%) scaleX(1.8); opacity: 0.9; }\n }\n \n .progress-bar-fill::after {\n content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);\n width: 12px; height: 4px;\n background: linear-gradient(90deg, #fff, rgba(255,255,255,0));\n border-radius: 0 4px 4px 0;\n animation: breatheDot 2.5s infinite ease-in-out;\n transform-origin: left center;\n }\n\n \/* \ud83d\udd25 \u984c\u76ee\u5340\u57df - \u589e\u52a0\u9593\u8ddd *\/\n .question-area { \n width: 100%;\n height: 150px; \/* \ud83d\udd25 \u518d\u589e\u52a0\u9ad8\u5ea6 *\/\n margin-bottom: 8px; \/* \ud83d\udd25 \u589e\u52a0\u8207\u5716\u7247\u9593\u8ddd *\/\n flex-shrink: 0;\n display: flex; flex-direction: column; align-items: center; justify-content: flex-start;\n position: relative; padding: 0 10px;\n padding-top: 15px;\n }\n\n \/* \ud83d\udd25 \u96fb\u8166\u7248\u6253\u5b57\u6a5f - \u589e\u52a0\u4e0a\u4e0b\u9593\u8ddd *\/\n .desktop-minor-transition {\n font-size: 17px; color: var(--accent-color); \n opacity: 0; display: none; \n transform: translateY(5px); transition: opacity 0.5s ease, transform 0.5s ease;\n font-weight: 500; width: 100%; text-align: center;\n text-shadow: 0 2px 8px rgba(0,0,0,0.8);\n position: relative;\n margin-top: 8px; \/* \ud83d\udd25 \u4e0a\u9593\u8ddd\u589e\u52a0 *\/\n margin-bottom: 22px; \/* \ud83d\udd25 \u4e0b\u9593\u8ddd\u589e\u52a0 *\/\n line-height: 1.5;\n flex-shrink: 0;\n }\n .desktop-minor-transition.active { display: block; }\n .desktop-minor-transition.show { opacity: 1; transform: translateY(0); }\n\n .question-text {\n font-size: 28px; font-weight: 700; line-height: 1.35; \n color: var(--title-color) !important; \n text-shadow: 0 2px 10px rgba(0,0,0,0.5); font-family: var(--font-serif);\n margin: 0; text-align: center; width: 100%;\n transition: font-size 0.3s ease; \n margin-top: auto; margin-bottom: auto;\n }\n \n .question-area.has-transition .question-text {\n margin-top: 0; margin-bottom: auto;\n }\n \n .content-body {\n flex: 1; width: 100%;\n display: flex; flex-direction: column; justify-content: center;\n overflow: hidden; min-height: 0; \n }\n\n .options-grid { \n display: grid; grid-template-columns: 1fr 1fr; gap: 40px; \n width: 100%; height: 100%; align-items: center; justify-items: center;\n }\n\n .option-container {\n width: 100%; max-width: 450px;\n cursor: pointer; position: relative;\n aspect-ratio: 1 \/ 1; \n border-radius: 24px; overflow: hidden;\n background: var(--card-bg);\n border: 1px solid rgba(255,255,255,0.15);\n box-shadow: 0 8px 20px rgba(0,0,0,0.25);\n transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), border 0.2s;\n }\n .option-container:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.5); }\n .option-container:active { transform: scale(1.02); border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,0.3); }\n\n .option-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; display: block; }\n .option-container:hover .option-img { transform: scale(1.08); }\n\n .option-text-overlay {\n position: absolute; bottom: 0; left: 0; width: 100%;\n padding: 50px 20px 25px 20px; \n display: flex; align-items: flex-end; justify-content: center;\n background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 40%, transparent 100%);\n z-index: 5; pointer-events: none;\n }\n .option-text {\n color: #fff; font-size: 20px; font-weight: 500; letter-spacing: 1px;\n text-shadow: 0 2px 5px rgba(0,0,0,0.9); text-align: center;\n }\n\n .nav-area { margin-top: 15px; width: 100%; height: 40px; position: relative; flex-shrink: 0; }\n .nav-btn { position: absolute; left: 0; bottom: 0; background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 14px; cursor: pointer; padding: 5px 10px; transition: 0.3s; display: flex; align-items: center; gap: 5px; }\n .nav-btn:hover { color: #fff; }\n .nav-btn.hidden { opacity: 0; pointer-events: none; }\n\n \/* iframe \u5d4c\u5165\u5c64 *\/\n .iframe-overlay {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n z-index: 99999; background: #0b0b0b; display: none;\n }\n .iframe-overlay.active { display: block; }\n .iframe-overlay iframe {\n width: 100%; height: 100%; border: none;\n background: transparent;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n .iframe-overlay iframe.loaded { opacity: 1; }\n\n \/* iframe loading \u52d5\u756b *\/\n .iframe-loader {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n z-index: 1;\n }\n .iframe-loader.hidden { display: none; }\n .iframe-spinner {\n width: 50px; height: 50px;\n border: 3px solid rgba(212, 191, 151, 0.2);\n border-top-color: #d4bf97;\n border-radius: 50%;\n animation: iframeSpin 1s linear infinite;\n }\n @keyframes iframeSpin { to { transform: rotate(360deg); } }\n .iframe-loader-text {\n color: #d4bf97;\n font-size: 14px;\n letter-spacing: 2px;\n opacity: 0.8;\n }\n\n \/* =========================================\n \ud83d\udd25 \u904e\u5834\u52d5\u756b - \u900f\u660e\u80cc\u666f + \u4e0d\u540c\u984f\u8272\u7159\u706b\n ========================================= *\/\n .transition-layer { \n position: fixed; top: 0; left: 0; width: 100%; height: 100%; \n background: rgba(0, 0, 0, 0.85); \/* \ud83d\udd25 \u900f\u660e\u5ea685% *\/\n z-index: 9999; \n display: flex; flex-direction: column; justify-content: center; align-items: center; \n opacity: 0; pointer-events: none; transition: opacity 0.8s ease; cursor: pointer; \n }\n .transition-layer.active { opacity: 1; pointer-events: auto; }\n .transition-content { text-align: center; max-width: 800px; padding: 20px 30px; position: relative; z-index: 10; box-sizing: border-box; }\n .transition-chapter { font-size: 14px; letter-spacing: 3px; color: var(--accent-color); margin-bottom: 20px; opacity: 0; transform: translateY(20px); transition: 0.8s ease; }\n .transition-text { font-family: var(--font-serif); font-size: 26px; font-weight: 700; line-height: 1.6; color: #fff; white-space: pre-line; overflow-wrap: break-word; word-break: break-word; }\n .tap-hint { position: absolute; bottom: 40px; color: rgba(255,255,255,0.4); font-size: 12px; animation: blink 2s infinite; pointer-events: none; }\n .active .transition-chapter { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }\n @keyframes blink { 0%,100% { opacity: 0.3; } 50% { opacity: 0.8; } }\n #fireworksCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }\n\n \/* =========================================\n \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801 - \u6eab\u6696\u6f38\u5c64 + \u6c23\u7403\n ========================================= *\/\n .transition-layer.final-mode {\n background: linear-gradient(180deg,\n #8B7355 0%,\n #A08060 25%,\n #C4A77D 50%,\n #D4B896 75%,\n #E8D4B8 100%\n );\n cursor: default;\n overflow-y: auto;\n justify-content: flex-start; \/* \u8986\u84cb center\uff0c\u5f9e\u9802\u90e8\u958b\u59cb\u6392\u5217 *\/\n padding-top: 35px;\n padding-bottom: 35px;\n }\n\n .final-mode .transition-content {\n max-width: 520px;\n padding: 12px 25px 18px;\n text-align: center;\n }\n\n .final-mode .transition-chapter { display: none; }\n .final-mode .tap-hint { display: none; }\n\n .final-mode .transition-text {\n font-family: var(--font-main);\n font-size: 15px;\n text-align: center;\n line-height: 1.8;\n color: #4a4a4a;\n opacity: 0;\n transition: opacity 1s;\n font-weight: 400;\n }\n .final-mode .transition-text.fade-in { opacity: 1; }\n\n \/* \ud83c\udfc6 LOGO \u5fbd\u7ae0 - \u5927\u5730\u8272\u7cfb *\/\n .final-badge {\n width: 100px;\n height: 100px;\n margin: 0 auto 8px;\n background: linear-gradient(145deg, #E8D4B8 0%, #D4C4A8 50%, #C4B498 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n animation: badgePulse 2.5s ease-in-out infinite, badgeFloat 3s ease-in-out infinite;\n position: relative;\n padding: 15px;\n }\n .final-badge img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n filter: drop-shadow(0 2px 4px rgba(93, 78, 55, 0.2));\n }\n .final-badge::before {\n content: '';\n position: absolute;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n border: 2px dashed rgba(160, 128, 96, 0.4);\n animation: badgeRotate 25s linear infinite;\n }\n .final-badge::after {\n content: '';\n position: absolute;\n width: 165px;\n height: 165px;\n border-radius: 50%;\n border: 1px dotted rgba(139, 115, 85, 0.25);\n animation: badgeRotate 35s linear infinite reverse;\n }\n @keyframes badgePulse {\n 0%, 100% {\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n }\n 50% {\n box-shadow:\n 0 0 0 12px rgba(160, 128, 96, 0.15),\n 0 0 40px rgba(139, 115, 85, 0.4),\n 0 15px 45px rgba(93, 78, 55, 0.3);\n }\n }\n @keyframes badgeFloat {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n @keyframes badgeRotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n .final-mode .final-title {\n font-size: 26px;\n color: #3D3225;\n text-align: center;\n margin-bottom: 2px;\n font-weight: 700;\n font-family: var(--font-serif);\n line-height: 1.2;\n text-shadow: 0 1px 2px rgba(255,255,255,0.5);\n }\n\n .final-subtitle {\n font-size: 13px;\n color: #5D4E37;\n margin-bottom: 8px;\n letter-spacing: 2px;\n font-weight: 500;\n }\n\n \/* \ud83d\udce6 \u8cc7\u8a0a\u5361\u7247 *\/\n .final-card {\n background: rgba(255, 255, 255, 0.85);\n border-radius: 12px;\n padding: 14px 20px;\n margin-bottom: 5px;\n box-shadow: 0 4px 20px rgba(93, 78, 55, 0.15);\n text-align: left;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.5);\n transform: translateY(20px);\n opacity: 0;\n animation: cardSlideUp 0.6s ease forwards;\n }\n .final-card:nth-child(2) { animation-delay: 0.2s; }\n .final-card:nth-child(3) { animation-delay: 0.4s; }\n .final-card:nth-child(4) { animation-delay: 0.6s; }\n @keyframes cardSlideUp {\n to { transform: translateY(0); opacity: 1; }\n }\n\n .final-card-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n }\n .final-card-icon {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n }\n .final-card-icon.thanks { background: linear-gradient(135deg, #E8D4B8, #C4A77D); }\n .final-card-icon.photo { background: linear-gradient(135deg, #B8D4E8, #7DA0C4); }\n .final-card-icon.time { background: linear-gradient(135deg, #D4E8B8, #A0C47D); }\n\n .final-card-title {\n font-weight: 700;\n color: #3D3225;\n font-size: 15px;\n }\n .final-card-text {\n color: #4a4a4a;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .final-mode .final-highlight {\n color: #6B4C0A;\n font-weight: 700;\n background: linear-gradient(120deg, rgba(255, 200, 50, 0.35) 0%, rgba(255, 165, 0, 0.3) 100%);\n padding: 2px 8px;\n border-radius: 4px;\n }\n\n \/* \u2728 \u9583\u720d\u661f\u661f *\/\n .final-stars {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n .final-star {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #FFD700;\n border-radius: 50%;\n animation: starTwinkle 2s ease-in-out infinite;\n box-shadow: 0 0 6px #FFD700;\n }\n @keyframes starTwinkle {\n 0%, 100% { opacity: 0.3; transform: scale(0.8); }\n 50% { opacity: 1; transform: scale(1.2); }\n }\n\n \/* \ud83d\udd25 \u6700\u7d42\u9801\u6309\u9215 *\/\n .final-btn {\n display: none;\n margin: 12px auto 0 auto;\n padding: 14px 40px;\n font-size: 16px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 8px 25px rgba(93, 78, 55, 0.4);\n transition: all 0.3s ease;\n letter-spacing: 1px;\n position: relative;\n overflow: hidden;\n }\n .final-btn::before {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n @keyframes btnShine {\n 0%, 100% { left: -100%; }\n 50% { left: 100%; }\n }\n .final-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 35px rgba(93, 78, 55, 0.5);\n }\n .final-btn.show { display: inline-block; }\n\n \/* \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236 - \u4e3b\u6309\u9215\u7981\u7528 *\/\n .final-btn.disabled {\n background: linear-gradient(135deg, #999 0%, #aaa 50%, #bbb 100%);\n cursor: not-allowed;\n box-shadow: none;\n opacity: 0.6;\n pointer-events: none;\n }\n .final-btn.disabled::before { animation: none; }\n\n .final-unlock-hint {\n display: none;\n text-align: center;\n margin-top: 10px;\n font-size: 12px;\n font-weight: 500;\n color: rgba(80, 70, 60, 0.7);\n letter-spacing: 0.5px;\n }\n .final-unlock-hint.show { display: block; }\n\n \/* \ud83c\udd93 \u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\u6309\u9215 *\/\n .final-simple-btn {\n display: inline-block;\n padding: 20px 60px;\n font-size: 22px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 700;\n cursor: pointer;\n box-shadow: 0 8px 25px rgba(93, 78, 55, 0.5);\n transition: all 0.3s ease;\n text-decoration: none;\n letter-spacing: 2px;\n position: relative;\n overflow: hidden;\n animation: simpleBtnBreathe 2s ease-in-out infinite;\n min-width: 280px;\n }\n @keyframes simpleBtnBreathe {\n 0%, 100% { box-shadow: 0 8px 25px rgba(93, 78, 55, 0.5); transform: scale(1); }\n 50% { box-shadow: 0 12px 40px rgba(93, 78, 55, 0.7), 0 0 20px rgba(160, 128, 96, 0.4); transform: scale(1.05); }\n }\n .final-simple-btn::before {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n .final-simple-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 10px 35px rgba(93, 78, 55, 0.5);\n animation: none;\n }\n\n \/* \ud83d\udd12 \u4ed8\u8cbb\u906e\u7f69\u5361\u7247 *\/\n .final-card.locked {\n position: relative;\n opacity: 0.45;\n }\n .final-card.locked::after {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: rgba(190, 185, 175, 0.45);\n border-radius: 12px;\n z-index: 1;\n }\n\n \/* \ud83d\udd19 Final \u9801\u8fd4\u56de\u6309\u9215 *\/\n .final-back-btn {\n display: inline-block;\n margin-top: 8px;\n padding: 8px 20px;\n background: transparent;\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 25px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 14px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .final-back-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.6);\n color: rgba(255, 255, 255, 0.9);\n }\n\n \/* \ud83c\udf88 \u6c23\u7403\u5bb9\u5668 *\/\n .balloon-container {\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n overflow: hidden;\n pointer-events: none;\n z-index: 0;\n display: none;\n }\n\n \/* \u57fa\u790e\u6c23\u7403\u52d5\u756b *\/\n .balloon-base {\n position: absolute;\n bottom: -120px;\n animation: balloonFloat var(--duration, 12s) ease-in-out infinite;\n animation-delay: var(--delay, 0s);\n opacity: 0;\n }\n @keyframes balloonFloat {\n 0% { transform: translateY(0) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { transform: translateY(-120vh) rotate(15deg); opacity: 0; }\n }\n\n \/* \ud83d\udd34 \u5713\u5f62\u6c23\u7403 *\/\n .balloon-round {\n width: 55px;\n height: 68px;\n border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\n }\n .balloon-round::after {\n content: '';\n position: absolute;\n bottom: -25px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n .balloon-round .shine {\n position: absolute;\n width: 12px;\n height: 18px;\n background: rgba(255,255,255,0.5);\n border-radius: 50%;\n top: 12px;\n left: 10px;\n }\n\n \/* \u2764\ufe0f \u611b\u5fc3\u6c23\u7403 *\/\n .balloon-heart {\n width: 50px;\n height: 45px;\n background: transparent !important;\n }\n .balloon-heart::before,\n .balloon-heart::after {\n content: '';\n position: absolute;\n top: 0;\n width: 26px;\n height: 40px;\n border-radius: 26px 26px 0 0;\n background: inherit;\n }\n .balloon-heart::before {\n left: 25px;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n background: var(--heart-color);\n }\n .balloon-heart::after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n background: var(--heart-color);\n }\n .balloon-heart .string {\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n\n \/* \ud83c\udf69 \u751c\u751c\u5708\u6c23\u7403 *\/\n .balloon-donut {\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n }\n .balloon-donut::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: linear-gradient(180deg, #A08060 0%, #C4A77D 50%, #D4B896 100%);\n }\n .balloon-donut::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n .balloon-donut .sprinkles {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n .balloon-donut .sprinkles::before,\n .balloon-donut .sprinkles::after {\n content: '';\n position: absolute;\n width: 4px;\n height: 8px;\n border-radius: 2px;\n }\n .balloon-donut .sprinkles::before {\n top: 8px; left: 20px;\n background: #fff;\n transform: rotate(30deg);\n }\n .balloon-donut .sprinkles::after {\n top: 15px; right: 12px;\n background: #FFD700;\n transform: rotate(-20deg);\n }\n\n \/* \u2b50 \u661f\u661f\u6c23\u7403 *\/\n .balloon-star {\n width: 50px;\n height: 50px;\n background: transparent !important;\n }\n .balloon-star::before {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 50px;\n height: 50px;\n background: var(--star-color);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n }\n .balloon-star::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n\n \/* \u984f\u8272\u8b8a\u9ad4 *\/\n .color-pink { background: rgba(255, 182, 193, 0.75); --heart-color: rgba(255, 182, 193, 0.75); --star-color: rgba(255, 182, 193, 0.75); }\n .color-blue { background: rgba(173, 216, 230, 0.75); --heart-color: rgba(173, 216, 230, 0.75); --star-color: rgba(173, 216, 230, 0.75); }\n .color-peach { background: rgba(255, 218, 185, 0.75); --heart-color: rgba(255, 218, 185, 0.75); --star-color: rgba(255, 218, 185, 0.75); }\n .color-lavender { background: rgba(221, 180, 221, 0.75); --heart-color: rgba(221, 180, 221, 0.75); --star-color: rgba(221, 180, 221, 0.75); }\n .color-mint { background: rgba(176, 224, 200, 0.75); --heart-color: rgba(176, 224, 200, 0.75); --star-color: rgba(176, 224, 200, 0.75); }\n .color-cream { background: rgba(255, 250, 220, 0.75); --heart-color: rgba(255, 250, 220, 0.75); --star-color: rgba(255, 250, 220, 0.75); }\n .color-coral { background: rgba(255, 160, 140, 0.7); --heart-color: rgba(255, 160, 140, 0.7); --star-color: rgba(255, 160, 140, 0.7); }\n .color-gold { background: rgba(255, 215, 150, 0.7); --heart-color: rgba(255, 215, 150, 0.7); --star-color: rgba(255, 215, 150, 0.7); }\n\n \/* =========================================\n \u624b\u6a5f\u7248 - \u5b8c\u5168\u81ea\u9069\u61c9\n ========================================= *\/\n @media (max-width: 900px) {\n .quiz-card-container { \n height: 100vh; \/* fallback *\/\n height: 100svh; \/* \u5c0f\u8996\u7a97\u9ad8\u5ea6\uff0c\u78ba\u4fdd\u5730\u5740\u6b04\u986f\u793a\u6642\u4e5f\u4e0d\u6ea2\u51fa *\/\n padding: 10px 12px 10px 12px;\n display: flex;\n flex-direction: column;\n }\n\n \/* \ud83d\udd25 \u78ba\u4fdd\u9802\u90e8\u5340\u57df\u986f\u793a *\/\n .top-header { \n margin-bottom: 5px; \n flex-shrink: 0; \n display: flex !important;\n }\n .progress-container { \n margin-bottom: 5px; \n flex-shrink: 0; \n display: block !important;\n }\n \n .question-area { \n flex-shrink: 0;\n min-height: 50px;\n max-height: 90px;\n padding: 8px 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .question-area.has-transition .question-text { margin-top: auto; margin-bottom: auto; }\n .question-text { \n font-size: 18px;\n line-height: 1.4;\n padding: 0 5px;\n }\n\n .desktop-minor-transition { display: none !important; }\n .nav-area { display: none !important; }\n\n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u5927\u8f49\u5834\u6587\u5b57 - \u9632\u6b62\u6ea2\u51fa *\/\n .transition-content {\n max-width: 100%;\n padding: 15px 20px;\n }\n .transition-text {\n font-size: 20px;\n line-height: 1.5;\n }\n\n \/* \ud83d\udd25 \u5167\u5bb9\u5340\u57df - \u4f7f\u7528 flex: 1 \u586b\u6eff\u5269\u9918\u7a7a\u9593 *\/\n .content-body {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 5px 0;\n -webkit-overflow-scrolling: touch;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u7db2\u683c - \u5e73\u5206\u7a7a\u9593 *\/\n .options-grid { \n display: flex; \n flex-direction: column;\n width: 100%;\n height: 100%;\n gap: 8px;\n justify-content: center;\n align-items: center;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u5bb9\u5668 - \u81ea\u9069\u61c9\uff0c\u5141\u8a31\u7e2e\u5c0f *\/\n .option-container {\n width: min(85vw, calc((100svh - 200px) \/ 2 - 10px));\n max-height: calc((100svh - 200px) \/ 2 - 10px);\n aspect-ratio: 1 \/ 1;\n max-width: none;\n margin: 0;\n border-radius: 18px;\n flex-shrink: 1;\n min-height: 0;\n }\n \n .option-container:active { \n transform: none;\n border-color: #fff; \n border-width: 2px;\n box-shadow: 0 0 25px rgba(255,255,255,0.4); \n }\n \n .option-img { \n object-fit: cover; \n height: 100%; \n width: 100%; \n }\n .option-text { \n font-size: 16px; \n font-weight: 600; \n }\n .option-text-overlay { \n padding-bottom: 12px; \n padding-top: 35px; \n }\n \n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u6700\u7d42\u9801 *\/\n .final-mode .transition-content {\n padding: 10px 15px 15px;\n max-width: 100%;\n }\n\n .final-badge {\n width: 85px;\n height: 85px;\n margin-bottom: 6px;\n padding: 10px;\n }\n .final-badge::before {\n width: 100px;\n height: 100px;\n }\n .final-badge::after {\n width: 115px;\n height: 115px;\n }\n\n .final-mode .final-title {\n font-size: 22px;\n margin-bottom: 2px;\n line-height: 1.2;\n }\n\n .final-subtitle {\n font-size: 12px;\n margin-bottom: 6px;\n }\n\n .final-card {\n padding: 12px 16px;\n margin-bottom: 4px;\n border-radius: 10px;\n }\n .final-card-icon {\n width: 32px;\n height: 32px;\n font-size: 16px;\n }\n .final-card-title { font-size: 14px; }\n .final-card-text { font-size: 13px; line-height: 1.55; }\n\n .final-mode .transition-text {\n font-size: 13px;\n line-height: 1.6;\n text-align: center;\n }\n\n .final-btn {\n padding: 12px 35px;\n font-size: 14px;\n margin-top: 10px;\n }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403 *\/\n .balloon-base { transform: scale(0.85); }\n }\n \n \/* \ud83d\udd25 \u5c0f\u87a2\u5e55\u624b\u6a5f *\/\n @media (max-width: 380px) {\n .quiz-card-container { padding: 8px 10px 8px 10px; }\n\n .question-area {\n min-height: 45px;\n max-height: 75px;\n }\n .question-text { font-size: 16px; }\n\n .option-container {\n border-radius: 14px;\n width: min(88vw, calc((100svh - 180px) \/ 2 - 8px));\n max-height: calc((100svh - 180px) \/ 2 - 8px);\n }\n .option-text { font-size: 14px; }\n\n .final-badge { width: 80px; height: 80px; margin-bottom: 5px; padding: 8px; }\n .final-badge::before { width: 95px; height: 95px; }\n .final-badge::after { width: 108px; height: 108px; }\n .final-mode .final-title { font-size: 20px; margin-bottom: 2px; }\n .final-subtitle { font-size: 11px; margin-bottom: 5px; letter-spacing: 1px; }\n .final-card { padding: 10px 14px; margin-bottom: 4px; }\n .final-card-icon { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }\n .final-card-title { font-size: 13px; }\n .final-card-text { font-size: 12px; line-height: 1.5; }\n .final-mode .transition-text { font-size: 12px; line-height: 1.5; }\n .final-btn { padding: 10px 30px; font-size: 13px; margin-top: 8px; }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403\u7e2e\u5c0f *\/\n .balloon-base { transform: scale(0.8); }\n }\n \n \/* \ud83d\udd25 \u8d85\u5c0f\u87a2\u5e55 *\/\n @media (max-width: 320px) {\n .option-container {\n width: min(90vw, calc((100svh - 170px) \/ 2 - 6px));\n max-height: calc((100svh - 170px) \/ 2 - 6px);\n border-radius: 12px;\n }\n .question-text { font-size: 15px; }\n }\n\n \/* =========================================\n \ud83d\udd04 Loading \u756b\u9762\n ========================================= *\/\n .loading-screen {\n position: fixed;\n top: 0; left: 0;\n width: 100vw; height: 100vh;\n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n z-index: 99999;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s ease;\n }\n .loading-screen.hidden {\n opacity: 0;\n pointer-events: none;\n }\n .loading-spinner {\n width: 50px; height: 50px;\n border: 3px solid rgba(255,255,255,0.2);\n border-top-color: rgba(255,255,255,0.8);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n .loading-text {\n margin-top: 20px;\n color: rgba(255,255,255,0.7);\n font-size: 16px;\n letter-spacing: 2px;\n }\n\n \/* \ud83d\udeab \u932f\u8aa4\u756b\u9762 *\/\n .error-screen {\n position: fixed;\n top: 0; left: 0;\n width: 100vw; height: 100vh;\n background: linear-gradient(180deg, #3d2a2a 0%, #4a3535 50%, #5c4040 100%);\n z-index: 99999;\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 30px;\n }\n .error-screen.active { display: flex; }\n .error-icon { font-size: 60px; margin-bottom: 20px; }\n .error-title {\n font-size: 24px;\n color: #fff;\n margin-bottom: 15px;\n font-family: var(--font-serif);\n }\n .error-message {\n font-size: 16px;\n color: rgba(255,255,255,0.7);\n line-height: 1.6;\n max-width: 400px;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"loading-screen\" id=\"loadingScreen\">\n <div class=\"loading-spinner\"><\/div>\n <div class=\"loading-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e17\u0e14\u0e2a\u0e2d\u0e1a...<\/div>\n <\/div>\n\n \n <div class=\"error-screen\" id=\"errorScreen\">\n <div class=\"error-icon\">\u26a0\ufe0f<\/div>\n <div class=\"error-title\" id=\"errorTitle\">\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e25\u0e49\u0e21\u0e40\u0e2b\u0e25\u0e27<\/div>\n <div class=\"error-message\" id=\"errorMessage\">\u0e42\u0e1b\u0e23\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\u0e20\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e07<\/div>\n <\/div>\n\n <div class=\"starry-background-wrapper\" id=\"bgWrapper\">\n <div class=\"stars\" id=\"starsContainer\"><\/div>\n <div class=\"stars\" id=\"meteorsContainer\"><\/div>\n <\/div>\n\n <div class=\"iframe-overlay\" id=\"iframeOverlay\">\n <div class=\"iframe-loader\" id=\"iframeLoader\">\n <div class=\"iframe-spinner\"><\/div>\n <div class=\"iframe-loader-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/div>\n <\/div>\n <iframe id=\"embeddedFrame\" src=\"about:blank\" allow=\"camera; microphone; fullscreen\" allowfullscreen><\/iframe>\n <\/div>\n\n <div class=\"transition-layer notranslate skiptranslate\" id=\"transitionLayer\" translate=\"no\" data-no-translation=\"true\">\n <div class=\"balloon-container\" id=\"balloonContainer\"><\/div>\n <canvas id=\"fireworksCanvas\"><\/canvas>\n <div class=\"transition-content\">\n <div class=\"transition-chapter\" id=\"transChapter\">CHAPTER<\/div>\n <div class=\"transition-text\" id=\"transText\"><\/div>\n <button class=\"final-btn\" id=\"finalBtn\" onclick=\"goToFinalStep()\">\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65<\/button>\n <\/div>\n <div class=\"tap-hint\" id=\"tapHint\">\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c<\/div>\n <\/div>\n\n <div id=\"immersive-quiz-wrapper\">\n <div class=\"quiz-card-container\">\n \n <div class=\"top-header\">\n <div class=\"chapter-pill\">\n <span id=\"mobileBackBtn\" onclick=\"prevQuestion()\" style=\"display:none; padding-right:8px; margin-right:8px; border-right:1px solid rgba(255,255,255,0.3); cursor:pointer;\">\u2190<\/span>\n <span id=\"chapterBadge\">\u0e1a\u0e17\u0e17\u0e35\u0e48 1<\/span>\n <span style=\"opacity: 0.5; padding: 0 5px;\">|<\/span>\n <span id=\"questionCounter\">1\/21<\/span>\n <\/div>\n \n <div class=\"globe-btn lang-switcher\" id=\"globeBtn\" role=\"button\" tabindex=\"0\"><span>\ud83c\udf0f<\/span><\/div>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-track\"><div class=\"progress-bar-fill\" id=\"progressBar\"><\/div><\/div>\n <\/div>\n\n <div class=\"question-area\" id=\"questionArea\">\n <div class=\"desktop-minor-transition notranslate skiptranslate\" id=\"desktopMinorText\" translate=\"no\" data-no-translation=\"true\"><\/div>\n <div class=\"question-text\" id=\"qTitle\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...<\/div>\n <\/div>\n\n <div class=\"content-body\">\n <div class=\"fade-wrapper\" id=\"questionBox\">\n <div class=\"options-grid\">\n <div class=\"option-container\" onclick=\"selectOption('A')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgA\">\n <div class=\"option-text-overlay\"><div class=\"option-text\" id=\"textA\"><\/div><\/div>\n <\/div>\n <div class=\"option-container\" onclick=\"selectOption('B')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgB\">\n <div class=\"option-text-overlay\"><div class=\"option-text\" id=\"textB\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"nav-area\">\n <button class=\"nav-btn hidden\" id=\"prevBtn\" onclick=\"prevQuestion()\">\n <span>\u2190<\/span> \u0e04\u0e33\u0e16\u0e32\u0e21\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\udee1\ufe0f \u4fdd\u8b77\u4ee3\u78bc - \u66ab\u6642\u95dc\u9589\uff08\u9664\u932f\u7528\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/*\n (function(){\n \/\/ \ud83d\udeab Console \u8b66\u544a\n const warningStyle = 'font-size:20px;color:red;font-weight:bold;';\n console.log('%c\u26a0\ufe0f \u8b66\u544a\uff1a\u5075\u6e2c\u5230\u958b\u767c\u8005\u5de5\u5177 \u26a0\ufe0f', warningStyle);\n console.log('%c\u6b64\u9801\u9762\u53d7\u5230\u4fdd\u8b77\uff0c\u8acb\u52ff\u5617\u8a66\u67e5\u770b\u6216\u8907\u88fd\u4ee3\u78bc', 'font-size:14px;color:orange;');\n\n \/\/ \ud83d\udd12 \u7121\u9650 debugger\uff08\u8b93\u958b\u767c\u8005\u5de5\u5177\u5361\u4f4f\uff09\n setInterval(function(){\n (function(a){return(function(a){return(Function('Function(arguments[0]+\"'+a+'\")()'))})(a)})('bugger')('de');\n }, 50);\n\n \/\/ \ud83d\udd0d \u5075\u6e2c\u958b\u767c\u8005\u5de5\u5177\n let devToolsOpen = false;\n const threshold = 160;\n\n const detectDevTools = function(){\n const widthThreshold = window.outerWidth - window.innerWidth > threshold;\n const heightThreshold = window.outerHeight - window.innerHeight > threshold;\n\n if(widthThreshold || heightThreshold){\n if(!devToolsOpen){\n devToolsOpen = true;\n \/\/ \ud83d\udca5 \u6e05\u7a7a\u7db2\u9801\n document.body.innerHTML = '<div style=\"display:flex;justify-content:center;align-items:center;height:100vh;background:#000;color:#fff;font-size:20px;\">\u26a0\ufe0f \u5b58\u53d6\u88ab\u62d2\u7d55<\/div>';\n }\n }\n };\n\n setInterval(detectDevTools, 500);\n window.addEventListener('resize', detectDevTools);\n\n \/\/ \ud83d\udeab \u7981\u6b62\u53f3\u9375\n document.addEventListener('contextmenu', function(e){ e.preventDefault(); });\n\n \/\/ \ud83d\udeab \u7981\u6b62\u5e38\u7528\u5feb\u6377\u9375 (F12, Ctrl+Shift+I, Ctrl+U)\n document.addEventListener('keydown', function(e){\n if(e.key === 'F12' ||\n (e.ctrlKey && e.shiftKey && e.key === 'I') ||\n (e.ctrlKey && e.shiftKey && e.key === 'J') ||\n (e.ctrlKey && e.key === 'U')){\n e.preventDefault();\n return false;\n }\n });\n })();\n *\/\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udf10 API \u8a2d\u5b9a\u8207\u52d5\u614b\u8f09\u5165\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n const API_BASE = 'https:\/\/maybeits.me\/wp-json\/ragic-proxy\/v1';\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API \u7aef\u9ede\n const API_QUIZ_BY_CODE = `${API_BASE}\/quiz-by-code`;\n\n \/\/ \u89d2\u8272 \u2192 API \u8def\u5f91\u5c0d\u61c9\uff08\u5099\u7528\uff09\n const roleToPath = {\n 'F1': '\/1', 'F2': '\/2', 'F3': '\/3', 'F4': '\/4', 'F5': '\/5', 'F6': '\/6',\n 'M1': '\/7', 'M2': '\/8', 'M3': '\/9', 'M4': '\/10', 'M5': '\/11', 'M6': '\/12',\n 'ALL': '\/0'\n };\n\n \/\/ \u4e3b\u984c\u5206\u985e \u2192 \u8996\u89ba\u6a23\u5f0f\uff08Hardcode\uff09\n const chapterStyles = {\n \"\u65e5\u5e38\u7684\u8d77\u9ede\": {\n colors: [\"#5e4b49\", \"#695351\", \"#867b78\", \"#a09f9b\", \"#d2cbc9\"],\n fireworkHues: [30, 40, 50] \/\/ \u6696\u6a58\u91d1\n },\n \"\u6311\u6230\u8207\u5192\u96aa\": {\n colors: [\"#323836\", \"#566367\", \"#7B8E95\", \"#A4A9A9\", \"#CEC5BE\"],\n fireworkHues: [180, 200, 220] \/\/ \u51b7\u9752\u85cd\n },\n \"\u5167\u5fc3\u7684\u8a66\u7149\": {\n colors: [\"#020202\", \"#392B27\", \"#715349\", \"#9F8882\", \"#CDBEBB\"],\n fireworkHues: [0, 20, 340] \/\/ \u6df1\u7d05\u73ab\u7470\n },\n \"\u771f\u5be6\u7684\u6b78\u4f86\": {\n colors: [\"#2F2F2F\", \"#3B4F5E\", \"#486F8E\", \"#96AAB9\", \"#E5E5E5\"],\n fireworkHues: [260, 280, 300] \/\/ \u795e\u79d8\u7d2b\n }\n };\n\n \/\/ \u52d5\u614b\u8cc7\u6599\u5bb9\u5668\uff08\u5f9e API \u8f09\u5165\u5f8c\u586b\u5145\uff09\n let imageSources = {};\n let chapterRanges = [];\n let fireworkColors = {};\n let transitions = {};\n let quizData = [];\n\n \/\/ \ud83c\udf10 \u591a\u8a9e\u8a00\u652f\u63f4\n const SUPPORTED_LANGS = ['zh-hk', 'zh-cn', 'en', 'kr', 'jp', 'th', 'vi', 'br', 'id'];\n\n \/\/ UI \u6587\u5b57\u7ffb\u8b6f\u5b57\u5178\n const UI_TRANSLATIONS = {\n '': { \/\/ \u7e41\u9ad4\u4e2d\u6587 TW\uff08\u9810\u8a2d\uff09\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u7684\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u611f\u8b1d\u4f60\u7684\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u5011\u62b5\u9054\u4e86\u9019\u88e1\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5982\u6b64\u771f\u8aa0\u5730\u8207\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u4e86\u9019\u8d9f\u63a2\u7d22\u3002\u9019\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u7167\u7247',\n nextStepText: '\u70ba\u4e86\u8b93\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u7167\u7247\uff0c\u7528\u65bc\u751f\u6210\u5c08\u5c6c\u7684<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u662f\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u7167\u7247\u5f8c\u7d04\u9700 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u7522\u51fa\u7d50\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u9ede\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u6c92\u6709\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-hk': { \/\/ \u7e41\u9ad4\u4e2d\u6587 HK\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u7dca...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u64b3\u4efb\u610f\u4f4d\u7f6e\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u5587\uff0c\u53bb\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u5605\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u591a\u8b1d\u4f60\u5605\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u54cb\u5230\u5497\u5462\u5ea6\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5481\u771f\u8aa0\u5481\u540c\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u5497\u5462\u8d9f\u63a2\u7d22\u3002\u5462\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u4fc2\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u76f8\u7247',\n nextStepText: '\u70ba\u5497\u4ee4\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u76f8\u7247\uff0c\u7528\u569f\u751f\u6210\u5c08\u5c6c\u5605<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u4fc2\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u76f8\u7247\u5f8c\u5927\u6982\u9700\u8981 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u5148\u51fa\u5230\u7d50\u679c\u3002\u7f8e\u597d\u5605\u5622\uff0c\u503c\u5f97\u7b49\u4e00\u9663\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u5187\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-cn': { \/\/ \u7b80\u4f53\u4e2d\u6587\n loading: '\u52a0\u8f7d\u6d4b\u9a8c\u4e2d...',\n questionLoading: '\u9898\u76ee\u52a0\u8f7d\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u9898',\n tapToContinue: '\u70b9\u51fb\u4efb\u610f\u5904\u7ee7\u7eed',\n ready: '\u6211\u51c6\u5907\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u51c6\u5907\u9886\u53d6\u4f60\u7684\u4e13\u5c5e\u7075\u9b42\u62a5\u544a \u2500\u2500',\n thanks: '\u611f\u8c22\u4f60\u7684\u575a\u6301',\n thanksText: '\u7ec8\u4e8e\uff0c\u6211\u4eec\u62b5\u8fbe\u4e86\u8fd9\u91cc\u3002\u6df1\u6df1\u611f\u8c22\u4f60\u5982\u6b64\u771f\u8bda\u5730\u4e0e\u81ea\u5df1\u5bf9\u8bdd\uff0c\u5b8c\u6210\u4e86\u8fd9\u8d9f\u63a2\u7d22\u3002\u8fd9\u4efd\u575a\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u79cd\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u4f20\u7167\u7247',\n nextStepText: '\u4e3a\u4e86\u8ba9\u62a5\u544a\u771f\u6b63\u5c5e\u4e8e\u4f60\uff0c\u4e0b\u4e00\u9636\u6bb5\u4f1a\u9080\u8bf7\u4f60\u63d0\u4f9b\u4e00\u5f20\u4e2a\u4eba\u7167\u7247\uff0c\u7528\u4e8e\u751f\u6210\u4e13\u5c5e\u7684<span class=\"final-highlight\">\"Q\u7248\u60c5\u5883\u56fe\u7247\"<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u4e3a\u662f\u6df1\u5ea6\u5b9a\u5236\u5316\u89e3\u6790\uff0c\u4e0a\u4f20\u7167\u7247\u540e\u7ea6\u9700 <span class=\"final-highlight\">15 \u5206\u949f<\/span> \u4ea7\u51fa\u7ed3\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u70b9\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8d39\u9886\u53d6\u7b80\u6613\u7248\u62a5\u544a',\n paidHint: '( \u6b64\u4e3a\u4ed8\u8d39\u89e3\u9501\u5b9a\u5236\u5316\u62a5\u544a\u4e13\u5c5e\u6d41\u7a0b\uff0c\u514d\u8d39\u7248\u6ca1\u6709\u4e13\u5c5e\u60c5\u5883\u56fe\u7247 )'\n },\n 'en': { \/\/ English\n loading: 'Loading quiz...',\n questionLoading: 'Loading question...',\n prevQuestion: 'Previous',\n tapToContinue: 'Tap anywhere to continue',\n ready: \"I'm ready, let's go!\",\n congrats: 'Congratulations!',\n soulReport: '\u2500\u2500 Ready to receive your soul report \u2500\u2500',\n thanks: 'Thank you for your perseverance',\n thanksText: \"Finally, we've arrived here. Thank you for such an honest dialogue with yourself, completing this journey of exploration. This perseverance itself is a form of strength.\",\n nextStep: 'Next: Upload Photo',\n nextStepText: 'To make the report truly yours, the next step will invite you to provide a personal photo to generate your exclusive <span class=\"final-highlight\">\"Q-style avatar\"<\/span>.',\n reminder: 'Reminder',\n reminderText: 'As this is a deeply customized analysis, it takes about <span class=\"final-highlight\">15 minutes<\/span> to generate results after uploading. Good things are worth the wait.',\n goBack: '\u2190 Go back to edit answers',\n freeReport: 'Get Free Basic Report',\n paidHint: '( This is for paid customized reports only. Free version does not include personalized scene images )'\n },\n 'kr': { \/\/ \ud55c\uad6d\uc5b4\n loading: '\ud14c\uc2a4\ud2b8 \ub85c\ub529 \uc911...',\n questionLoading: '\uc9c8\ubb38 \ub85c\ub529 \uc911...',\n prevQuestion: '\uc774\uc804',\n tapToContinue: '\uc544\ubb34 \uacf3\uc774\ub098 \ud0ed\ud558\uc5ec \uacc4\uc18d',\n ready: '\uc900\ube44\ub410\uc5b4\uc694, \ub2e4\uc74c\uc73c\ub85c!',\n congrats: '\ucd95\ud558\ud569\ub2c8\ub2e4!',\n soulReport: '\u2500\u2500 \uc601\ud63c \ubcf4\uace0\uc11c\ub97c \ubc1b\uc744 \uc900\ube44\uac00 \ub410\uc5b4\uc694 \u2500\u2500',\n thanks: '\ub048\uae30\uc5d0 \uac10\uc0ac\ub4dc\ub824\uc694',\n thanksText: '\ub4dc\ub514\uc5b4 \uc5ec\uae30\uae4c\uc9c0 \uc654\uc5b4\uc694. \uc790\uc2e0\uacfc\uc758 \uc9c4\uc194\ud55c \ub300\ud654\ub97c \ud1b5\ud574 \uc774 \ud0d0\ud5d8\uc744 \uc644\ub8cc\ud574 \uc8fc\uc154\uc11c \uac10\uc0ac\ud569\ub2c8\ub2e4. \uc774 \ub048\uae30 \uc790\uccb4\uac00 \ud798\uc774\uc5d0\uc694.',\n nextStep: '\ub2e4\uc74c: \uc0ac\uc9c4 \uc5c5\ub85c\ub4dc',\n nextStepText: '\ubcf4\uace0\uc11c\ub97c \uc9c4\uc815\uc73c\ub85c \ub2f9\uc2e0\uc758 \uac83\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574, \ub2e4\uc74c \ub2e8\uacc4\uc5d0\uc11c \uac1c\uc778 \uc0ac\uc9c4\uc744 \uc81c\uacf5\ud558\uc5ec \uc804\uc6a9 <span class=\"final-highlight\">\"Q\ubc84\uc804 \uc544\ubc14\ud0c0\"<\/span>\ub97c \uc0dd\uc131\ud574\uc694.',\n reminder: '\uc54c\ub9bc',\n reminderText: '\uc2ec\uce35 \ub9de\ucda4 \ubd84\uc11d\uc774\ubbc0\ub85c \uc5c5\ub85c\ub4dc \ud6c4 \uacb0\uacfc \uc0dd\uc131\uc5d0 \uc57d <span class=\"final-highlight\">15\ubd84<\/span>\uc774 \uc18c\uc694\ub3fc\uc694. \uc88b\uc740 \uac83\uc740 \uae30\ub2e4\ub9b4 \uac00\uce58\uac00 \uc788\uc5b4\uc694.',\n goBack: '\u2190 \ub2f5\ubcc0 \uc218\uc815\ud558\ub7ec \ub3cc\uc544\uac00\uae30',\n freeReport: '\ubb34\ub8cc \uae30\ubcf8 \ubcf4\uace0\uc11c \ubc1b\uae30',\n paidHint: '( \uc720\ub8cc \ub9de\ucda4\ud615 \ubcf4\uace0\uc11c \uc804\uc6a9 \uacfc\uc815\uc785\ub2c8\ub2e4. \ubb34\ub8cc \ubc84\uc804\uc5d0\ub294 \ub9de\ucda4 \uc774\ubbf8\uc9c0\uac00 \ud3ec\ud568\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4 )'\n },\n 'jp': { \/\/ \u65e5\u672c\u8a9e\n loading: '\u30af\u30a4\u30ba\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n questionLoading: '\u8cea\u554f\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n prevQuestion: '\u524d\u3078',\n tapToContinue: '\u30bf\u30c3\u30d7\u3057\u3066\u7d9a\u3051\u308b',\n ready: '\u6e96\u5099\u5b8c\u4e86\u3001\u6b21\u3078\u9032\u3080\uff01',\n congrats: '\u304a\u3081\u3067\u3068\u3046\u3054\u3056\u3044\u307e\u3059\uff01',\n soulReport: '\u2500\u2500 \u9b42\u306e\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f \u2500\u2500',\n thanks: '\u3042\u306a\u305f\u306e\u5fcd\u8010\u306b\u611f\u8b1d',\n thanksText: '\u3064\u3044\u306b\u3053\u3053\u307e\u3067\u6765\u307e\u3057\u305f\u3002\u81ea\u5206\u81ea\u8eab\u3068\u306e\u6b63\u76f4\u306a\u5bfe\u8a71\u3092\u901a\u3058\u3066\u3001\u3053\u306e\u63a2\u6c42\u306e\u65c5\u3092\u5b8c\u4e86\u3057\u3066\u3044\u305f\u3060\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002\u3053\u306e\u5fcd\u8010\u529b\u81ea\u4f53\u304c\u529b\u3067\u3059\u3002',\n nextStep: '\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u5199\u771f\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9',\n nextStepText: '\u30ec\u30dd\u30fc\u30c8\u3092\u672c\u5f53\u306b\u3042\u306a\u305f\u306e\u3082\u306e\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u500b\u4eba\u306e\u5199\u771f\u3092\u63d0\u4f9b\u3057\u3066\u3001\u5c02\u7528\u306e<span class=\"final-highlight\">\u300cQ\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30d0\u30bf\u30fc\u300d<\/span>\u3092\u751f\u6210\u3057\u307e\u3059\u3002',\n reminder: '\u304a\u77e5\u3089\u305b',\n reminderText: '\u6df1\u3044\u30ab\u30b9\u30bf\u30e0\u5206\u6790\u306e\u305f\u3081\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u306e\u7d50\u679c\u751f\u6210\u306b\u306f\u7d04<span class=\"final-highlight\">15\u5206<\/span>\u304b\u304b\u308a\u307e\u3059\u3002\u826f\u3044\u3082\u306e\u306b\u306f\u5f85\u3064\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002',\n goBack: '\u2190 \u56de\u7b54\u3092\u7de8\u96c6\u3059\u308b',\n freeReport: '\u7121\u6599\u3067\u7c21\u6613\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b',\n paidHint: '( \u3053\u3061\u3089\u306f\u6709\u6599\u30ab\u30b9\u30bf\u30e0\u30ec\u30dd\u30fc\u30c8\u5c02\u7528\u3067\u3059\u3002\u7121\u6599\u7248\u306b\u306f\u5c02\u7528\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u306f\u542b\u307e\u308c\u307e\u305b\u3093 )'\n },\n 'th': { \/\/ \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\n loading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a...',\n questionLoading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...',\n prevQuestion: '\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32',\n tapToContinue: '\u0e41\u0e15\u0e30\u0e17\u0e35\u0e48\u0e43\u0e14\u0e01\u0e47\u0e44\u0e14\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d',\n ready: '\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e49\u0e27 \u0e44\u0e1b\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e19\u0e40\u0e25\u0e22!',\n congrats: '\u0e22\u0e34\u0e19\u0e14\u0e35\u0e14\u0e49\u0e27\u0e22!',\n soulReport: '\u2500\u2500 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e27\u0e34\u0e0d\u0e0d\u0e32\u0e13\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 \u2500\u2500',\n thanks: '\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n thanksText: '\u0e43\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e40\u0e23\u0e32\u0e01\u0e47\u0e21\u0e32\u0e16\u0e36\u0e07\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48\u0e41\u0e25\u0e49\u0e27 \u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e19\u0e17\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e08\u0e23\u0e34\u0e07\u0e43\u0e08\u0e01\u0e31\u0e1a\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e1e\u0e25\u0e31\u0e07\u0e43\u0e19\u0e15\u0e31\u0e27\u0e21\u0e31\u0e19\u0e40\u0e2d\u0e07',\n nextStep: '\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b: \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e',\n nextStepText: '\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e41\u0e17\u0e49\u0e08\u0e23\u0e34\u0e07 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e08\u0e30\u0e40\u0e0a\u0e34\u0e0d\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07<span class=\"final-highlight\">\"\u0e2d\u0e27\u0e32\u0e15\u0e32\u0e23\u0e4c Q\"<\/span>\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n reminder: '\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33',\n reminderText: '\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 <span class=\"final-highlight\">15 \u0e19\u0e32\u0e17\u0e35<\/span> \u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14 \u0e2a\u0e34\u0e48\u0e07\u0e14\u0e35\u0e46 \u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e41\u0e01\u0e48\u0e01\u0e32\u0e23\u0e23\u0e2d\u0e04\u0e2d\u0e22',\n goBack: '\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02\u0e04\u0e33\u0e15\u0e2d\u0e1a',\n freeReport: '\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\u0e1f\u0e23\u0e35',\n paidHint: '( \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e19\u0e35\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19 \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19\u0e1f\u0e23\u0e35\u0e44\u0e21\u0e48\u0e21\u0e35\u0e20\u0e32\u0e1e\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e1a\u0e38\u0e04\u0e04\u0e25 )'\n },\n 'vi': { \/\/ Ti\u1ebfng Vi\u1ec7t\n loading: '\u0110ang t\u1ea3i b\u00e0i ki\u1ec3m tra...',\n questionLoading: '\u0110ang t\u1ea3i c\u00e2u h\u1ecfi...',\n prevQuestion: 'Tr\u01b0\u1edbc',\n tapToContinue: 'Nh\u1ea5n b\u1ea5t k\u1ef3 \u0111\u00e2u \u0111\u1ec3 ti\u1ebfp t\u1ee5c',\n ready: 'T\u00f4i \u0111\u00e3 s\u1eb5n s\u00e0ng, ti\u1ebfp t\u1ee5c n\u00e0o!',\n congrats: 'Ch\u00fac m\u1eebng!',\n soulReport: '\u2500\u2500 S\u1eb5n s\u00e0ng nh\u1eadn b\u00e1o c\u00e1o t\u00e2m h\u1ed3n c\u1ee7a b\u1ea1n \u2500\u2500',\n thanks: 'C\u1ea3m \u01a1n s\u1ef1 ki\u00ean tr\u00ec c\u1ee7a b\u1ea1n',\n thanksText: 'Cu\u1ed1i c\u00f9ng, ch\u00fang ta \u0111\u00e3 \u0111\u1ebfn \u0111\u00e2y. C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 th\u00e0nh th\u1eadt \u0111\u1ed1i tho\u1ea1i v\u1edbi ch\u00ednh m\u00ecnh. S\u1ef1 ki\u00ean tr\u00ec n\u00e0y ch\u00ednh l\u00e0 s\u1ee9c m\u1ea1nh.',\n nextStep: 'B\u01b0\u1edbc ti\u1ebfp theo: T\u1ea3i \u1ea3nh l\u00ean',\n nextStepText: '\u0110\u1ec3 b\u00e1o c\u00e1o th\u1ef1c s\u1ef1 thu\u1ed9c v\u1ec1 b\u1ea1n, b\u01b0\u1edbc ti\u1ebfp theo s\u1ebd m\u1eddi b\u1ea1n cung c\u1ea5p \u1ea3nh c\u00e1 nh\u00e2n \u0111\u1ec3 t\u1ea1o <span class=\"final-highlight\">\"avatar Q\"<\/span> \u0111\u1ed9c quy\u1ec1n.',\n reminder: 'L\u01b0u \u00fd',\n reminderText: 'V\u00ec \u0111\u00e2y l\u00e0 ph\u00e2n t\u00edch t\u00f9y ch\u1ec9nh s\u00e2u, s\u1ebd m\u1ea5t kho\u1ea3ng <span class=\"final-highlight\">15 ph\u00fat<\/span> \u0111\u1ec3 t\u1ea1o k\u1ebft qu\u1ea3 sau khi t\u1ea3i l\u00ean. Nh\u1eefng \u0111i\u1ec1u t\u1ed1t \u0111\u1eb9p \u0111\u00e1ng \u0111\u1ec3 ch\u1edd \u0111\u1ee3i.',\n goBack: '\u2190 Quay l\u1ea1i ch\u1ec9nh s\u1eeda c\u00e2u tr\u1ea3 l\u1eddi',\n freeReport: 'Nh\u1eadn b\u00e1o c\u00e1o c\u01a1 b\u1ea3n mi\u1ec5n ph\u00ed',\n paidHint: '( \u0110\u00e2y l\u00e0 quy tr\u00ecnh d\u00e0nh cho b\u00e1o c\u00e1o t\u00f9y ch\u1ec9nh tr\u1ea3 ph\u00ed. B\u1ea3n mi\u1ec5n ph\u00ed kh\u00f4ng c\u00f3 h\u00ecnh \u1ea3nh c\u00e1 nh\u00e2n h\u00f3a )'\n },\n 'br': { \/\/ Portugu\u00eas\n loading: 'Carregando quiz...',\n questionLoading: 'Carregando pergunta...',\n prevQuestion: 'Anterior',\n tapToContinue: 'Toque em qualquer lugar para continuar',\n ready: 'Estou pronto, vamos l\u00e1!',\n congrats: 'Parab\u00e9ns!',\n soulReport: '\u2500\u2500 Pronto para receber seu relat\u00f3rio da alma \u2500\u2500',\n thanks: 'Obrigado pela sua perseveran\u00e7a',\n thanksText: 'Finalmente chegamos aqui. Obrigado por um di\u00e1logo t\u00e3o honesto consigo mesmo. Essa perseveran\u00e7a em si \u00e9 uma for\u00e7a.',\n nextStep: 'Pr\u00f3ximo: Enviar Foto',\n nextStepText: 'Para tornar o relat\u00f3rio verdadeiramente seu, o pr\u00f3ximo passo convidar\u00e1 voc\u00ea a fornecer uma foto pessoal para gerar seu <span class=\"final-highlight\">\"avatar Q\"<\/span> exclusivo.',\n reminder: 'Lembrete',\n reminderText: 'Como esta \u00e9 uma an\u00e1lise profundamente personalizada, levar\u00e1 cerca de <span class=\"final-highlight\">15 minutos<\/span> para gerar os resultados ap\u00f3s o upload. Coisas boas valem a espera.',\n goBack: '\u2190 Voltar para editar respostas',\n freeReport: 'Receba o Relat\u00f3rio B\u00e1sico Gr\u00e1tis',\n paidHint: '( Este \u00e9 o fluxo exclusivo do relat\u00f3rio personalizado pago. A vers\u00e3o gratuita n\u00e3o inclui imagens personalizadas )'\n },\n 'id': { \/\/ Bahasa Indonesia\n loading: 'Memuat kuis...',\n questionLoading: 'Memuat pertanyaan...',\n prevQuestion: 'Sebelumnya',\n tapToContinue: 'Ketuk di mana saja untuk melanjutkan',\n ready: 'Saya siap, ayo lanjut!',\n congrats: 'Selamat!',\n soulReport: '\u2500\u2500 Siap menerima laporan jiwa Anda \u2500\u2500',\n thanks: 'Terima kasih atas ketekunan Anda',\n thanksText: 'Akhirnya, kita sampai di sini. Terima kasih atas dialog yang jujur dengan diri sendiri. Ketekunan ini sendiri adalah kekuatan.',\n nextStep: 'Selanjutnya: Unggah Foto',\n nextStepText: 'Untuk membuat laporan benar-benar milik Anda, langkah selanjutnya akan mengundang Anda untuk memberikan foto pribadi untuk menghasilkan <span class=\"final-highlight\">\"avatar Q\"<\/span> eksklusif Anda.',\n reminder: 'Pengingat',\n reminderText: 'Karena ini adalah analisis yang sangat disesuaikan, butuh sekitar <span class=\"final-highlight\">15 menit<\/span> untuk menghasilkan hasil setelah mengunggah. Hal-hal baik layak ditunggu.',\n goBack: '\u2190 Kembali untuk mengedit jawaban',\n freeReport: 'Dapatkan Laporan Dasar Gratis',\n paidHint: '( Ini adalah alur khusus laporan kustom berbayar. Versi gratis tidak termasuk gambar personal )'\n }\n };\n\n \/\/ \u5075\u6e2c\u7576\u524d\u8a9e\u8a00\uff08\u5f9e URL \u8def\u5f91\u6216 ?lang= \u53c3\u6578\uff09\n function getCurrentLang() {\n \/\/ \ud83e\uddea \u6e2c\u8a66\u7528\uff1a\u512a\u5148\u8b80\u53d6 ?lang= \u53c3\u6578\n const urlParams = new URLSearchParams(window.location.search);\n const langParam = urlParams.get('lang');\n if (langParam && SUPPORTED_LANGS.includes(langParam)) {\n return langParam;\n }\n\n \/\/ \u6b63\u5f0f\u74b0\u5883\uff1a\u5f9e URL \u8def\u5f91\u5075\u6e2c\n const path = window.location.pathname;\n const firstSegment = path.split('\/').filter(s => s)[0] || '';\n return SUPPORTED_LANGS.includes(firstSegment) ? firstSegment : '';\n }\n\n \/\/ \u53d6\u5f97 UI \u7ffb\u8b6f\u6587\u5b57\n function t(key) {\n const translations = UI_TRANSLATIONS[currentLang] || UI_TRANSLATIONS[''];\n return translations[key] || UI_TRANSLATIONS[''][key] || key;\n }\n\n \/\/ \u53d6\u5f97\u591a\u8a9e\u8a00\u6b04\u4f4d\u503c\n function getLocalizedField(field, lang) {\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u7269\u4ef6\uff08\u591a\u8a9e\u8a00\u683c\u5f0f\uff1a{ \"\": \"...\", \"en\": \"...\", ... }\uff09\n if (typeof field === 'object' && field !== null && !Array.isArray(field)) {\n \/\/ \u512a\u5148\u53d6\u7576\u524d\u8a9e\u8a00\uff0c\u82e5\u7121\u5247\u53d6\u7e41\u4e2d\u7248\u672c\uff08\u7a7a\u5b57\u4e32 key\uff09\n return field[lang] !== undefined ? field[lang] : (field[''] || field);\n }\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u5b57\u4e32\uff08\u820a\u683c\u5f0f\uff09\uff0c\u76f4\u63a5\u8fd4\u56de\n return field;\n }\n\n \/\/ \u7576\u524d\u8a9e\u8a00\n const currentLang = getCurrentLang();\n console.log('\ud83c\udf10 \u7576\u524d\u8a9e\u8a00:', currentLang || '\u7e41\u9ad4\u4e2d\u6587 TW');\n\n \/\/ \u7528\u6236\u5730\u5340\uff08\u5f9e API \u53d6\u5f97\uff09\n let userArea = '';\n\n \/\/ \u5730\u5340 \u2192 \u8a9e\u8a00\u8def\u5f91\u5c0d\u61c9\u8868\n const areaToLangPath = {\n '\ud83c\uddf9\ud83c\uddfc Taiwan - \u7e41\u9ad4\u4e2d\u6587': '',\n '\ud83c\udded\ud83c\uddf0 Hong Kong - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\uddf2\ud83c\uddf4 Macau - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\udde8\ud83c\uddf3 China - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf8\ud83c\uddec Singapore - English': '\/en',\n '\ud83c\uddf8\ud83c\uddec Singapore - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - English': '\/en',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddec\ud83c\udde7 United Kingdom - English': '\/en',\n '\ud83c\uddea\ud83c\uddfa Europe (EU) - English': '\/en',\n '\ud83c\udf10 Global \/ Other - English': '\/en',\n '\ud83c\uddf0\ud83c\uddf7 South Korea - \ud55c\uad6d\uc5b4': '\/kr',\n '\ud83c\uddef\ud83c\uddf5 Japan - \u65e5\u672c\u8a9e': '\/jp',\n '\ud83c\udde7\ud83c\uddf7 Brazil - Portugu\u00eas': '\/br',\n '\ud83c\uddf9\ud83c\udded Thailand - \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22': '\/th',\n '\ud83c\uddfb\ud83c\uddf3 Vietnam - Ti\u1ebfng Vi\u1ec7t': '\/vi',\n '\ud83c\uddee\ud83c\udde9 Indonesia - Bahasa Indonesia': '\/id',\n '\ud83c\uddf5\ud83c\udded Philippines - English': '\/en',\n '\ud83c\udde6\ud83c\uddfa Australia - English': '\/en',\n };\n\n \/\/ \u6839\u64da\u5730\u5340\u53d6\u5f97\u8a9e\u8a00\u8def\u5f91\n function getLangPathByArea(area) {\n return areaToLangPath[area] || '';\n }\n\n \/\/ \ud83d\udd04 Loading \/ Error \u63a7\u5236\n function showLoading() {\n document.getElementById('loadingScreen').classList.remove('hidden');\n }\n function hideLoading() {\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n function showError(title, message) {\n document.getElementById('errorTitle').textContent = title;\n document.getElementById('errorMessage').textContent = message;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83c\udf89 \u986f\u793a\u5df2\u5b8c\u6210\u6e2c\u9a57\u8a0a\u606f\n function showCompletedMessage(code) {\n const resultUrl = `https:\/\/maybeits.me\/mbti-result\/?id=${encodeURIComponent(code)}`;\n document.getElementById('errorTitle').textContent = '\ud83c\udf89 \u4f60\u5df2\u5b8c\u6210\u6e2c\u9a57';\n document.getElementById('errorMessage').innerHTML = `\n \u4f60\u5df2\u6e2c\u5b8c MBTI \u6e2c\u9a57\uff0c\u4ee5\u4e0b\u662f\u4f60\u7684\u5831\u544a\u9023\u7d50\uff1a<br><br>\n <a href=\"${resultUrl}\" style=\"color: var(--accent-color); text-decoration: underline; word-break: break-all;\">${resultUrl}<\/a>\n `;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n async function fetchQuizByCode(code) {\n const url = `${API_QUIZ_BY_CODE}?code=${encodeURIComponent(code)}`;\n const res = await fetch(url);\n\n if (!res.ok) {\n const errorData = await res.json().catch(() => ({}));\n throw new Error(errorData.message || '\u8f09\u5165\u5931\u6557');\n }\n\n const data = await res.json();\n\n \/\/ \u4fdd\u5b58 _meta \u8cc7\u8a0a\n const meta = data._meta;\n\n \/\/ \u79fb\u9664 meta \u8cc7\u8a0a\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u6e2c\u9a57\u8cc7\u6599\n delete data._meta;\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n \/\/ \u5c07 _meta \u9644\u52a0\u5230\u6e2c\u9a57\u8cc7\u6599\u4e0a\n const quizData = records[0];\n quizData._meta = meta;\n\n return quizData;\n }\n\n \/\/ \ud83d\udce1 API 1: \u67e5\u8a62\u4ee3\u78bc\u5c0d\u61c9\u7684\u89d2\u8272\uff08\u5099\u7528\uff09\n async function fetchCodeData(code) {\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/5&where=1005241,eq,${encodeURIComponent(code)}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u7db2\u8def\u9023\u7dda\u7570\u5e38');\n const data = await res.json();\n\n \/\/ \u79fb\u9664 _debug \u6b04\u4f4d\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u8cc7\u6599\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u4ee3\u78bc\u7121\u6548\u6216\u5df2\u904e\u671f');\n\n return records[0];\n }\n\n \/\/ \ud83d\udce1 API 2: \u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\uff08\u5099\u7528\uff09\n async function fetchQuizRawData(role) {\n const pathSuffix = roleToPath[role];\n if (!pathSuffix) throw new Error('\u89d2\u8272\u4ee3\u78bc\u7121\u6548');\n\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/11${pathSuffix}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u8f09\u5165\u6e2c\u9a57\u8cc7\u6599\u5931\u6557');\n const data = await res.json();\n\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n return records[0];\n }\n\n \/\/ \ud83d\udd27 \u89e3\u6790 JSON \u6b04\u4f4d\uff0c\u5efa\u7acb\u984c\u5eab\n function buildQuizFromAPI(rawData) {\n \/\/ \ud83c\udf10 \u89e3\u6790\u591a\u8a9e\u8a00 JSON\uff08\u6b04\u4f4d\u662f JSON \u5b57\u4e32\uff0c\u88e1\u9762\u5305\u542b\u591a\u8a9e\u8a00\u7d50\u69cb\uff09\n let quizConfig;\n try {\n \/\/ \u5148\u89e3\u6790 JSON \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedJSON = JSON.parse(rawData.JSON);\n \/\/ \u5982\u679c\u662f\u591a\u8a9e\u8a00\u7d50\u69cb\uff08\u7269\u4ef6 with \u8a9e\u8a00 key\uff09\uff0c\u53d6\u5f97\u5c0d\u61c9\u8a9e\u8a00\n if (typeof parsedJSON === 'object' && parsedJSON !== null && !Array.isArray(parsedJSON)) {\n \/\/ \u6aa2\u67e5\u662f\u5426\u6709\u8a9e\u8a00 key\uff08\u5982 \"\"\u3001\"en\"\u3001\"jp\" \u7b49\uff09\n const hasLangKeys = Object.keys(parsedJSON).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n quizConfig = parsedJSON[currentLang] || parsedJSON[''] || parsedJSON;\n console.log('\ud83c\udf10 \u5df2\u8f09\u5165\u8a9e\u8a00\u7248\u672c\u7684\u6e2c\u9a57\u914d\u7f6e:', currentLang || '\u7e41\u4e2d');\n } else {\n \/\/ \u820a\u683c\u5f0f\uff08\u76f4\u63a5\u662f\u984c\u76ee\u914d\u7f6e\uff09\n quizConfig = parsedJSON;\n console.log('\ud83d\udccb \u5df2\u8f09\u5165\u6e2c\u9a57\u914d\u7f6e\uff08\u55ae\u8a9e\u8a00\u683c\u5f0f\uff09');\n }\n } else {\n quizConfig = parsedJSON;\n }\n } catch (e) {\n console.error('\u274c \u89e3\u6790 JSON \u6b04\u4f4d\u5931\u6557:', e);\n return;\n }\n\n \/\/ \ud83c\udfaf \u5132\u5b58\u300c5\u985e\u578b\u6587\u6848\u300d\u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u4f7f\u7528\uff09\n if (rawData['5\u985e\u578b\u6587\u6848']) {\n try {\n \/\/ \u5148\u89e3\u6790 5\u985e\u578b\u6587\u6848 \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedPaywall = JSON.parse(rawData['5\u985e\u578b\u6587\u6848']);\n let localizedPaywall;\n \/\/ \u6aa2\u67e5\u662f\u5426\u70ba\u591a\u8a9e\u8a00\u7d50\u69cb\n if (typeof parsedPaywall === 'object' && parsedPaywall !== null && !Array.isArray(parsedPaywall)) {\n const hasLangKeys = Object.keys(parsedPaywall).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n localizedPaywall = parsedPaywall[currentLang] || parsedPaywall[''] || parsedPaywall;\n } else {\n localizedPaywall = parsedPaywall;\n }\n } else {\n localizedPaywall = parsedPaywall;\n }\n \/\/ \u5132\u5b58\u70ba JSON \u5b57\u4e32\n sessionStorage.setItem('quiz_paywall_copies', JSON.stringify(localizedPaywall));\n console.log('\u2705 \u5df2\u5132\u5b58 5\u985e\u578b\u6587\u6848\u5230 sessionStorage\uff08\u8a9e\u8a00:', currentLang || '\u7e41\u4e2d', '\uff09');\n } catch (e) {\n console.error('\u274c \u89e3\u6790 5\u985e\u578b\u6587\u6848 \u5931\u6557:', e);\n }\n } else {\n console.warn('\u26a0\ufe0f rawData \u4e2d\u6c92\u6709\u300c5\u985e\u578b\u6587\u6848\u300d\u6b04\u4f4d');\n console.log('rawData \u7684\u6240\u6709 key:', Object.keys(rawData));\n }\n\n \/\/ \u5efa\u7acb\u5716\u7247\u4f86\u6e90\u5c0d\u7167\u8868\n imageSources = {};\n for (let i = 1; i <= 93; i++) {\n const keyA = `${i}-0`, keyB = `${i}-1`;\n if (rawData[`${keyA}-img`]) imageSources[keyA] = rawData[`${keyA}-img`];\n if (rawData[`${keyB}-img`]) imageSources[keyB] = rawData[`${keyB}-img`];\n }\n imageSources[\"default\"] = \"https:\/\/images.unsplash.com\/photo-1534447677768-be436bb09401?w=800&q=80\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u8cc7\u8a0a\u8207\u904e\u5834\n const chapterMap = {};\n transitions = {};\n let questionIndex = 1;\n\n for (let i = 1; i <= 93; i++) {\n const config = quizConfig[String(i)];\n if (!config) continue;\n\n const chapterName = config[\"\u4e3b\u984c\u5206\u985e\"] || \"\u672a\u5206\u985e\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u7bc4\u570d\n if (!chapterMap[chapterName]) {\n chapterMap[chapterName] = { name: chapterName, start: questionIndex, end: questionIndex };\n } else {\n chapterMap[chapterName].end = questionIndex;\n }\n\n \/\/ \u6536\u96c6\u904e\u5834\u6587\u5b57\n let rawTransText = config[\"\u904e\u5834\u6587\u5b57\"];\n \/\/ \u652f\u63f4\u9663\u5217\u683c\u5f0f\uff08\u6bcf\u884c\u4e00\u500b\u5143\u7d20\uff09\u6216\u5b57\u4e32\u683c\u5f0f\n if (Array.isArray(rawTransText)) {\n rawTransText = rawTransText.join('\\n');\n }\n if (rawTransText && rawTransText.trim()) {\n const text = rawTransText.trim();\n\n \/\/ \u512a\u5148\u4f7f\u7528 JSON \u4e2d\u6307\u5b9a\u7684\u300c\u904e\u5834\u985e\u578b\u300d\uff0c\u5426\u5247\u81ea\u52d5\u5224\u65b7\n let transType = 'minor';\n if (config[\"\u904e\u5834\u985e\u578b\"]) {\n \/\/ JSON \u4e2d\u6709\u660e\u78ba\u6307\u5b9a major\/minor\n transType = config[\"\u904e\u5834\u985e\u578b\"].toLowerCase().trim();\n } else {\n \/\/ \u81ea\u52d5\u5224\u65b7\uff1a\u542b\u300c\u3010\u300d\u6216\u8d85\u904e 3 \u884c = major\n const isMajor = text.includes(\"\u3010\") || text.split('\\n').length > 3;\n transType = isMajor ? 'major' : 'minor';\n }\n\n transitions[questionIndex] = {\n type: transType,\n text: text\n };\n }\n\n questionIndex++;\n }\n\n \/\/ \u52a0\u5165\u6700\u7d42\u904e\u5834\n transitions[94] = { type: 'final' };\n\n \/\/ \u5efa\u7acb chapterRanges\uff08\u52a0\u5165\u984f\u8272\uff09\n chapterRanges = Object.values(chapterMap).map(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n return { ...ch, colors: style.colors };\n });\n\n \/\/ \u5efa\u7acb fireworkColors\n fireworkColors = {};\n chapterRanges.forEach(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n fireworkColors[ch.start] = { hues: style.fireworkHues, name: ch.name };\n });\n\n \/\/ \u5efa\u7acb quizData \u9663\u5217\n quizData = [];\n for (let i = 1; i <= 94; i++) {\n const config = quizConfig[String(i)];\n let ch = chapterRanges.find(r => i >= r.start && i <= r.end);\n if (!ch) ch = { name: \"\u6700\u7d42\u7ae0\", start: 94, end: 94, colors: [\"#000\",\"#111\",\"#222\",\"#333\",\"#444\"] };\n\n const trans = transitions[i];\n\n \/\/ \u53d6\u5f97\u9078\u9805\u5c0d\u61c9\u7684 key\n let optKeyA = `${i}-0`, optKeyB = `${i}-1`;\n let questionText = `Question ${i}`;\n let textA = \"\u9078\u9805 A\", textB = \"\u9078\u9805 B\";\n\n if (config) {\n optKeyA = config[\"\u9078\u9805A\"] || optKeyA;\n optKeyB = config[\"\u9078\u9805B\"] || optKeyB;\n\n \/\/ \u5f9e rawData \u53d6\u5f97\u984c\u76ee\u548c\u9078\u9805\u6587\u5b57\n const qKey = `Q${optKeyA.split('-')[0]}`;\n questionText = rawData[qKey] || questionText;\n textA = rawData[optKeyA] || textA;\n textB = rawData[optKeyB] || textB;\n }\n\n quizData.push({\n id: i,\n chapter: ch.name,\n chapterStart: ch.start,\n chapterEnd: ch.end,\n bgColors: ch.colors,\n transition: trans,\n questionText: questionText,\n textA: textA,\n textB: textB,\n optionsA: optKeyA,\n optionsB: optKeyB,\n indicator: config ? config[\"\u6307\u6a19\"] : null \/\/ J\/P \u8a08\u5206\u7528\n });\n }\n }\n\n \/\/ \ud83d\ude80 \u4e3b\u8981\u521d\u59cb\u5316\u6d41\u7a0b\uff08\u4f7f\u7528\u5408\u4f75 API\uff09\n async function initQuiz() {\n const urlParams = new URLSearchParams(window.location.search);\n let id = urlParams.get('id');\n\n \/\/ \u5982\u679c URL \u6c92\u6709 id\uff0c\u5617\u8a66\u5f9e sessionStorage \u8b80\u53d6\uff08\u5f9e\u5c0e\u8cfc\u9801\u56de\u4f86\u7684\u60c5\u6cc1\uff09\n if (!id) {\n id = sessionStorage.getItem('quiz_user_id');\n }\n\n if (!id) {\n showError('\u8acb\u78ba\u8a8d\u6e2c\u9a57\u5c08\u5c6c\u9023\u7d50\u662f\u5426\u6b63\u78ba', '\u627e\u4e0d\u5230\u4f60\u7684\u6e2c\u9a57\u4ee3\u78bc ...');\n return;\n }\n\n \/\/ \u5132\u5b58 id \u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u56de\u4f86\u6642\u4f7f\u7528\uff09\n sessionStorage.setItem('quiz_user_id', id);\n\n try {\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n const quizRawData = await fetchQuizByCode(id);\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u5b8c\u6210\u6e2c\u9a57\n if (quizRawData._meta && quizRawData._meta.completed === 'Yes') {\n showCompletedMessage(id);\n return;\n }\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n if (quizRawData._meta && quizRawData._meta.purchased === 'Yes') {\n hasPurchased = true;\n }\n\n \/\/ \ud83c\udf0d \u4fdd\u5b58\u7528\u6236\u5730\u5340\uff08\u7528\u65bc\u8df3\u8f49\uff09\n if (quizRawData._meta && quizRawData._meta.area) {\n userArea = quizRawData._meta.area;\n console.log('\u7528\u6236\u5730\u5340:', userArea);\n }\n\n \/\/ \u89e3\u6790\u4e26\u5efa\u7acb\u984c\u5eab\n buildQuizFromAPI(quizRawData);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u524d 5 \u984c\u5716\u7247\n preloadUpcoming(-1, 5);\n\n \/\/ \u96b1\u85cf Loading\uff0c\u555f\u52d5\u6e2c\u9a57\n hideLoading();\n init();\n\n } catch (error) {\n console.error('\u521d\u59cb\u5316\u5931\u6557:', error);\n showError('\u8f09\u5165\u5931\u6557', error.message || '\u8acb\u7a0d\u5f8c\u518d\u8a66');\n }\n }\n\n \/\/ \u5716\u7247\u53d6\u5f97\u51fd\u6578\n function getImgUrl(key) { return imageSources[key] || imageSources[\"default\"]; }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\ude80 \u5716\u7247\u9810\u8f09\u5165\u512a\u5316\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n const preloadedImages = new Set();\n\n \/\/ \u9810\u8f09\u5165\u55ae\u5f35\u5716\u7247\n function preloadImage(url) {\n if (!url || preloadedImages.has(url)) return;\n const img = new Image();\n img.src = url;\n preloadedImages.add(url);\n }\n\n \/\/ \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 N \u984c\u7684\u5716\u7247\n function preloadUpcoming(startIdx, count = 3) {\n for (let i = 1; i <= count; i++) {\n const nextIdx = startIdx + i;\n if (nextIdx >= quizData.length) break;\n\n const nextQ = quizData[nextIdx];\n if (nextQ) {\n preloadImage(getImgUrl(nextQ.optionsA));\n preloadImage(getImgUrl(nextQ.optionsB));\n }\n }\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udfaf Paywall \u52d5\u614b\u6587\u6848\uff1a\u5132\u5b58 Q1-Q10 \u7b54\u6848\u8207\u6307\u6a19\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n function saveQuizDataForPaywall() {\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u7b54\u6848\uff08\"A\" \u6216 \"B\"\uff09\n const first10Answers = [];\n for (let i = 0; i < 10; i++) {\n const qId = quizData[i].id;\n const answerKey = `q${qId}`;\n const answerVal = answers[answerKey]; \/\/ \"A\" \u6216 \"B\"\n first10Answers.push(answerVal || null);\n }\n\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u6307\u6a19\uff08\"J=A\" \u6216 \"J=B\"\uff09\n const first10Indicators = quizData.slice(0, 10).map(q => q.indicator);\n\n \/\/ \u5132\u5b58\u5230 sessionStorage\n sessionStorage.setItem('quiz_answers_10', JSON.stringify(first10Answers));\n sessionStorage.setItem('quiz_indicators_10', JSON.stringify(first10Indicators));\n\n \/\/ \u9664\u932f\u8f38\u51fa\n console.log('\ud83c\udfaf saveQuizDataForPaywall \u57f7\u884c');\n console.log('answers \u7269\u4ef6:', answers);\n console.log('first10Answers:', first10Answers);\n console.log('first10Indicators:', first10Indicators);\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \u4ee5\u4e0b\u70ba\u539f\u6709\u6e2c\u9a57\u908f\u8f2f\uff08\u8cc7\u6599\u5df2\u6539\u70ba\u52d5\u614b\u8f09\u5165\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n let currentIdx = 0;\n let isTransitioning = false;\n let transitionTimer = null, typeTimer = null;\n let currentFireworkHues = [30, 40, 50]; \/\/ \u9810\u8a2d\u6696\u8272\n let hasPurchased = false; \/\/ \u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n const answers = {};\n\n const dom = {\n box: document.getElementById('questionBox'),\n counter: document.getElementById('questionCounter'),\n badge: document.getElementById('chapterBadge'),\n qTitle: document.getElementById('qTitle'),\n imgA: document.getElementById('imgA'), imgB: document.getElementById('imgB'),\n textA: document.getElementById('textA'), textB: document.getElementById('textB'),\n progressBar: document.getElementById('progressBar'),\n prevBtn: document.getElementById('prevBtn'),\n mobileBackBtn: document.getElementById('mobileBackBtn'),\n transitionLayer: document.getElementById('transitionLayer'),\n transText: document.getElementById('transText'),\n transChapter: document.getElementById('transChapter'),\n fireworksCanvas: document.getElementById('fireworksCanvas'),\n desktopMinorText: document.getElementById('desktopMinorText'),\n tapHint: document.getElementById('tapHint'),\n finalBtn: document.getElementById('finalBtn'),\n bgWrapper: document.getElementById('bgWrapper'),\n balloonContainer: document.getElementById('balloonContainer'),\n questionArea: document.getElementById('questionArea'),\n iframeOverlay: document.getElementById('iframeOverlay'),\n embeddedFrame: document.getElementById('embeddedFrame')\n };\n\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316 HTML \u975c\u614b\u6587\u5b57\u7684\u591a\u8a9e\u8a00\u7ffb\u8b6f\n function initUITranslations() {\n \/\/ Loading \u756b\u9762\n const loadingText = document.querySelector('.loading-text');\n if (loadingText) loadingText.textContent = t('loading');\n\n \/\/ iframe \u8f09\u5165\u4e2d\n const iframeLoaderText = document.querySelector('.iframe-loader-text');\n if (iframeLoaderText) iframeLoaderText.textContent = t('loading');\n\n \/\/ \u984c\u76ee\u8f09\u5165\u4e2d\n const qTitle = document.getElementById('qTitle');\n if (qTitle && qTitle.textContent.includes('\u8f09\u5165')) {\n qTitle.textContent = t('questionLoading');\n }\n\n \/\/ \u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c\n if (dom.tapHint) dom.tapHint.textContent = t('tapToContinue');\n\n \/\/ \u6211\u6e96\u5099\u597d\u4e86\u6309\u9215\n if (dom.finalBtn) dom.finalBtn.textContent = t('ready');\n\n \/\/ \u4e0a\u4e00\u984c\u6309\u9215\n const prevBtn = document.getElementById('prevBtn');\n if (prevBtn) {\n prevBtn.innerHTML = `<span>\u2190<\/span> ${t('prevQuestion')}`;\n }\n\n console.log('\ud83c\udf10 UI \u7ffb\u8b6f\u521d\u59cb\u5316\u5b8c\u6210');\n }\n\n function init() {\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316\u591a\u8a9e\u8a00 UI \u6587\u5b57\n initUITranslations();\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u8b80\u53d6\u8a72\u7528\u6236\u7684\u9032\u5ea6\n const userId = sessionStorage.getItem('quiz_user_id');\n if (userId) {\n const savedProgress = localStorage.getItem(`soul_quiz_progress_${userId}`);\n if (savedProgress) {\n const parsed = JSON.parse(savedProgress);\n if (parsed.idx >= 94) {\n \/\/ idx 94 = \u8d85\u51fa\u7bc4\u570d\uff08Q1-Q93 + final \u5171 94 \u7b46\uff0cidx 0-93\uff09\n localStorage.removeItem(`soul_quiz_progress_${userId}`);\n localStorage.removeItem(`soul_quiz_answer_keys_${userId}`);\n currentIdx = 0;\n } else {\n currentIdx = parsed.idx;\n Object.assign(answers, parsed.answers); \/\/ \u4e00\u5b9a\u8981\u9084\u539f answers\n saveProgress(); \/\/ \u540c\u6b65\u66f4\u65b0 answer_keys\n }\n }\n }\n\n checkTransitionAndLoad();\n }\n\n function saveProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return; \/\/ \u6c92\u6709 userId \u5c31\u4e0d\u5132\u5b58\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u5132\u5b58\u9032\u5ea6\uff08\u4e0d\u540c\u7528\u6236\u7368\u7acb\u5132\u5b58\uff09\n localStorage.setItem(`soul_quiz_progress_${userId}`, JSON.stringify({ idx: currentIdx, answers: answers }));\n\n \/\/ \u5132\u5b58\u9078\u9805 key\uff08\u4f9b n8n \u4f7f\u7528\uff09\n const answerKeys = {};\n for (const q of quizData) {\n const answerVal = answers[`q${q.id}`];\n if (answerVal) {\n answerKeys[q.id] = answerVal === 'A' ? q.optionsA : q.optionsB;\n }\n }\n localStorage.setItem(`soul_quiz_answer_keys_${userId}`, JSON.stringify(answerKeys));\n }\n\n \/\/ \ud83d\udce6 \u7d44\u6210\u7b54\u6848\u5b57\u4e32\uff08\u4f9b n8n POST\uff09- \u4f9d\u7167 key \u524d\u7db4\u6578\u5b57\u6392\u5e8f\n function generateAnswerString() {\n const userId = sessionStorage.getItem('quiz_user_id');\n const answerKeys = JSON.parse(localStorage.getItem(`soul_quiz_answer_keys_${userId}`) || '{}');\n const parts = [];\n for (let i = 1; i <= 93; i++) {\n if (answerKeys[i]) {\n parts.push(answerKeys[i]);\n }\n }\n \/\/ \u4f9d\u7167 key \u7684\u6578\u5b57\u524d\u7db4\u6392\u5e8f\uff08\u5982 \"1-1\" \u2192 1, \"9-0\" \u2192 9, \"11-1\" \u2192 11\uff09\n parts.sort((a, b) => {\n const numA = parseInt(a.split('-')[0], 10);\n const numB = parseInt(b.split('-')[0], 10);\n return numA - numB;\n });\n return parts.join(',');\n }\n\n function updateBackground(colors) {\n if(!colors) return;\n const root = document.documentElement;\n root.style.setProperty('--bg-grad-1', colors[0]);\n root.style.setProperty('--bg-grad-2', colors[1]);\n root.style.setProperty('--bg-grad-3', colors[2]);\n root.style.setProperty('--bg-grad-4', colors[3]);\n root.style.setProperty('--bg-grad-5', colors[4]);\n }\n\n function checkTransitionAndLoad() {\n const data = quizData[currentIdx];\n updateBackground(data.bgColors);\n\n const showBack = (currentIdx > 0);\n dom.prevBtn.classList.toggle('hidden', !showBack);\n dom.mobileBackBtn.style.display = showBack ? 'inline-block' : 'none';\n\n if (data.transition) {\n const isMobile = window.innerWidth <= 900;\n if (data.id === 94) {\n runFinalTransition(data);\n }\n else if (data.transition.type === 'major' || (data.transition.type === 'minor' && isMobile)) {\n runFullScreenTransition(data);\n } else {\n runDesktopMinorTransition(data);\n }\n } else {\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n }\n }\n\n \/\/ \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801\n function runFinalTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.add('active');\n dom.transitionLayer.classList.add('final-mode');\n \n dom.fireworksCanvas.style.display = 'none';\n dom.tapHint.style.display = 'none';\n dom.transitionLayer.style.cursor = 'default';\n \n \/\/ \u5275\u5efa\u6c23\u7403\u8207\u661f\u661f\n createBalloons();\n createFinalStars();\n\n \/\/ \ud83c\udf10 \u4f7f\u7528\u591a\u8a9e\u8a00\u7ffb\u8b6f\n const userId = sessionStorage.getItem('quiz_user_id');\n\n const htmlContent = `\n <div class=\"final-badge\">\n <img decoding=\"async\" src=\"https:\/\/maybeits.me\/wp-content\/uploads\/2025\/11\/LOGO-.png\" alt=\"Logo\">\n <\/div>\n <div class=\"final-title\">${t('congrats')}<\/div>\n <div class=\"final-subtitle\">${t('soulReport')}<\/div>\n\n <div class=\"final-card\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon thanks\">\ud83d\ude4f<\/div>\n <div class=\"final-card-title\">${t('thanks')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('thanksText')}\n <\/div>\n <\/div>\n\n ${!hasPurchased ? `\n <div style=\"text-align: center; margin: 10px 0 8px 0; padding: 12px 0;\">\n <button class=\"final-simple-btn\" onclick=\"goToSimpleReport()\">${t('freeReport')}<\/button>\n <\/div>\n ` : ''}\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon photo\">\ud83d\udcf8<\/div>\n <div class=\"final-card-title\">${t('nextStep')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('nextStepText')}\n <\/div>\n <\/div>\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon time\">\u23f0<\/div>\n <div class=\"final-card-title\">${t('reminder')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('reminderText')}\n <\/div>\n <\/div>\n\n <button class=\"final-back-btn\" onclick=\"goBackFromFinal()\">${t('goBack')}<\/button>\n `;\n dom.transText.innerHTML = htmlContent;\n\n setTimeout(() => { dom.transText.classList.add('fade-in'); }, 100);\n setTimeout(() => {\n dom.finalBtn.classList.add('show');\n\n \/\/ \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u4e3b\u6309\u9215\u7070\u8272\u7981\u7528 + \u5e95\u90e8\u986f\u793a\u4ed8\u8cbb\u63d0\u793a\n if (!hasPurchased) {\n dom.finalBtn.classList.add('disabled');\n \/\/ \u5728\u6309\u9215\u4e0b\u65b9\u63d2\u5165\u63d0\u793a\u6587\u5b57\n if (!document.getElementById('finalUnlockHint')) {\n const hint = document.createElement('div');\n hint.id = 'finalUnlockHint';\n hint.className = 'final-unlock-hint show';\n hint.textContent = t('paidHint');\n dom.finalBtn.parentNode.insertBefore(hint, dom.finalBtn.nextSibling);\n }\n }\n }, 1200);\n }\n\n \/\/ \ud83d\udd25 \u5275\u5efa\u591a\u7a2e\u9020\u578b\u6c23\u7403\n function createBalloons() {\n const container = dom.balloonContainer;\n container.innerHTML = '';\n container.style.display = 'block';\n\n const balloonTypes = ['round', 'heart', 'donut', 'star'];\n const balloonColors = ['color-pink', 'color-blue', 'color-peach', 'color-lavender', 'color-mint', 'color-cream', 'color-coral', 'color-gold'];\n const positions = [3, 10, 20, 32, 45, 58, 70, 82, 90, 95];\n\n for (let i = 0; i < 12; i++) {\n const balloon = document.createElement('div');\n const type = balloonTypes[i % balloonTypes.length];\n const color = balloonColors[i % balloonColors.length];\n\n balloon.className = `balloon-base balloon-${type} ${color}`;\n balloon.style.left = positions[i % positions.length] + '%';\n balloon.style.setProperty('--duration', (11 + Math.random() * 6) + 's');\n balloon.style.setProperty('--delay', (i * 0.7) + 's');\n\n \/\/ \u6839\u64da\u985e\u578b\u6dfb\u52a0\u5167\u90e8\u5143\u7d20\n if (type === 'round') {\n const shine = document.createElement('div');\n shine.className = 'shine';\n balloon.appendChild(shine);\n } else if (type === 'heart') {\n const string = document.createElement('div');\n string.className = 'string';\n balloon.appendChild(string);\n } else if (type === 'donut') {\n const sprinkles = document.createElement('div');\n sprinkles.className = 'sprinkles';\n balloon.appendChild(sprinkles);\n }\n\n container.appendChild(balloon);\n }\n }\n\n \/\/ \u2728 \u5275\u5efa\u9583\u720d\u661f\u661f\n function createFinalStars() {\n \/\/ \u79fb\u9664\u820a\u7684\u661f\u661f\u5bb9\u5668\n const oldStars = document.querySelector('.final-stars');\n if (oldStars) oldStars.remove();\n\n const container = document.createElement('div');\n container.className = 'final-stars';\n dom.transitionLayer.appendChild(container);\n\n for (let i = 0; i < 25; i++) {\n const star = document.createElement('div');\n star.className = 'final-star';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.animationDelay = Math.random() * 2 + 's';\n star.style.animationDuration = (1.5 + Math.random()) + 's';\n container.appendChild(star);\n }\n }\n\n function runFullScreenTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.remove('final-mode');\n dom.transitionLayer.classList.add('active');\n dom.balloonContainer.style.display = 'none';\n \n dom.fireworksCanvas.style.display = 'block';\n dom.transChapter.innerText = `CHAPTER: ${data.chapter}`;\n dom.tapHint.style.display = 'block';\n dom.transitionLayer.style.cursor = 'pointer';\n \n dom.transText.innerText = \"\";\n \n \/\/ \ud83d\udd25 \u8a2d\u7f6e\u8a72\u7ae0\u7bc0\u7684\u7159\u706b\u984f\u8272\n if (fireworkColors[data.id]) {\n currentFireworkHues = fireworkColors[data.id].hues;\n }\n \n if (data.transition.type === 'major') startFireworks();\n\n const duration = (data.transition.type === 'major') ? 15000 : 10000;\n \n typeWriterEffect(data.transition.text, dom.transText, duration, () => {\n stopFireworks();\n dom.transitionLayer.classList.remove('active');\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n });\n }\n\n function runDesktopMinorTransition(data) {\n dom.questionArea.classList.add('has-transition');\n dom.desktopMinorText.innerText = \"\";\n dom.desktopMinorText.classList.add('active'); \n setTimeout(() => { dom.desktopMinorText.classList.add('show'); }, 10);\n typeWriterEffect(data.transition.text, dom.desktopMinorText, 0, null, 55);\n renderQuestion(data); \n }\n\n function typeWriterEffect(text, element, waitTime, callback, baseSpeed = 60) {\n let i = 0;\n \/\/ \ud83d\udd25 \u6839\u64da\u6587\u5b57\u9577\u5ea6\u52d5\u614b\u8abf\u6574\u901f\u5ea6\uff08\u6587\u5b57\u8d8a\u9577\u901f\u5ea6\u8d8a\u5feb\uff09\n \/\/ \u624b\u6a5f\u7248\u984d\u5916\u52a0\u901f\n const isMobile = window.innerWidth <= 900;\n const textLen = text.length;\n let speed = baseSpeed;\n\n if (textLen > 150) {\n speed = isMobile ? 15 : 25; \/\/ \u8d85\u9577\u6587\u5b57\uff1a\u6975\u5feb\n } else if (textLen > 100) {\n speed = isMobile ? 20 : 30; \/\/ \u9577\u6587\u5b57\uff1a\u5f88\u5feb\n } else if (textLen > 60) {\n speed = isMobile ? 30 : 40; \/\/ \u4e2d\u7b49\u6587\u5b57\uff1a\u8f03\u5feb\n } else {\n speed = isMobile ? 40 : baseSpeed; \/\/ \u77ed\u6587\u5b57\uff1a\u6b63\u5e38\u901f\u5ea6\n }\n\n function type() {\n if (!isTransitioning && waitTime > 0) return;\n if (i < text.length) {\n element.innerText += text.charAt(i);\n i++;\n typeTimer = setTimeout(type, speed);\n } else {\n if (waitTime > 0) {\n transitionTimer = setTimeout(() => { endTransition(callback); }, waitTime);\n } else if (callback) { callback(); }\n }\n }\n type();\n if (waitTime > 0) dom.transitionLayer.onclick = () => endTransition(callback);\n else dom.transitionLayer.onclick = null;\n }\n\n function endTransition(callback) {\n if (!isTransitioning) return;\n isTransitioning = false;\n clearTimeout(typeTimer); clearTimeout(transitionTimer);\n dom.transitionLayer.onclick = null;\n if (callback) callback();\n }\n\n function adjustTextSize(text) {\n const len = text.length;\n let size = '28px'; \n if (window.innerWidth <= 900) {\n if (len > 35) size = '16px';\n else if (len > 25) size = '18px';\n else if (len > 15) size = '20px';\n else size = '22px';\n } else {\n if (len > 40) size = '20px';\n else if (len > 30) size = '24px';\n }\n dom.qTitle.style.fontSize = size;\n }\n\n function renderQuestion(data) {\n updateBackground(data.bgColors);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 3 \u984c\u7684\u5716\u7247\n preloadUpcoming(currentIdx, 3);\n\n dom.box.classList.add('hidden');\n setTimeout(() => {\n dom.badge.innerText = data.chapter;\n const totalInChapter = data.chapterEnd - data.chapterStart + 1;\n const currentInChapter = data.id - data.chapterStart + 1;\n dom.counter.innerText = `${currentInChapter}\/${totalInChapter}`;\n const pct = Math.round((currentInChapter \/ totalInChapter) * 100);\n dom.progressBar.style.width = `${pct}%`;\n dom.qTitle.innerText = data.questionText;\n adjustTextSize(data.questionText);\n dom.imgA.src = getImgUrl(data.optionsA); \n dom.imgB.src = getImgUrl(data.optionsB);\n dom.textA.innerText = data.textA;\n dom.textB.innerText = data.textB;\n dom.box.classList.remove('hidden');\n }, 300);\n }\n\n function openEmbeddedPage(url) {\n const loader = document.getElementById('iframeLoader');\n \/\/ \u91cd\u7f6e\u72c0\u614b\n loader.classList.remove('hidden');\n dom.embeddedFrame.classList.remove('loaded');\n \/\/ \u986f\u793a overlay\n dom.iframeOverlay.classList.add('active');\n \/\/ \u76e3\u807d iframe \u8f09\u5165\u5b8c\u6210\n dom.embeddedFrame.onload = function() {\n \/\/ \u96b1\u85cf loading\uff0c\u986f\u793a iframe\n loader.classList.add('hidden');\n dom.embeddedFrame.classList.add('loaded');\n };\n \/\/ \u5ef6\u9072\u8a2d\u7f6e src \u78ba\u4fdd DOM \u5df2\u66f4\u65b0\n setTimeout(() => {\n dom.embeddedFrame.src = url;\n }, 100);\n }\n\n function closeEmbeddedPage() {\n const loader = document.getElementById('iframeLoader');\n dom.iframeOverlay.classList.remove('active');\n dom.embeddedFrame.classList.remove('loaded');\n loader.classList.remove('hidden');\n dom.embeddedFrame.src = 'about:blank';\n }\n\n window.selectOption = function(val) {\n if(isTransitioning) return;\n answers[`q${quizData[currentIdx].id}`] = val;\n saveProgress();\n \/\/ Q10 \u5b8c\u6210\uff1a\u5df2\u8cfc\u8cb7\u7528\u6236\u76f4\u63a5\u7e7c\u7e8c\uff0c\u672a\u8cfc\u8cb7\u7528\u6236\u986f\u793a\u5c0e\u8cfc\u9801\n if (quizData[currentIdx].id === 10 && !hasPurchased) {\n saveQuizDataForPaywall(); \/\/ \u5132\u5b58 Q1-Q10 \u7b54\u6848\u4f9b\u5c0e\u8cfc\u9801\u8a08\u7b97 J \u5206\u6578\n\n \/\/ \ud83c\udd95 POST webhook\uff1a\u901a\u77e5\u7b2c10\u984c\u5b8c\u6210\uff08\u4e0d\u7b49\u5f85\u56de\u61c9\uff09\n const first10Answers = JSON.parse(sessionStorage.getItem('quiz_answers_10') || '[]');\n const first10Indicators = JSON.parse(sessionStorage.getItem('quiz_indicators_10') || '[]');\n\n \/\/ \u8a08\u7b97 J \u5206\u6578\uff08\u79e9\u5e8f\u5206\uff09\n let jScore = 0;\n for (let i = 0; i < 10; i++) {\n const indicator = first10Indicators[i]; \/\/ \"J=A\" \u6216 \"J=B\"\n const answer = first10Answers[i]; \/\/ \"A\" \u6216 \"B\"\n if (indicator && answer && answer === indicator.split('=')[1]) {\n jScore++;\n }\n }\n\n \/\/ J \u5206\u6578 \u2192 \u985e\u578b\n let jType = '';\n if (jScore >= 9) jType = '\u6975\u81f4\u79e9\u5e8f';\n else if (jScore >= 7) jType = '\u9bae\u660e\u79e9\u5e8f';\n else if (jScore >= 4) jType = '\u5e73\u8861';\n else if (jScore >= 2) jType = '\u9bae\u660e\u81ea\u7531';\n else jType = '\u6975\u81f4\u81ea\u7531';\n\n fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: sessionStorage.getItem('quiz_user_id'),\n answers: first10Answers,\n jScore: jScore,\n jType: jType,\n lang: currentLang || '',\n area: userArea || ''\n })\n }).catch(err => console.error('Q10 webhook error:', err));\n\n \/\/ \u50b3\u905e\u7236\u9801\u9762\u7684 country\/test \u548c lang \u53c3\u6578\u7d66\u5c0e\u8cfc\u9801\n const urlParams = new URLSearchParams(window.location.search);\n const country = urlParams.get('country') || urlParams.get('test');\n let paywallUrl = \"https:\/\/maybeits.me\/mbit-buy\";\n const params = new URLSearchParams();\n if (country) params.set('country', country);\n if (currentLang) params.set('lang', currentLang);\n if (params.toString()) {\n paywallUrl += '?' + params.toString();\n }\n openEmbeddedPage(paywallUrl);\n return;\n }\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n } else {\n \/\/ \ud83c\udf89 Q93 \u5b8c\u6210\uff01\u7522\u751f\u7b54\u6848\u5b57\u4e32\n const answerString = generateAnswerString();\n console.log('\ud83d\udce6 93\u984c\u5168\u90e8\u5b8c\u6210\uff01\u7b54\u6848\u5b57\u4e32:', answerString);\n \/\/ TODO: POST \u5230 n8n\n }\n };\n\n window.prevQuestion = function() {\n if (currentIdx > 0) { \n currentIdx--; \n saveProgress();\n dom.questionArea.classList.remove('has-transition');\n renderQuestion(quizData[currentIdx]); \n if(!quizData[currentIdx].transition) {\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n }\n }\n };\n\n window.goToFinalStep = async function() {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._finalStepSubmitting) return;\n window._finalStepSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._finalStepSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u6309\u9215\u8996\u89ba\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = 'none';\n dom.finalBtn.style.opacity = '0.5';\n }\n\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 2. \u8a2d\u7f6e 15 \u79d2\u8d85\u6642\u6a5f\u5236\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n \/\/ 3. \u767c\u9001 webhook \u4e26\u7b49\u5f85\u56de\u61c9\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/379dc121-5a66-4694-8452-5802a7d8d95b', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n \/\/ 4. \u6aa2\u67e5\u56de\u61c9\u72c0\u614b\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 5. \u6210\u529f\u5f8c\u8df3\u8f49\u9801\u9762\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n console.log('\u8df3\u8f49\u8a9e\u8a00\u8def\u5f91:', langPath, '(\u5730\u5340:', userArea, ')');\n window.location.href = `https:\/\/maybeits.me${langPath}\/photo-editor\/?id=${userId}`;\n\n } catch (error) {\n \/\/ 6. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._finalStepSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = '';\n dom.finalBtn.style.opacity = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n \/\/ \u986f\u793a\u932f\u8aa4\u756b\u9762\uff08\u4f7f\u7528\u73fe\u6709\u7684\u932f\u8aa4 UI \u7d44\u4ef6\uff09\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToFinalStep()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83c\udd93 \u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\uff08\u514d\u8cbb\u7528\u6236\uff09\n window.goToSimpleReport = async function() {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._simpleReportSubmitting) return;\n window._simpleReportSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._simpleReportSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u514d\u8cbb\u5831\u544a\u6309\u9215\uff08\u9632\u6b62 loading \u904e\u6e21\u671f\u9593\u88ab\u518d\u6b21\u9ede\u64ca\uff09\n const simpleBtn = document.querySelector('.final-simple-btn');\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = 'none';\n simpleBtn.style.opacity = '0.5';\n simpleBtn.style.animation = 'none';\n }\n\n \/\/ 2. \u7d44\u6210\u7b54\u6848\u5b57\u4e32\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 3. POST webhook\uff0815 \u79d2\u8d85\u6642\uff09\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 \u7c21\u6613\u7248\u5831\u544a Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 4. \u6210\u529f\u5f8c\u8df3\u8f49\u5230\u514d\u8cbb\u6e2c\u9a57\u7d50\u679c\u9801\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n window.location.href = `https:\/\/maybeits.me${langPath}\/mbti-express\/?id=${encodeURIComponent(userId)}`;\n\n } catch (error) {\n \/\/ 5. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._simpleReportSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = '';\n simpleBtn.style.opacity = '';\n simpleBtn.style.animation = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToSimpleReport()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83d\udd19 \u5f9e Final \u9801\u8fd4\u56de\u4e0a\u4e00\u984c\n window.goBackFromFinal = function() {\n \/\/ \u2705 \u91cd\u7f6e\u63d0\u4ea4\u9396\uff08\u56de\u5230\u984c\u76ee\u5f8c\u5141\u8a31\u91cd\u65b0\u63d0\u4ea4\uff09\n window._finalStepSubmitting = false;\n window._simpleReportSubmitting = false;\n\n \/\/ \u95dc\u9589\u8f49\u5834\u5c64\n isTransitioning = false;\n dom.transitionLayer.classList.remove('active');\n dom.transitionLayer.classList.remove('final-mode');\n dom.finalBtn.classList.remove('show');\n dom.transText.classList.remove('fade-in');\n dom.transText.innerHTML = '';\n\n \/\/ \u96b1\u85cf\u6c23\u7403\n dom.balloonContainer.style.display = 'none';\n dom.balloonContainer.innerHTML = '';\n\n \/\/ \u79fb\u9664\u661f\u661f\n const stars = document.querySelector('.final-stars');\n if (stars) stars.remove();\n\n \/\/ \u56de\u5230\u6700\u5f8c\u4e00\u984c\uff08Q93\uff0cindex = 92\uff09\n currentIdx = quizData.length - 2; \/\/ Q93 \u7684 index \u662f 92\uff0c\u4e0d\u662f 93\uff08\u90a3\u662f final\uff09\n renderQuestion(quizData[currentIdx]);\n };\n\n \/\/ \ud83c\udd93 \u60c5\u5883 C\uff1a\u76e3\u807d\u5c0e\u8cfc\u9801 iframe \u7684 postMessage\uff08\u514d\u8cbb\u7e7c\u7e8c\u6e2c\u9a57\uff09\n window.addEventListener('message', function(event) {\n if (event.data && event.data.type === 'freeContinue') {\n console.log('\ud83c\udd93 \u6536\u5230\u514d\u8cbb\u7e7c\u7e8c\u8a0a\u865f\uff0c\u9032\u5165\u7b2c 11 \u984c');\n closeEmbeddedPage();\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n }\n }\n });\n\n \/\/ \ud83d\udd25 \u5730\u7403\u6309\u9215\u9ede\u64ca - \u53ef\u81ea\u8a02\u7ffb\u8b6f\u529f\u80fd\n window.onGlobeClick = function() {\n \/\/ \u5728\u9019\u88e1\u6dfb\u52a0\u4f60\u7684\u7ffb\u8b6f\u5916\u639b\u89f8\u767c\u4ee3\u78bc\n console.log('Globe clicked - add your translation plugin here');\n \/\/ \u793a\u4f8b\uff1a\u53ef\u4ee5\u6253\u958b\u7ffb\u8b6f\u9762\u677f\u6216\u89f8\u767c\u7ffb\u8b6f\u5916\u639b\n };\n\n \/* =========================================\n \ud83d\udd25 \u7159\u706b\u5f15\u64ce - \u652f\u63f4\u4e0d\u540c\u984f\u8272\n ========================================= *\/\n const canvas = document.getElementById('fireworksCanvas'); \n const ctx = canvas.getContext('2d'); \n let particles = []; let fireworksInterval;\n let animationFrameId; \n \n function resizeCanvas() { \n const dpr = window.devicePixelRatio || 1;\n const width = window.innerWidth;\n const height = window.innerHeight;\n canvas.width = width * dpr; \n canvas.height = height * dpr; \n ctx.scale(dpr, dpr);\n canvas.style.width = width + 'px';\n canvas.style.height = height + 'px';\n }\n window.addEventListener('resize', resizeCanvas); resizeCanvas();\n \n function createParticle(x, y) {\n \/\/ \u4f7f\u7528\u7576\u524d\u7ae0\u7bc0\u7684\u984f\u8272\n const baseHue = currentFireworkHues[Math.floor(Math.random() * currentFireworkHues.length)];\n const isMobile = window.innerWidth < 768;\n const particleCount = isMobile ? 60 : 120; \/\/ \u66f4\u591a\u7d30\u5c0f\u7c92\u5b50\n\n for (let i = 0; i < particleCount; i++) { \n const hue = baseHue + (Math.random() * 15 - 7.5); \/\/ \u8f15\u5fae\u8272\u76f8\u8b8a\u5316\n particles.push({ \n x: x, y: y, \n hue: hue,\n speed: Math.random() * 2.5 + 0.3, \/\/ \u8f03\u6162\u64f4\u6563\n angle: Math.random() * Math.PI * 2, \n alpha: 0.9 + Math.random() * 0.1, \n decay: Math.random() * 0.008 + 0.003, \/\/ \u66f4\u6162\u8870\u6e1b\n size: Math.random() * 0.8 + 0.2 \/\/ \u66f4\u7d30\u5c0f\u7684\u7c92\u5b50\n }); \n }\n }\n \n function updateFireworks() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n \n \/\/ \u66f4\u67d4\u548c\u7684\u6de1\u51fa\u6548\u679c\n ctx.globalAlpha = 1;\n ctx.globalCompositeOperation = 'source-over'; \n ctx.fillStyle = 'rgba(0, 0, 0, 0.06)'; \/\/ \u66f4\u6162\u6de1\u51fa\uff0c\u62d6\u5c3e\u66f4\u9577\n ctx.fillRect(0, 0, width, height); \n ctx.globalCompositeOperation = 'lighter';\n \n for (let i = particles.length - 1; i >= 0; i--) { \n let p = particles[i]; \n p.x += Math.cos(p.angle) * p.speed; \n p.y += Math.sin(p.angle) * p.speed + 0.3; \/\/ \u8f15\u5fae\u4e0b\u589c\n p.speed *= 0.985; \/\/ \u9010\u6f38\u6e1b\u901f\n p.alpha -= p.decay; \n \n if (p.alpha <= 0) {\n particles.splice(i, 1);\n continue;\n }\n \n \/\/ \u4f7f\u7528\u5f91\u5411\u6f38\u5c64\u7e6a\u88fd\uff0c\u66f4\u67d4\u548c\n const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 3);\n gradient.addColorStop(0, `hsla(${p.hue}, 65%, 75%, ${p.alpha})`);\n gradient.addColorStop(0.3, `hsla(${p.hue}, 75%, 65%, ${p.alpha * 0.5})`);\n gradient.addColorStop(1, `hsla(${p.hue}, 85%, 55%, 0)`);\n \n ctx.fillStyle = gradient;\n ctx.beginPath(); \n ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2); \n ctx.fill(); \n }\n \n if (isTransitioning) {\n animationFrameId = requestAnimationFrame(updateFireworks);\n }\n }\n\n function startFireworks() {\n if (fireworksInterval) clearInterval(fireworksInterval);\n if (animationFrameId) cancelAnimationFrame(animationFrameId);\n updateFireworks(); \n \n \/\/ \u958b\u5834\u653e\u4e00\u767c\n setTimeout(() => createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.5), 300);\n \n \/\/ \u4e3b\u5faa\u74b0 - \u9593\u9694 600ms\uff0c\u8f03\u70ba\u8212\u9069\n fireworksInterval = setInterval(() => { \n if (!isTransitioning) return;\n createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.6);\n }, 600); \n }\n\n function stopFireworks() { \n clearInterval(fireworksInterval); \n cancelAnimationFrame(animationFrameId);\n ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); \n particles = []; \n }\n \n \/* \u661f\u7a7a\u80cc\u666f *\/\n (function() { \n if (document.readyState === 'loading') { \n document.addEventListener('DOMContentLoaded', initStarryBackground); \n } else { initStarryBackground(); } \n \n function initStarryBackground() { \n const starsContainer = document.getElementById('starsContainer'); \n const meteorsContainer = document.getElementById('meteorsContainer'); \n if (!starsContainer || !meteorsContainer) return; \n \n for (let i = 0; i < 120; i++) { \n const star = document.createElement('div'); \n const size = Math.random(); \n if (size > 0.95) star.className = 'star sparkle'; \n else if (size > 0.8) star.className = 'star large'; \n else if (size > 0.5) star.className = 'star medium'; \n else star.className = 'star small'; \n star.style.left = Math.random() * 100 + '%'; \n star.style.top = Math.random() * 100 + '%'; \n star.style.setProperty('--duration', (2 + Math.random() * 3) + 's'); \n star.style.setProperty('--delay', Math.random() * 3 + 's'); \n starsContainer.appendChild(star); \n } \n \n function createMeteor(isBig = false) { \n const meteor = document.createElement('div'); \n meteor.className = isBig ? 'meteor big' : 'meteor'; \n const startX = 30 + Math.random() * 65; \n const startY = 5 + Math.random() * 40; \n const duration = isBig ? 1.2 + Math.random() * 0.5 : 0.8 + Math.random() * 0.4; \n meteor.style.left = startX + '%'; \n meteor.style.top = startY + '%'; \n meteor.style.setProperty('--duration', duration + 's'); \n meteorsContainer.appendChild(meteor); \n setTimeout(() => { meteor.classList.add('active'); }, 50); \n setTimeout(() => { meteor.remove(); }, duration * 1000 + 200); \n } \n \n setTimeout(() => createMeteor(), 500); \n setTimeout(() => createMeteor(), 2000); \n setTimeout(() => createMeteor(true), 4000); \n \n function scheduleMeteor() { \n const delay = 4000 + Math.random() * 6000;\n setTimeout(() => { \n createMeteor(Math.random() > 0.7); \n scheduleMeteor(); \n }, delay); \n } \n setTimeout(scheduleMeteor, 5000); \n } \n })();\n\n \/\/ \ud83d\ude80 \u555f\u52d5\u6e2c\u9a57\uff08\u5148\u8f09\u5165 API \u8cc7\u6599\uff09\n initQuiz();\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Immersive Quiz &#821 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3787","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/3787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/comments?post=3787"}],"version-history":[{"count":492,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/3787\/revisions"}],"predecessor-version":[{"id":8276,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/3787\/revisions\/8276"}],"wp:attachment":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/media?parent=3787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n \u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2d\u0e34\u0e19\u0e40\u0e17\u0e2d\u0e23\u0e4c\u0e41\u0e2d\u0e04\u0e0a\u0e31\u0e48\u0e19 - Soul Quartet<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+TC:wght@400;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root { \n --txt-main: #f2ece9; \n --title-color: #d2cbc9 !important;\n --card-bg: rgba(44, 44, 44, 0.4); \n --accent-color: #a09f9b;\n --font-main: 'Noto Sans TC', sans-serif;\n --font-serif: 'Noto Serif TC', serif;\n --bg-grad-1: #5e4b49; --bg-grad-2: #695351; --bg-grad-3: #867b78; --bg-grad-4: #a09f9b; --bg-grad-5: #d2cbc9;\n }\n\n body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: var(--font-main); overflow: hidden; background-color: transparent; }\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\n\n \/* =========================================\n \u661f\u7a7a\u80cc\u666f\n ========================================= *\/\n .starry-background-wrapper { \n position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; \n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n transition: background 1.5s ease;\n }\n .starry-background-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%); }\n .starry-background-wrapper::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.5px, transparent 0.5px), radial-gradient(circle, rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px); background-size: 25px 25px, 37px 37px; opacity: 0.6; animation: grain 8s steps(10) infinite; }\n \n @keyframes grain { 0% { transform: translate(0, 0); } 100% { transform: translate(-10%, 5%); } }\n @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }\n @keyframes sparkle { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(200, 200, 255, 0.8); } }\n \n .starry-background-wrapper .stars { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }\n .starry-background-wrapper .star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle var(--duration) infinite ease-in-out; animation-delay: var(--delay); }\n .starry-background-wrapper .star.large { width: 4px; height: 4px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }\n .starry-background-wrapper .star.medium { width: 3px; height: 3px; box-shadow: 0 0 7px rgba(255, 255, 255, 0.6); }\n .starry-background-wrapper .star.small { width: 2px; height: 2px; box-shadow: 0 0 5px rgba(255, 255, 255, 0.4); }\n .starry-background-wrapper .star.sparkle { width: 5px; height: 5px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(200, 200, 255, 0.5); animation: sparkle 2.5s infinite ease-in-out; animation-delay: var(--delay); }\n \n \/* \u6d41\u661f *\/\n .starry-background-wrapper .meteor { position: fixed; width: 5px; height: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8); opacity: 0; z-index: 100; }\n .starry-background-wrapper .meteor.big { width: 10px; height: 10px; box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 255, 255, 0.9); }\n .starry-background-wrapper .meteor::before { content: ''; position: absolute; top: 50%; left: 100%; width: 150px; height: 2px; background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8), #fff); transform: translateY(-50%); border-radius: 2px; }\n .starry-background-wrapper .meteor.big::before { width: 250px; height: 4px; }\n @keyframes meteorFall { 0% { opacity: 1; transform: translate(0, 0) rotate(-45deg); } 100% { opacity: 0; transform: translate(-500px, 500px) rotate(-45deg); } }\n @keyframes meteorFallBig { 0% { opacity: 1; transform: translate(0, 0) rotate(-45deg); } 100% { opacity: 0; transform: translate(-800px, 800px) rotate(-45deg); } }\n .starry-background-wrapper .meteor.active { animation: meteorFall var(--duration) linear forwards; }\n .starry-background-wrapper .meteor.big.active { animation: meteorFallBig var(--duration) linear forwards; }\n\n \/* =========================================\n \u4ecb\u9762\u4f48\u5c40\n ========================================= *\/\n #immersive-quiz-wrapper {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100%; z-index: 10;\n background-color: transparent;\n display: flex; justify-content: center; align-items: center;\n }\n\n .quiz-card-container {\n width: 90%; max-width: 1000px;\n height: 92dvh; max-height: 900px;\n background: transparent; padding: 0;\n display: flex; flex-direction: column;\n position: relative; z-index: 10;\n padding-top: 20px;\n }\n\n .top-header {\n width: 100%; display: flex; justify-content: space-between; align-items: center;\n margin-bottom: 8px; flex-shrink: 0;\n }\n\n .chapter-pill {\n font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #fff;\n background: rgba(255,255,255,0.15); \n padding: 6px 14px; border-radius: 50px; \n border: 1px solid rgba(255,255,255,0.3);\n backdrop-filter: blur(4px);\n display: flex; align-items: center; gap: 8px;\n }\n \n #mobileBackBtn { display: none; cursor: pointer; font-size: 16px; }\n\n \/* \ud83d\udd25 \u5730\u7403\u6309\u9215 *\/\n .globe-btn {\n width: 33px;\n height: 33px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255,255,255,0.12);\n border: 1px solid rgba(255,255,255,0.35);\n box-shadow: 0 2px 6px rgba(0,0,0,0.12);\n padding: 0;\n transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n flex-shrink: 0;\n z-index: 100;\n }\n \n .globe-btn span {\n font-size: 20px;\n line-height: 1;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .globe-btn:hover {\n transform: scale(1.1);\n border-color: rgba(255,255,255,0.55);\n box-shadow: 0 3px 10px rgba(0,0,0,0.18);\n }\n \n .globe-btn:hover span {\n opacity: 0.9;\n }\n \n .globe-btn:active {\n transform: scale(0.95);\n }\n\n \/* \u9032\u5ea6\u689d *\/\n .progress-container { width: 100%; margin-bottom: 0px; flex-shrink: 0; } \n .progress-track { height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 10px; overflow: visible; }\n \n @keyframes breatheSideways {\n 0%, 100% { transform: scaleX(1); box-shadow: 0 0 4px rgba(255,255,255,0.3); }\n 50% { transform: scaleX(1.015); box-shadow: 0 0 6px rgba(255,255,255,0.5); }\n }\n \n .progress-bar-fill { \n height: 100%; width: 0%; border-radius: 10px; \n background: linear-gradient(90deg, rgba(255,255,255,0.6), #fff, rgba(255,255,255,0.85)); \n transition: width 0.5s ease; position: relative;\n transform-origin: left center;\n animation: breatheSideways 2.5s infinite ease-in-out;\n }\n \n @keyframes breatheDot {\n 0%, 100% { transform: translateY(-50%) scaleX(1); opacity: 0.6; }\n 50% { transform: translateY(-50%) scaleX(1.8); opacity: 0.9; }\n }\n \n .progress-bar-fill::after {\n content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);\n width: 12px; height: 4px;\n background: linear-gradient(90deg, #fff, rgba(255,255,255,0));\n border-radius: 0 4px 4px 0;\n animation: breatheDot 2.5s infinite ease-in-out;\n transform-origin: left center;\n }\n\n \/* \ud83d\udd25 \u984c\u76ee\u5340\u57df - \u589e\u52a0\u9593\u8ddd *\/\n .question-area { \n width: 100%;\n height: 150px; \/* \ud83d\udd25 \u518d\u589e\u52a0\u9ad8\u5ea6 *\/\n margin-bottom: 8px; \/* \ud83d\udd25 \u589e\u52a0\u8207\u5716\u7247\u9593\u8ddd *\/\n flex-shrink: 0;\n display: flex; flex-direction: column; align-items: center; justify-content: flex-start;\n position: relative; padding: 0 10px;\n padding-top: 15px;\n }\n\n \/* \ud83d\udd25 \u96fb\u8166\u7248\u6253\u5b57\u6a5f - \u589e\u52a0\u4e0a\u4e0b\u9593\u8ddd *\/\n .desktop-minor-transition {\n font-size: 17px; color: var(--accent-color); \n opacity: 0; display: none; \n transform: translateY(5px); transition: opacity 0.5s ease, transform 0.5s ease;\n font-weight: 500; width: 100%; text-align: center;\n text-shadow: 0 2px 8px rgba(0,0,0,0.8);\n position: relative;\n margin-top: 8px; \/* \ud83d\udd25 \u4e0a\u9593\u8ddd\u589e\u52a0 *\/\n margin-bottom: 22px; \/* \ud83d\udd25 \u4e0b\u9593\u8ddd\u589e\u52a0 *\/\n line-height: 1.5;\n flex-shrink: 0;\n }\n .desktop-minor-transition.active { display: block; }\n .desktop-minor-transition.show { opacity: 1; transform: translateY(0); }\n\n .question-text {\n font-size: 28px; font-weight: 700; line-height: 1.35; \n color: var(--title-color) !important; \n text-shadow: 0 2px 10px rgba(0,0,0,0.5); font-family: var(--font-serif);\n margin: 0; text-align: center; width: 100%;\n transition: font-size 0.3s ease; \n margin-top: auto; margin-bottom: auto;\n }\n \n .question-area.has-transition .question-text {\n margin-top: 0; margin-bottom: auto;\n }\n \n .content-body {\n flex: 1; width: 100%;\n display: flex; flex-direction: column; justify-content: center;\n overflow: hidden; min-height: 0; \n }\n\n .options-grid { \n display: grid; grid-template-columns: 1fr 1fr; gap: 40px; \n width: 100%; height: 100%; align-items: center; justify-items: center;\n }\n\n .option-container {\n width: 100%; max-width: 450px;\n cursor: pointer; position: relative;\n aspect-ratio: 1 \/ 1; \n border-radius: 24px; overflow: hidden;\n background: var(--card-bg);\n border: 1px solid rgba(255,255,255,0.15);\n box-shadow: 0 8px 20px rgba(0,0,0,0.25);\n transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), border 0.2s;\n }\n .option-container:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.5); }\n .option-container:active { transform: scale(1.02); border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,0.3); }\n\n .option-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; display: block; }\n .option-container:hover .option-img { transform: scale(1.08); }\n\n .option-text-overlay {\n position: absolute; bottom: 0; left: 0; width: 100%;\n padding: 50px 20px 25px 20px; \n display: flex; align-items: flex-end; justify-content: center;\n background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 40%, transparent 100%);\n z-index: 5; pointer-events: none;\n }\n .option-text {\n color: #fff; font-size: 20px; font-weight: 500; letter-spacing: 1px;\n text-shadow: 0 2px 5px rgba(0,0,0,0.9); text-align: center;\n }\n\n .nav-area { margin-top: 15px; width: 100%; height: 40px; position: relative; flex-shrink: 0; }\n .nav-btn { position: absolute; left: 0; bottom: 0; background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 14px; cursor: pointer; padding: 5px 10px; transition: 0.3s; display: flex; align-items: center; gap: 5px; }\n .nav-btn:hover { color: #fff; }\n .nav-btn.hidden { opacity: 0; pointer-events: none; }\n\n \/* iframe \u5d4c\u5165\u5c64 *\/\n .iframe-overlay {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n z-index: 99999; background: #0b0b0b; display: none;\n }\n .iframe-overlay.active { display: block; }\n .iframe-overlay iframe {\n width: 100%; height: 100%; border: none;\n background: transparent;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n .iframe-overlay iframe.loaded { opacity: 1; }\n\n \/* iframe loading \u52d5\u756b *\/\n .iframe-loader {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n z-index: 1;\n }\n .iframe-loader.hidden { display: none; }\n .iframe-spinner {\n width: 50px; height: 50px;\n border: 3px solid rgba(212, 191, 151, 0.2);\n border-top-color: #d4bf97;\n border-radius: 50%;\n animation: iframeSpin 1s linear infinite;\n }\n @keyframes iframeSpin { to { transform: rotate(360deg); } }\n .iframe-loader-text {\n color: #d4bf97;\n font-size: 14px;\n letter-spacing: 2px;\n opacity: 0.8;\n }\n\n \/* =========================================\n \ud83d\udd25 \u904e\u5834\u52d5\u756b - \u900f\u660e\u80cc\u666f + \u4e0d\u540c\u984f\u8272\u7159\u706b\n ========================================= *\/\n .transition-layer { \n position: fixed; top: 0; left: 0; width: 100%; height: 100%; \n background: rgba(0, 0, 0, 0.85); \/* \ud83d\udd25 \u900f\u660e\u5ea685% *\/\n z-index: 9999; \n display: flex; flex-direction: column; justify-content: center; align-items: center; \n opacity: 0; pointer-events: none; transition: opacity 0.8s ease; cursor: pointer; \n }\n .transition-layer.active { opacity: 1; pointer-events: auto; }\n .transition-content { text-align: center; max-width: 800px; padding: 20px 30px; position: relative; z-index: 10; box-sizing: border-box; }\n .transition-chapter { font-size: 14px; letter-spacing: 3px; color: var(--accent-color); margin-bottom: 20px; opacity: 0; transform: translateY(20px); transition: 0.8s ease; }\n .transition-text { font-family: var(--font-serif); font-size: 26px; font-weight: 700; line-height: 1.6; color: #fff; white-space: pre-line; overflow-wrap: break-word; word-break: break-word; }\n .tap-hint { position: absolute; bottom: 40px; color: rgba(255,255,255,0.4); font-size: 12px; animation: blink 2s infinite; pointer-events: none; }\n .active .transition-chapter { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }\n @keyframes blink { 0%,100% { opacity: 0.3; } 50% { opacity: 0.8; } }\n #fireworksCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }\n\n \/* =========================================\n \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801 - \u6eab\u6696\u6f38\u5c64 + \u6c23\u7403\n ========================================= *\/\n .transition-layer.final-mode {\n background: linear-gradient(180deg,\n #8B7355 0%,\n #A08060 25%,\n #C4A77D 50%,\n #D4B896 75%,\n #E8D4B8 100%\n );\n cursor: default;\n overflow-y: auto;\n justify-content: flex-start; \/* \u8986\u84cb center\uff0c\u5f9e\u9802\u90e8\u958b\u59cb\u6392\u5217 *\/\n padding-top: 35px;\n padding-bottom: 35px;\n }\n\n .final-mode .transition-content {\n max-width: 520px;\n padding: 12px 25px 18px;\n text-align: center;\n }\n\n .final-mode .transition-chapter { display: none; }\n .final-mode .tap-hint { display: none; }\n\n .final-mode .transition-text {\n font-family: var(--font-main);\n font-size: 15px;\n text-align: center;\n line-height: 1.8;\n color: #4a4a4a;\n opacity: 0;\n transition: opacity 1s;\n font-weight: 400;\n }\n .final-mode .transition-text.fade-in { opacity: 1; }\n\n \/* \ud83c\udfc6 LOGO \u5fbd\u7ae0 - \u5927\u5730\u8272\u7cfb *\/\n .final-badge {\n width: 100px;\n height: 100px;\n margin: 0 auto 8px;\n background: linear-gradient(145deg, #E8D4B8 0%, #D4C4A8 50%, #C4B498 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n animation: badgePulse 2.5s ease-in-out infinite, badgeFloat 3s ease-in-out infinite;\n position: relative;\n padding: 15px;\n }\n .final-badge img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n filter: drop-shadow(0 2px 4px rgba(93, 78, 55, 0.2));\n }\n .final-badge::before {\n content: '';\n position: absolute;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n border: 2px dashed rgba(160, 128, 96, 0.4);\n animation: badgeRotate 25s linear infinite;\n }\n .final-badge::after {\n content: '';\n position: absolute;\n width: 165px;\n height: 165px;\n border-radius: 50%;\n border: 1px dotted rgba(139, 115, 85, 0.25);\n animation: badgeRotate 35s linear infinite reverse;\n }\n @keyframes badgePulse {\n 0%, 100% {\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n }\n 50% {\n box-shadow:\n 0 0 0 12px rgba(160, 128, 96, 0.15),\n 0 0 40px rgba(139, 115, 85, 0.4),\n 0 15px 45px rgba(93, 78, 55, 0.3);\n }\n }\n @keyframes badgeFloat {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n @keyframes badgeRotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n .final-mode .final-title {\n font-size: 26px;\n color: #3D3225;\n text-align: center;\n margin-bottom: 2px;\n font-weight: 700;\n font-family: var(--font-serif);\n line-height: 1.2;\n text-shadow: 0 1px 2px rgba(255,255,255,0.5);\n }\n\n .final-subtitle {\n font-size: 13px;\n color: #5D4E37;\n margin-bottom: 8px;\n letter-spacing: 2px;\n font-weight: 500;\n }\n\n \/* \ud83d\udce6 \u8cc7\u8a0a\u5361\u7247 *\/\n .final-card {\n background: rgba(255, 255, 255, 0.85);\n border-radius: 12px;\n padding: 14px 20px;\n margin-bottom: 5px;\n box-shadow: 0 4px 20px rgba(93, 78, 55, 0.15);\n text-align: left;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.5);\n transform: translateY(20px);\n opacity: 0;\n animation: cardSlideUp 0.6s ease forwards;\n }\n .final-card:nth-child(2) { animation-delay: 0.2s; }\n .final-card:nth-child(3) { animation-delay: 0.4s; }\n .final-card:nth-child(4) { animation-delay: 0.6s; }\n @keyframes cardSlideUp {\n to { transform: translateY(0); opacity: 1; }\n }\n\n .final-card-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n }\n .final-card-icon {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n }\n .final-card-icon.thanks { background: linear-gradient(135deg, #E8D4B8, #C4A77D); }\n .final-card-icon.photo { background: linear-gradient(135deg, #B8D4E8, #7DA0C4); }\n .final-card-icon.time { background: linear-gradient(135deg, #D4E8B8, #A0C47D); }\n\n .final-card-title {\n font-weight: 700;\n color: #3D3225;\n font-size: 15px;\n }\n .final-card-text {\n color: #4a4a4a;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .final-mode .final-highlight {\n color: #6B4C0A;\n font-weight: 700;\n background: linear-gradient(120deg, rgba(255, 200, 50, 0.35) 0%, rgba(255, 165, 0, 0.3) 100%);\n padding: 2px 8px;\n border-radius: 4px;\n }\n\n \/* \u2728 \u9583\u720d\u661f\u661f *\/\n .final-stars {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n .final-star {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #FFD700;\n border-radius: 50%;\n animation: starTwinkle 2s ease-in-out infinite;\n box-shadow: 0 0 6px #FFD700;\n }\n @keyframes starTwinkle {\n 0%, 100% { opacity: 0.3; transform: scale(0.8); }\n 50% { opacity: 1; transform: scale(1.2); }\n }\n\n \/* \ud83d\udd25 \u6700\u7d42\u9801\u6309\u9215 *\/\n .final-btn {\n display: none;\n margin: 12px auto 0 auto;\n padding: 14px 40px;\n font-size: 16px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 8px 25px rgba(93, 78, 55, 0.4);\n transition: all 0.3s ease;\n letter-spacing: 1px;\n position: relative;\n overflow: hidden;\n }\n .final-btn::before {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n @keyframes btnShine {\n 0%, 100% { left: -100%; }\n 50% { left: 100%; }\n }\n .final-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 35px rgba(93, 78, 55, 0.5);\n }\n .final-btn.show { display: inline-block; }\n\n \/* \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236 - \u4e3b\u6309\u9215\u7981\u7528 *\/\n .final-btn.disabled {\n background: linear-gradient(135deg, #999 0%, #aaa 50%, #bbb 100%);\n cursor: not-allowed;\n box-shadow: none;\n opacity: 0.6;\n pointer-events: none;\n }\n .final-btn.disabled::before { animation: none; }\n\n .final-unlock-hint {\n display: none;\n text-align: center;\n margin-top: 10px;\n font-size: 12px;\n font-weight: 500;\n color: rgba(80, 70, 60, 0.7);\n letter-spacing: 0.5px;\n }\n .final-unlock-hint.show { display: block; }\n\n \/* \ud83c\udd93 \u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\u6309\u9215 *\/\n .final-simple-btn {\n display: inline-block;\n padding: 20px 60px;\n font-size: 22px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 700;\n cursor: pointer;\n box-shadow: 0 8px 25px rgba(93, 78, 55, 0.5);\n transition: all 0.3s ease;\n text-decoration: none;\n letter-spacing: 2px;\n position: relative;\n overflow: hidden;\n animation: simpleBtnBreathe 2s ease-in-out infinite;\n min-width: 280px;\n }\n @keyframes simpleBtnBreathe {\n 0%, 100% { box-shadow: 0 8px 25px rgba(93, 78, 55, 0.5); transform: scale(1); }\n 50% { box-shadow: 0 12px 40px rgba(93, 78, 55, 0.7), 0 0 20px rgba(160, 128, 96, 0.4); transform: scale(1.05); }\n }\n .final-simple-btn::before {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n .final-simple-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 10px 35px rgba(93, 78, 55, 0.5);\n animation: none;\n }\n\n \/* \ud83d\udd12 \u4ed8\u8cbb\u906e\u7f69\u5361\u7247 *\/\n .final-card.locked {\n position: relative;\n opacity: 0.45;\n }\n .final-card.locked::after {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: rgba(190, 185, 175, 0.45);\n border-radius: 12px;\n z-index: 1;\n }\n\n \/* \ud83d\udd19 Final \u9801\u8fd4\u56de\u6309\u9215 *\/\n .final-back-btn {\n display: inline-block;\n margin-top: 8px;\n padding: 8px 20px;\n background: transparent;\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 25px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 14px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .final-back-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.6);\n color: rgba(255, 255, 255, 0.9);\n }\n\n \/* \ud83c\udf88 \u6c23\u7403\u5bb9\u5668 *\/\n .balloon-container {\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n overflow: hidden;\n pointer-events: none;\n z-index: 0;\n display: none;\n }\n\n \/* \u57fa\u790e\u6c23\u7403\u52d5\u756b *\/\n .balloon-base {\n position: absolute;\n bottom: -120px;\n animation: balloonFloat var(--duration, 12s) ease-in-out infinite;\n animation-delay: var(--delay, 0s);\n opacity: 0;\n }\n @keyframes balloonFloat {\n 0% { transform: translateY(0) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { transform: translateY(-120vh) rotate(15deg); opacity: 0; }\n }\n\n \/* \ud83d\udd34 \u5713\u5f62\u6c23\u7403 *\/\n .balloon-round {\n width: 55px;\n height: 68px;\n border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\n }\n .balloon-round::after {\n content: '';\n position: absolute;\n bottom: -25px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n .balloon-round .shine {\n position: absolute;\n width: 12px;\n height: 18px;\n background: rgba(255,255,255,0.5);\n border-radius: 50%;\n top: 12px;\n left: 10px;\n }\n\n \/* \u2764\ufe0f \u611b\u5fc3\u6c23\u7403 *\/\n .balloon-heart {\n width: 50px;\n height: 45px;\n background: transparent !important;\n }\n .balloon-heart::before,\n .balloon-heart::after {\n content: '';\n position: absolute;\n top: 0;\n width: 26px;\n height: 40px;\n border-radius: 26px 26px 0 0;\n background: inherit;\n }\n .balloon-heart::before {\n left: 25px;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n background: var(--heart-color);\n }\n .balloon-heart::after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n background: var(--heart-color);\n }\n .balloon-heart .string {\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n\n \/* \ud83c\udf69 \u751c\u751c\u5708\u6c23\u7403 *\/\n .balloon-donut {\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n }\n .balloon-donut::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: linear-gradient(180deg, #A08060 0%, #C4A77D 50%, #D4B896 100%);\n }\n .balloon-donut::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n .balloon-donut .sprinkles {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n .balloon-donut .sprinkles::before,\n .balloon-donut .sprinkles::after {\n content: '';\n position: absolute;\n width: 4px;\n height: 8px;\n border-radius: 2px;\n }\n .balloon-donut .sprinkles::before {\n top: 8px; left: 20px;\n background: #fff;\n transform: rotate(30deg);\n }\n .balloon-donut .sprinkles::after {\n top: 15px; right: 12px;\n background: #FFD700;\n transform: rotate(-20deg);\n }\n\n \/* \u2b50 \u661f\u661f\u6c23\u7403 *\/\n .balloon-star {\n width: 50px;\n height: 50px;\n background: transparent !important;\n }\n .balloon-star::before {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 50px;\n height: 50px;\n background: var(--star-color);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n }\n .balloon-star::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0,0,0,0.15);\n }\n\n \/* \u984f\u8272\u8b8a\u9ad4 *\/\n .color-pink { background: rgba(255, 182, 193, 0.75); --heart-color: rgba(255, 182, 193, 0.75); --star-color: rgba(255, 182, 193, 0.75); }\n .color-blue { background: rgba(173, 216, 230, 0.75); --heart-color: rgba(173, 216, 230, 0.75); --star-color: rgba(173, 216, 230, 0.75); }\n .color-peach { background: rgba(255, 218, 185, 0.75); --heart-color: rgba(255, 218, 185, 0.75); --star-color: rgba(255, 218, 185, 0.75); }\n .color-lavender { background: rgba(221, 180, 221, 0.75); --heart-color: rgba(221, 180, 221, 0.75); --star-color: rgba(221, 180, 221, 0.75); }\n .color-mint { background: rgba(176, 224, 200, 0.75); --heart-color: rgba(176, 224, 200, 0.75); --star-color: rgba(176, 224, 200, 0.75); }\n .color-cream { background: rgba(255, 250, 220, 0.75); --heart-color: rgba(255, 250, 220, 0.75); --star-color: rgba(255, 250, 220, 0.75); }\n .color-coral { background: rgba(255, 160, 140, 0.7); --heart-color: rgba(255, 160, 140, 0.7); --star-color: rgba(255, 160, 140, 0.7); }\n .color-gold { background: rgba(255, 215, 150, 0.7); --heart-color: rgba(255, 215, 150, 0.7); --star-color: rgba(255, 215, 150, 0.7); }\n\n \/* =========================================\n \u624b\u6a5f\u7248 - \u5b8c\u5168\u81ea\u9069\u61c9\n ========================================= *\/\n @media (max-width: 900px) {\n .quiz-card-container { \n height: 100vh; \/* fallback *\/\n height: 100svh; \/* \u5c0f\u8996\u7a97\u9ad8\u5ea6\uff0c\u78ba\u4fdd\u5730\u5740\u6b04\u986f\u793a\u6642\u4e5f\u4e0d\u6ea2\u51fa *\/\n padding: 10px 12px 10px 12px;\n display: flex;\n flex-direction: column;\n }\n\n \/* \ud83d\udd25 \u78ba\u4fdd\u9802\u90e8\u5340\u57df\u986f\u793a *\/\n .top-header { \n margin-bottom: 5px; \n flex-shrink: 0; \n display: flex !important;\n }\n .progress-container { \n margin-bottom: 5px; \n flex-shrink: 0; \n display: block !important;\n }\n \n .question-area { \n flex-shrink: 0;\n min-height: 50px;\n max-height: 90px;\n padding: 8px 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .question-area.has-transition .question-text { margin-top: auto; margin-bottom: auto; }\n .question-text { \n font-size: 18px;\n line-height: 1.4;\n padding: 0 5px;\n }\n\n .desktop-minor-transition { display: none !important; }\n .nav-area { display: none !important; }\n\n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u5927\u8f49\u5834\u6587\u5b57 - \u9632\u6b62\u6ea2\u51fa *\/\n .transition-content {\n max-width: 100%;\n padding: 15px 20px;\n }\n .transition-text {\n font-size: 20px;\n line-height: 1.5;\n }\n\n \/* \ud83d\udd25 \u5167\u5bb9\u5340\u57df - \u4f7f\u7528 flex: 1 \u586b\u6eff\u5269\u9918\u7a7a\u9593 *\/\n .content-body {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 5px 0;\n -webkit-overflow-scrolling: touch;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u7db2\u683c - \u5e73\u5206\u7a7a\u9593 *\/\n .options-grid { \n display: flex; \n flex-direction: column;\n width: 100%;\n height: 100%;\n gap: 8px;\n justify-content: center;\n align-items: center;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u5bb9\u5668 - \u81ea\u9069\u61c9\uff0c\u5141\u8a31\u7e2e\u5c0f *\/\n .option-container {\n width: min(85vw, calc((100svh - 200px) \/ 2 - 10px));\n max-height: calc((100svh - 200px) \/ 2 - 10px);\n aspect-ratio: 1 \/ 1;\n max-width: none;\n margin: 0;\n border-radius: 18px;\n flex-shrink: 1;\n min-height: 0;\n }\n \n .option-container:active { \n transform: none;\n border-color: #fff; \n border-width: 2px;\n box-shadow: 0 0 25px rgba(255,255,255,0.4); \n }\n \n .option-img { \n object-fit: cover; \n height: 100%; \n width: 100%; \n }\n .option-text { \n font-size: 16px; \n font-weight: 600; \n }\n .option-text-overlay { \n padding-bottom: 12px; \n padding-top: 35px; \n }\n \n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u6700\u7d42\u9801 *\/\n .final-mode .transition-content {\n padding: 10px 15px 15px;\n max-width: 100%;\n }\n\n .final-badge {\n width: 85px;\n height: 85px;\n margin-bottom: 6px;\n padding: 10px;\n }\n .final-badge::before {\n width: 100px;\n height: 100px;\n }\n .final-badge::after {\n width: 115px;\n height: 115px;\n }\n\n .final-mode .final-title {\n font-size: 22px;\n margin-bottom: 2px;\n line-height: 1.2;\n }\n\n .final-subtitle {\n font-size: 12px;\n margin-bottom: 6px;\n }\n\n .final-card {\n padding: 12px 16px;\n margin-bottom: 4px;\n border-radius: 10px;\n }\n .final-card-icon {\n width: 32px;\n height: 32px;\n font-size: 16px;\n }\n .final-card-title { font-size: 14px; }\n .final-card-text { font-size: 13px; line-height: 1.55; }\n\n .final-mode .transition-text {\n font-size: 13px;\n line-height: 1.6;\n text-align: center;\n }\n\n .final-btn {\n padding: 12px 35px;\n font-size: 14px;\n margin-top: 10px;\n }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403 *\/\n .balloon-base { transform: scale(0.85); }\n }\n \n \/* \ud83d\udd25 \u5c0f\u87a2\u5e55\u624b\u6a5f *\/\n @media (max-width: 380px) {\n .quiz-card-container { padding: 8px 10px 8px 10px; }\n\n .question-area {\n min-height: 45px;\n max-height: 75px;\n }\n .question-text { font-size: 16px; }\n\n .option-container {\n border-radius: 14px;\n width: min(88vw, calc((100svh - 180px) \/ 2 - 8px));\n max-height: calc((100svh - 180px) \/ 2 - 8px);\n }\n .option-text { font-size: 14px; }\n\n .final-badge { width: 80px; height: 80px; margin-bottom: 5px; padding: 8px; }\n .final-badge::before { width: 95px; height: 95px; }\n .final-badge::after { width: 108px; height: 108px; }\n .final-mode .final-title { font-size: 20px; margin-bottom: 2px; }\n .final-subtitle { font-size: 11px; margin-bottom: 5px; letter-spacing: 1px; }\n .final-card { padding: 10px 14px; margin-bottom: 4px; }\n .final-card-icon { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }\n .final-card-title { font-size: 13px; }\n .final-card-text { font-size: 12px; line-height: 1.5; }\n .final-mode .transition-text { font-size: 12px; line-height: 1.5; }\n .final-btn { padding: 10px 30px; font-size: 13px; margin-top: 8px; }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403\u7e2e\u5c0f *\/\n .balloon-base { transform: scale(0.8); }\n }\n \n \/* \ud83d\udd25 \u8d85\u5c0f\u87a2\u5e55 *\/\n @media (max-width: 320px) {\n .option-container {\n width: min(90vw, calc((100svh - 170px) \/ 2 - 6px));\n max-height: calc((100svh - 170px) \/ 2 - 6px);\n border-radius: 12px;\n }\n .question-text { font-size: 15px; }\n }\n\n \/* =========================================\n \ud83d\udd04 Loading \u756b\u9762\n ========================================= *\/\n .loading-screen {\n position: fixed;\n top: 0; left: 0;\n width: 100vw; height: 100vh;\n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n z-index: 99999;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s ease;\n }\n .loading-screen.hidden {\n opacity: 0;\n pointer-events: none;\n }\n .loading-spinner {\n width: 50px; height: 50px;\n border: 3px solid rgba(255,255,255,0.2);\n border-top-color: rgba(255,255,255,0.8);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n .loading-text {\n margin-top: 20px;\n color: rgba(255,255,255,0.7);\n font-size: 16px;\n letter-spacing: 2px;\n }\n\n \/* \ud83d\udeab \u932f\u8aa4\u756b\u9762 *\/\n .error-screen {\n position: fixed;\n top: 0; left: 0;\n width: 100vw; height: 100vh;\n background: linear-gradient(180deg, #3d2a2a 0%, #4a3535 50%, #5c4040 100%);\n z-index: 99999;\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 30px;\n }\n .error-screen.active { display: flex; }\n .error-icon { font-size: 60px; margin-bottom: 20px; }\n .error-title {\n font-size: 24px;\n color: #fff;\n margin-bottom: 15px;\n font-family: var(--font-serif);\n }\n .error-message {\n font-size: 16px;\n color: rgba(255,255,255,0.7);\n line-height: 1.6;\n max-width: 400px;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"loading-screen\" id=\"loadingScreen\">\n <div class=\"loading-spinner\"><\/div>\n <div class=\"loading-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e17\u0e14\u0e2a\u0e2d\u0e1a...<\/div>\n <\/div>\n\n \n <div class=\"error-screen\" id=\"errorScreen\">\n <div class=\"error-icon\">\u26a0\ufe0f<\/div>\n <div class=\"error-title\" id=\"errorTitle\">\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e25\u0e49\u0e21\u0e40\u0e2b\u0e25\u0e27<\/div>\n <div class=\"error-message\" id=\"errorMessage\">\u0e42\u0e1b\u0e23\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\u0e20\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e07<\/div>\n <\/div>\n\n <div class=\"starry-background-wrapper\" id=\"bgWrapper\">\n <div class=\"stars\" id=\"starsContainer\"><\/div>\n <div class=\"stars\" id=\"meteorsContainer\"><\/div>\n <\/div>\n\n <div class=\"iframe-overlay\" id=\"iframeOverlay\">\n <div class=\"iframe-loader\" id=\"iframeLoader\">\n <div class=\"iframe-spinner\"><\/div>\n <div class=\"iframe-loader-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/div>\n <\/div>\n <iframe id=\"embeddedFrame\" src=\"about:blank\" allow=\"camera; microphone; fullscreen\" allowfullscreen><\/iframe>\n <\/div>\n\n <div class=\"transition-layer notranslate skiptranslate\" id=\"transitionLayer\" translate=\"no\" data-no-translation=\"true\">\n <div class=\"balloon-container\" id=\"balloonContainer\"><\/div>\n <canvas id=\"fireworksCanvas\"><\/canvas>\n <div class=\"transition-content\">\n <div class=\"transition-chapter\" id=\"transChapter\">CHAPTER<\/div>\n <div class=\"transition-text\" id=\"transText\"><\/div>\n <button class=\"final-btn\" id=\"finalBtn\" onclick=\"goToFinalStep()\">\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65<\/button>\n <\/div>\n <div class=\"tap-hint\" id=\"tapHint\">\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c<\/div>\n <\/div>\n\n <div id=\"immersive-quiz-wrapper\">\n <div class=\"quiz-card-container\">\n \n <div class=\"top-header\">\n <div class=\"chapter-pill\">\n <span id=\"mobileBackBtn\" onclick=\"prevQuestion()\" style=\"display:none; padding-right:8px; margin-right:8px; border-right:1px solid rgba(255,255,255,0.3); cursor:pointer;\">\u2190<\/span>\n <span id=\"chapterBadge\">\u0e1a\u0e17\u0e17\u0e35\u0e48 1<\/span>\n <span style=\"opacity: 0.5; padding: 0 5px;\">|<\/span>\n <span id=\"questionCounter\">1\/21<\/span>\n <\/div>\n \n <div class=\"globe-btn lang-switcher\" id=\"globeBtn\" role=\"button\" tabindex=\"0\"><span>\ud83c\udf0f<\/span><\/div>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-track\"><div class=\"progress-bar-fill\" id=\"progressBar\"><\/div><\/div>\n <\/div>\n\n <div class=\"question-area\" id=\"questionArea\">\n <div class=\"desktop-minor-transition notranslate skiptranslate\" id=\"desktopMinorText\" translate=\"no\" data-no-translation=\"true\"><\/div>\n <div class=\"question-text\" id=\"qTitle\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...<\/div>\n <\/div>\n\n <div class=\"content-body\">\n <div class=\"fade-wrapper\" id=\"questionBox\">\n <div class=\"options-grid\">\n <div class=\"option-container\" onclick=\"selectOption('A')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgA\">\n <div class=\"option-text-overlay\"><div class=\"option-text\" id=\"textA\"><\/div><\/div>\n <\/div>\n <div class=\"option-container\" onclick=\"selectOption('B')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgB\">\n <div class=\"option-text-overlay\"><div class=\"option-text\" id=\"textB\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"nav-area\">\n <button class=\"nav-btn hidden\" id=\"prevBtn\" onclick=\"prevQuestion()\">\n <span>\u2190<\/span> \u0e04\u0e33\u0e16\u0e32\u0e21\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\udee1\ufe0f \u4fdd\u8b77\u4ee3\u78bc - \u66ab\u6642\u95dc\u9589\uff08\u9664\u932f\u7528\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/*\n (function(){\n \/\/ \ud83d\udeab Console \u8b66\u544a\n const warningStyle = 'font-size:20px;color:red;font-weight:bold;';\n console.log('%c\u26a0\ufe0f \u8b66\u544a\uff1a\u5075\u6e2c\u5230\u958b\u767c\u8005\u5de5\u5177 \u26a0\ufe0f', warningStyle);\n console.log('%c\u6b64\u9801\u9762\u53d7\u5230\u4fdd\u8b77\uff0c\u8acb\u52ff\u5617\u8a66\u67e5\u770b\u6216\u8907\u88fd\u4ee3\u78bc', 'font-size:14px;color:orange;');\n\n \/\/ \ud83d\udd12 \u7121\u9650 debugger\uff08\u8b93\u958b\u767c\u8005\u5de5\u5177\u5361\u4f4f\uff09\n setInterval(function(){\n (function(a){return(function(a){return(Function('Function(arguments[0]+\"'+a+'\")()'))})(a)})('bugger')('de');\n }, 50);\n\n \/\/ \ud83d\udd0d \u5075\u6e2c\u958b\u767c\u8005\u5de5\u5177\n let devToolsOpen = false;\n const threshold = 160;\n\n const detectDevTools = function(){\n const widthThreshold = window.outerWidth - window.innerWidth > threshold;\n const heightThreshold = window.outerHeight - window.innerHeight > threshold;\n\n if(widthThreshold || heightThreshold){\n if(!devToolsOpen){\n devToolsOpen = true;\n \/\/ \ud83d\udca5 \u6e05\u7a7a\u7db2\u9801\n document.body.innerHTML = '<div style=\"display:flex;justify-content:center;align-items:center;height:100vh;background:#000;color:#fff;font-size:20px;\">\u26a0\ufe0f \u5b58\u53d6\u88ab\u62d2\u7d55<\/div>';\n }\n }\n };\n\n setInterval(detectDevTools, 500);\n window.addEventListener('resize', detectDevTools);\n\n \/\/ \ud83d\udeab \u7981\u6b62\u53f3\u9375\n document.addEventListener('contextmenu', function(e){ e.preventDefault(); });\n\n \/\/ \ud83d\udeab \u7981\u6b62\u5e38\u7528\u5feb\u6377\u9375 (F12, Ctrl+Shift+I, Ctrl+U)\n document.addEventListener('keydown', function(e){\n if(e.key === 'F12' ||\n (e.ctrlKey && e.shiftKey && e.key === 'I') ||\n (e.ctrlKey && e.shiftKey && e.key === 'J') ||\n (e.ctrlKey && e.key === 'U')){\n e.preventDefault();\n return false;\n }\n });\n })();\n *\/\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udf10 API \u8a2d\u5b9a\u8207\u52d5\u614b\u8f09\u5165\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n const API_BASE = 'https:\/\/maybeits.me\/wp-json\/ragic-proxy\/v1';\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API \u7aef\u9ede\n const API_QUIZ_BY_CODE = `${API_BASE}\/quiz-by-code`;\n\n \/\/ \u89d2\u8272 \u2192 API \u8def\u5f91\u5c0d\u61c9\uff08\u5099\u7528\uff09\n const roleToPath = {\n 'F1': '\/1', 'F2': '\/2', 'F3': '\/3', 'F4': '\/4', 'F5': '\/5', 'F6': '\/6',\n 'M1': '\/7', 'M2': '\/8', 'M3': '\/9', 'M4': '\/10', 'M5': '\/11', 'M6': '\/12',\n 'ALL': '\/0'\n };\n\n \/\/ \u4e3b\u984c\u5206\u985e \u2192 \u8996\u89ba\u6a23\u5f0f\uff08Hardcode\uff09\n const chapterStyles = {\n \"\u65e5\u5e38\u7684\u8d77\u9ede\": {\n colors: [\"#5e4b49\", \"#695351\", \"#867b78\", \"#a09f9b\", \"#d2cbc9\"],\n fireworkHues: [30, 40, 50] \/\/ \u6696\u6a58\u91d1\n },\n \"\u6311\u6230\u8207\u5192\u96aa\": {\n colors: [\"#323836\", \"#566367\", \"#7B8E95\", \"#A4A9A9\", \"#CEC5BE\"],\n fireworkHues: [180, 200, 220] \/\/ \u51b7\u9752\u85cd\n },\n \"\u5167\u5fc3\u7684\u8a66\u7149\": {\n colors: [\"#020202\", \"#392B27\", \"#715349\", \"#9F8882\", \"#CDBEBB\"],\n fireworkHues: [0, 20, 340] \/\/ \u6df1\u7d05\u73ab\u7470\n },\n \"\u771f\u5be6\u7684\u6b78\u4f86\": {\n colors: [\"#2F2F2F\", \"#3B4F5E\", \"#486F8E\", \"#96AAB9\", \"#E5E5E5\"],\n fireworkHues: [260, 280, 300] \/\/ \u795e\u79d8\u7d2b\n }\n };\n\n \/\/ \u52d5\u614b\u8cc7\u6599\u5bb9\u5668\uff08\u5f9e API \u8f09\u5165\u5f8c\u586b\u5145\uff09\n let imageSources = {};\n let chapterRanges = [];\n let fireworkColors = {};\n let transitions = {};\n let quizData = [];\n\n \/\/ \ud83c\udf10 \u591a\u8a9e\u8a00\u652f\u63f4\n const SUPPORTED_LANGS = ['zh-hk', 'zh-cn', 'en', 'kr', 'jp', 'th', 'vi', 'br', 'id'];\n\n \/\/ UI \u6587\u5b57\u7ffb\u8b6f\u5b57\u5178\n const UI_TRANSLATIONS = {\n '': { \/\/ \u7e41\u9ad4\u4e2d\u6587 TW\uff08\u9810\u8a2d\uff09\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u7684\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u611f\u8b1d\u4f60\u7684\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u5011\u62b5\u9054\u4e86\u9019\u88e1\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5982\u6b64\u771f\u8aa0\u5730\u8207\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u4e86\u9019\u8d9f\u63a2\u7d22\u3002\u9019\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u7167\u7247',\n nextStepText: '\u70ba\u4e86\u8b93\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u7167\u7247\uff0c\u7528\u65bc\u751f\u6210\u5c08\u5c6c\u7684<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u662f\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u7167\u7247\u5f8c\u7d04\u9700 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u7522\u51fa\u7d50\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u9ede\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u6c92\u6709\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-hk': { \/\/ \u7e41\u9ad4\u4e2d\u6587 HK\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u7dca...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u64b3\u4efb\u610f\u4f4d\u7f6e\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u5587\uff0c\u53bb\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u5605\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u591a\u8b1d\u4f60\u5605\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u54cb\u5230\u5497\u5462\u5ea6\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5481\u771f\u8aa0\u5481\u540c\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u5497\u5462\u8d9f\u63a2\u7d22\u3002\u5462\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u4fc2\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u76f8\u7247',\n nextStepText: '\u70ba\u5497\u4ee4\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u76f8\u7247\uff0c\u7528\u569f\u751f\u6210\u5c08\u5c6c\u5605<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u4fc2\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u76f8\u7247\u5f8c\u5927\u6982\u9700\u8981 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u5148\u51fa\u5230\u7d50\u679c\u3002\u7f8e\u597d\u5605\u5622\uff0c\u503c\u5f97\u7b49\u4e00\u9663\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u5187\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-cn': { \/\/ \u7b80\u4f53\u4e2d\u6587\n loading: '\u52a0\u8f7d\u6d4b\u9a8c\u4e2d...',\n questionLoading: '\u9898\u76ee\u52a0\u8f7d\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u9898',\n tapToContinue: '\u70b9\u51fb\u4efb\u610f\u5904\u7ee7\u7eed',\n ready: '\u6211\u51c6\u5907\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u51c6\u5907\u9886\u53d6\u4f60\u7684\u4e13\u5c5e\u7075\u9b42\u62a5\u544a \u2500\u2500',\n thanks: '\u611f\u8c22\u4f60\u7684\u575a\u6301',\n thanksText: '\u7ec8\u4e8e\uff0c\u6211\u4eec\u62b5\u8fbe\u4e86\u8fd9\u91cc\u3002\u6df1\u6df1\u611f\u8c22\u4f60\u5982\u6b64\u771f\u8bda\u5730\u4e0e\u81ea\u5df1\u5bf9\u8bdd\uff0c\u5b8c\u6210\u4e86\u8fd9\u8d9f\u63a2\u7d22\u3002\u8fd9\u4efd\u575a\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u79cd\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u4f20\u7167\u7247',\n nextStepText: '\u4e3a\u4e86\u8ba9\u62a5\u544a\u771f\u6b63\u5c5e\u4e8e\u4f60\uff0c\u4e0b\u4e00\u9636\u6bb5\u4f1a\u9080\u8bf7\u4f60\u63d0\u4f9b\u4e00\u5f20\u4e2a\u4eba\u7167\u7247\uff0c\u7528\u4e8e\u751f\u6210\u4e13\u5c5e\u7684<span class=\"final-highlight\">\"Q\u7248\u60c5\u5883\u56fe\u7247\"<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u4e3a\u662f\u6df1\u5ea6\u5b9a\u5236\u5316\u89e3\u6790\uff0c\u4e0a\u4f20\u7167\u7247\u540e\u7ea6\u9700 <span class=\"final-highlight\">15 \u5206\u949f<\/span> \u4ea7\u51fa\u7ed3\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u70b9\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8d39\u9886\u53d6\u7b80\u6613\u7248\u62a5\u544a',\n paidHint: '( \u6b64\u4e3a\u4ed8\u8d39\u89e3\u9501\u5b9a\u5236\u5316\u62a5\u544a\u4e13\u5c5e\u6d41\u7a0b\uff0c\u514d\u8d39\u7248\u6ca1\u6709\u4e13\u5c5e\u60c5\u5883\u56fe\u7247 )'\n },\n 'en': { \/\/ English\n loading: 'Loading quiz...',\n questionLoading: 'Loading question...',\n prevQuestion: 'Previous',\n tapToContinue: 'Tap anywhere to continue',\n ready: \"I'm ready, let's go!\",\n congrats: 'Congratulations!',\n soulReport: '\u2500\u2500 Ready to receive your soul report \u2500\u2500',\n thanks: 'Thank you for your perseverance',\n thanksText: \"Finally, we've arrived here. Thank you for such an honest dialogue with yourself, completing this journey of exploration. This perseverance itself is a form of strength.\",\n nextStep: 'Next: Upload Photo',\n nextStepText: 'To make the report truly yours, the next step will invite you to provide a personal photo to generate your exclusive <span class=\"final-highlight\">\"Q-style avatar\"<\/span>.',\n reminder: 'Reminder',\n reminderText: 'As this is a deeply customized analysis, it takes about <span class=\"final-highlight\">15 minutes<\/span> to generate results after uploading. Good things are worth the wait.',\n goBack: '\u2190 Go back to edit answers',\n freeReport: 'Get Free Basic Report',\n paidHint: '( This is for paid customized reports only. Free version does not include personalized scene images )'\n },\n 'kr': { \/\/ \ud55c\uad6d\uc5b4\n loading: '\ud14c\uc2a4\ud2b8 \ub85c\ub529 \uc911...',\n questionLoading: '\uc9c8\ubb38 \ub85c\ub529 \uc911...',\n prevQuestion: '\uc774\uc804',\n tapToContinue: '\uc544\ubb34 \uacf3\uc774\ub098 \ud0ed\ud558\uc5ec \uacc4\uc18d',\n ready: '\uc900\ube44\ub410\uc5b4\uc694, \ub2e4\uc74c\uc73c\ub85c!',\n congrats: '\ucd95\ud558\ud569\ub2c8\ub2e4!',\n soulReport: '\u2500\u2500 \uc601\ud63c \ubcf4\uace0\uc11c\ub97c \ubc1b\uc744 \uc900\ube44\uac00 \ub410\uc5b4\uc694 \u2500\u2500',\n thanks: '\ub048\uae30\uc5d0 \uac10\uc0ac\ub4dc\ub824\uc694',\n thanksText: '\ub4dc\ub514\uc5b4 \uc5ec\uae30\uae4c\uc9c0 \uc654\uc5b4\uc694. \uc790\uc2e0\uacfc\uc758 \uc9c4\uc194\ud55c \ub300\ud654\ub97c \ud1b5\ud574 \uc774 \ud0d0\ud5d8\uc744 \uc644\ub8cc\ud574 \uc8fc\uc154\uc11c \uac10\uc0ac\ud569\ub2c8\ub2e4. \uc774 \ub048\uae30 \uc790\uccb4\uac00 \ud798\uc774\uc5d0\uc694.',\n nextStep: '\ub2e4\uc74c: \uc0ac\uc9c4 \uc5c5\ub85c\ub4dc',\n nextStepText: '\ubcf4\uace0\uc11c\ub97c \uc9c4\uc815\uc73c\ub85c \ub2f9\uc2e0\uc758 \uac83\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574, \ub2e4\uc74c \ub2e8\uacc4\uc5d0\uc11c \uac1c\uc778 \uc0ac\uc9c4\uc744 \uc81c\uacf5\ud558\uc5ec \uc804\uc6a9 <span class=\"final-highlight\">\"Q\ubc84\uc804 \uc544\ubc14\ud0c0\"<\/span>\ub97c \uc0dd\uc131\ud574\uc694.',\n reminder: '\uc54c\ub9bc',\n reminderText: '\uc2ec\uce35 \ub9de\ucda4 \ubd84\uc11d\uc774\ubbc0\ub85c \uc5c5\ub85c\ub4dc \ud6c4 \uacb0\uacfc \uc0dd\uc131\uc5d0 \uc57d <span class=\"final-highlight\">15\ubd84<\/span>\uc774 \uc18c\uc694\ub3fc\uc694. \uc88b\uc740 \uac83\uc740 \uae30\ub2e4\ub9b4 \uac00\uce58\uac00 \uc788\uc5b4\uc694.',\n goBack: '\u2190 \ub2f5\ubcc0 \uc218\uc815\ud558\ub7ec \ub3cc\uc544\uac00\uae30',\n freeReport: '\ubb34\ub8cc \uae30\ubcf8 \ubcf4\uace0\uc11c \ubc1b\uae30',\n paidHint: '( \uc720\ub8cc \ub9de\ucda4\ud615 \ubcf4\uace0\uc11c \uc804\uc6a9 \uacfc\uc815\uc785\ub2c8\ub2e4. \ubb34\ub8cc \ubc84\uc804\uc5d0\ub294 \ub9de\ucda4 \uc774\ubbf8\uc9c0\uac00 \ud3ec\ud568\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4 )'\n },\n 'jp': { \/\/ \u65e5\u672c\u8a9e\n loading: '\u30af\u30a4\u30ba\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n questionLoading: '\u8cea\u554f\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n prevQuestion: '\u524d\u3078',\n tapToContinue: '\u30bf\u30c3\u30d7\u3057\u3066\u7d9a\u3051\u308b',\n ready: '\u6e96\u5099\u5b8c\u4e86\u3001\u6b21\u3078\u9032\u3080\uff01',\n congrats: '\u304a\u3081\u3067\u3068\u3046\u3054\u3056\u3044\u307e\u3059\uff01',\n soulReport: '\u2500\u2500 \u9b42\u306e\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f \u2500\u2500',\n thanks: '\u3042\u306a\u305f\u306e\u5fcd\u8010\u306b\u611f\u8b1d',\n thanksText: '\u3064\u3044\u306b\u3053\u3053\u307e\u3067\u6765\u307e\u3057\u305f\u3002\u81ea\u5206\u81ea\u8eab\u3068\u306e\u6b63\u76f4\u306a\u5bfe\u8a71\u3092\u901a\u3058\u3066\u3001\u3053\u306e\u63a2\u6c42\u306e\u65c5\u3092\u5b8c\u4e86\u3057\u3066\u3044\u305f\u3060\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002\u3053\u306e\u5fcd\u8010\u529b\u81ea\u4f53\u304c\u529b\u3067\u3059\u3002',\n nextStep: '\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u5199\u771f\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9',\n nextStepText: '\u30ec\u30dd\u30fc\u30c8\u3092\u672c\u5f53\u306b\u3042\u306a\u305f\u306e\u3082\u306e\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u500b\u4eba\u306e\u5199\u771f\u3092\u63d0\u4f9b\u3057\u3066\u3001\u5c02\u7528\u306e<span class=\"final-highlight\">\u300cQ\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30d0\u30bf\u30fc\u300d<\/span>\u3092\u751f\u6210\u3057\u307e\u3059\u3002',\n reminder: '\u304a\u77e5\u3089\u305b',\n reminderText: '\u6df1\u3044\u30ab\u30b9\u30bf\u30e0\u5206\u6790\u306e\u305f\u3081\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u306e\u7d50\u679c\u751f\u6210\u306b\u306f\u7d04<span class=\"final-highlight\">15\u5206<\/span>\u304b\u304b\u308a\u307e\u3059\u3002\u826f\u3044\u3082\u306e\u306b\u306f\u5f85\u3064\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002',\n goBack: '\u2190 \u56de\u7b54\u3092\u7de8\u96c6\u3059\u308b',\n freeReport: '\u7121\u6599\u3067\u7c21\u6613\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b',\n paidHint: '( \u3053\u3061\u3089\u306f\u6709\u6599\u30ab\u30b9\u30bf\u30e0\u30ec\u30dd\u30fc\u30c8\u5c02\u7528\u3067\u3059\u3002\u7121\u6599\u7248\u306b\u306f\u5c02\u7528\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u306f\u542b\u307e\u308c\u307e\u305b\u3093 )'\n },\n 'th': { \/\/ \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\n loading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a...',\n questionLoading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...',\n prevQuestion: '\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32',\n tapToContinue: '\u0e41\u0e15\u0e30\u0e17\u0e35\u0e48\u0e43\u0e14\u0e01\u0e47\u0e44\u0e14\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d',\n ready: '\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e49\u0e27 \u0e44\u0e1b\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e19\u0e40\u0e25\u0e22!',\n congrats: '\u0e22\u0e34\u0e19\u0e14\u0e35\u0e14\u0e49\u0e27\u0e22!',\n soulReport: '\u2500\u2500 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e27\u0e34\u0e0d\u0e0d\u0e32\u0e13\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 \u2500\u2500',\n thanks: '\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n thanksText: '\u0e43\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e40\u0e23\u0e32\u0e01\u0e47\u0e21\u0e32\u0e16\u0e36\u0e07\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48\u0e41\u0e25\u0e49\u0e27 \u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e19\u0e17\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e08\u0e23\u0e34\u0e07\u0e43\u0e08\u0e01\u0e31\u0e1a\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e1e\u0e25\u0e31\u0e07\u0e43\u0e19\u0e15\u0e31\u0e27\u0e21\u0e31\u0e19\u0e40\u0e2d\u0e07',\n nextStep: '\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b: \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e',\n nextStepText: '\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e41\u0e17\u0e49\u0e08\u0e23\u0e34\u0e07 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e08\u0e30\u0e40\u0e0a\u0e34\u0e0d\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07<span class=\"final-highlight\">\"\u0e2d\u0e27\u0e32\u0e15\u0e32\u0e23\u0e4c Q\"<\/span>\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n reminder: '\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33',\n reminderText: '\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 <span class=\"final-highlight\">15 \u0e19\u0e32\u0e17\u0e35<\/span> \u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14 \u0e2a\u0e34\u0e48\u0e07\u0e14\u0e35\u0e46 \u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e41\u0e01\u0e48\u0e01\u0e32\u0e23\u0e23\u0e2d\u0e04\u0e2d\u0e22',\n goBack: '\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02\u0e04\u0e33\u0e15\u0e2d\u0e1a',\n freeReport: '\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\u0e1f\u0e23\u0e35',\n paidHint: '( \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e19\u0e35\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19 \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19\u0e1f\u0e23\u0e35\u0e44\u0e21\u0e48\u0e21\u0e35\u0e20\u0e32\u0e1e\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e1a\u0e38\u0e04\u0e04\u0e25 )'\n },\n 'vi': { \/\/ Ti\u1ebfng Vi\u1ec7t\n loading: '\u0110ang t\u1ea3i b\u00e0i ki\u1ec3m tra...',\n questionLoading: '\u0110ang t\u1ea3i c\u00e2u h\u1ecfi...',\n prevQuestion: 'Tr\u01b0\u1edbc',\n tapToContinue: 'Nh\u1ea5n b\u1ea5t k\u1ef3 \u0111\u00e2u \u0111\u1ec3 ti\u1ebfp t\u1ee5c',\n ready: 'T\u00f4i \u0111\u00e3 s\u1eb5n s\u00e0ng, ti\u1ebfp t\u1ee5c n\u00e0o!',\n congrats: 'Ch\u00fac m\u1eebng!',\n soulReport: '\u2500\u2500 S\u1eb5n s\u00e0ng nh\u1eadn b\u00e1o c\u00e1o t\u00e2m h\u1ed3n c\u1ee7a b\u1ea1n \u2500\u2500',\n thanks: 'C\u1ea3m \u01a1n s\u1ef1 ki\u00ean tr\u00ec c\u1ee7a b\u1ea1n',\n thanksText: 'Cu\u1ed1i c\u00f9ng, ch\u00fang ta \u0111\u00e3 \u0111\u1ebfn \u0111\u00e2y. C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 th\u00e0nh th\u1eadt \u0111\u1ed1i tho\u1ea1i v\u1edbi ch\u00ednh m\u00ecnh. S\u1ef1 ki\u00ean tr\u00ec n\u00e0y ch\u00ednh l\u00e0 s\u1ee9c m\u1ea1nh.',\n nextStep: 'B\u01b0\u1edbc ti\u1ebfp theo: T\u1ea3i \u1ea3nh l\u00ean',\n nextStepText: '\u0110\u1ec3 b\u00e1o c\u00e1o th\u1ef1c s\u1ef1 thu\u1ed9c v\u1ec1 b\u1ea1n, b\u01b0\u1edbc ti\u1ebfp theo s\u1ebd m\u1eddi b\u1ea1n cung c\u1ea5p \u1ea3nh c\u00e1 nh\u00e2n \u0111\u1ec3 t\u1ea1o <span class=\"final-highlight\">\"avatar Q\"<\/span> \u0111\u1ed9c quy\u1ec1n.',\n reminder: 'L\u01b0u \u00fd',\n reminderText: 'V\u00ec \u0111\u00e2y l\u00e0 ph\u00e2n t\u00edch t\u00f9y ch\u1ec9nh s\u00e2u, s\u1ebd m\u1ea5t kho\u1ea3ng <span class=\"final-highlight\">15 ph\u00fat<\/span> \u0111\u1ec3 t\u1ea1o k\u1ebft qu\u1ea3 sau khi t\u1ea3i l\u00ean. Nh\u1eefng \u0111i\u1ec1u t\u1ed1t \u0111\u1eb9p \u0111\u00e1ng \u0111\u1ec3 ch\u1edd \u0111\u1ee3i.',\n goBack: '\u2190 Quay l\u1ea1i ch\u1ec9nh s\u1eeda c\u00e2u tr\u1ea3 l\u1eddi',\n freeReport: 'Nh\u1eadn b\u00e1o c\u00e1o c\u01a1 b\u1ea3n mi\u1ec5n ph\u00ed',\n paidHint: '( \u0110\u00e2y l\u00e0 quy tr\u00ecnh d\u00e0nh cho b\u00e1o c\u00e1o t\u00f9y ch\u1ec9nh tr\u1ea3 ph\u00ed. B\u1ea3n mi\u1ec5n ph\u00ed kh\u00f4ng c\u00f3 h\u00ecnh \u1ea3nh c\u00e1 nh\u00e2n h\u00f3a )'\n },\n 'br': { \/\/ Portugu\u00eas\n loading: 'Carregando quiz...',\n questionLoading: 'Carregando pergunta...',\n prevQuestion: 'Anterior',\n tapToContinue: 'Toque em qualquer lugar para continuar',\n ready: 'Estou pronto, vamos l\u00e1!',\n congrats: 'Parab\u00e9ns!',\n soulReport: '\u2500\u2500 Pronto para receber seu relat\u00f3rio da alma \u2500\u2500',\n thanks: 'Obrigado pela sua perseveran\u00e7a',\n thanksText: 'Finalmente chegamos aqui. Obrigado por um di\u00e1logo t\u00e3o honesto consigo mesmo. Essa perseveran\u00e7a em si \u00e9 uma for\u00e7a.',\n nextStep: 'Pr\u00f3ximo: Enviar Foto',\n nextStepText: 'Para tornar o relat\u00f3rio verdadeiramente seu, o pr\u00f3ximo passo convidar\u00e1 voc\u00ea a fornecer uma foto pessoal para gerar seu <span class=\"final-highlight\">\"avatar Q\"<\/span> exclusivo.',\n reminder: 'Lembrete',\n reminderText: 'Como esta \u00e9 uma an\u00e1lise profundamente personalizada, levar\u00e1 cerca de <span class=\"final-highlight\">15 minutos<\/span> para gerar os resultados ap\u00f3s o upload. Coisas boas valem a espera.',\n goBack: '\u2190 Voltar para editar respostas',\n freeReport: 'Receba o Relat\u00f3rio B\u00e1sico Gr\u00e1tis',\n paidHint: '( Este \u00e9 o fluxo exclusivo do relat\u00f3rio personalizado pago. A vers\u00e3o gratuita n\u00e3o inclui imagens personalizadas )'\n },\n 'id': { \/\/ Bahasa Indonesia\n loading: 'Memuat kuis...',\n questionLoading: 'Memuat pertanyaan...',\n prevQuestion: 'Sebelumnya',\n tapToContinue: 'Ketuk di mana saja untuk melanjutkan',\n ready: 'Saya siap, ayo lanjut!',\n congrats: 'Selamat!',\n soulReport: '\u2500\u2500 Siap menerima laporan jiwa Anda \u2500\u2500',\n thanks: 'Terima kasih atas ketekunan Anda',\n thanksText: 'Akhirnya, kita sampai di sini. Terima kasih atas dialog yang jujur dengan diri sendiri. Ketekunan ini sendiri adalah kekuatan.',\n nextStep: 'Selanjutnya: Unggah Foto',\n nextStepText: 'Untuk membuat laporan benar-benar milik Anda, langkah selanjutnya akan mengundang Anda untuk memberikan foto pribadi untuk menghasilkan <span class=\"final-highlight\">\"avatar Q\"<\/span> eksklusif Anda.',\n reminder: 'Pengingat',\n reminderText: 'Karena ini adalah analisis yang sangat disesuaikan, butuh sekitar <span class=\"final-highlight\">15 menit<\/span> untuk menghasilkan hasil setelah mengunggah. Hal-hal baik layak ditunggu.',\n goBack: '\u2190 Kembali untuk mengedit jawaban',\n freeReport: 'Dapatkan Laporan Dasar Gratis',\n paidHint: '( Ini adalah alur khusus laporan kustom berbayar. Versi gratis tidak termasuk gambar personal )'\n }\n };\n\n \/\/ \u5075\u6e2c\u7576\u524d\u8a9e\u8a00\uff08\u5f9e URL \u8def\u5f91\u6216 ?lang= \u53c3\u6578\uff09\n function getCurrentLang() {\n \/\/ \ud83e\uddea \u6e2c\u8a66\u7528\uff1a\u512a\u5148\u8b80\u53d6 ?lang= \u53c3\u6578\n const urlParams = new URLSearchParams(window.location.search);\n const langParam = urlParams.get('lang');\n if (langParam && SUPPORTED_LANGS.includes(langParam)) {\n return langParam;\n }\n\n \/\/ \u6b63\u5f0f\u74b0\u5883\uff1a\u5f9e URL \u8def\u5f91\u5075\u6e2c\n const path = window.location.pathname;\n const firstSegment = path.split('\/').filter(s => s)[0] || '';\n return SUPPORTED_LANGS.includes(firstSegment) ? firstSegment : '';\n }\n\n \/\/ \u53d6\u5f97 UI \u7ffb\u8b6f\u6587\u5b57\n function t(key) {\n const translations = UI_TRANSLATIONS[currentLang] || UI_TRANSLATIONS[''];\n return translations[key] || UI_TRANSLATIONS[''][key] || key;\n }\n\n \/\/ \u53d6\u5f97\u591a\u8a9e\u8a00\u6b04\u4f4d\u503c\n function getLocalizedField(field, lang) {\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u7269\u4ef6\uff08\u591a\u8a9e\u8a00\u683c\u5f0f\uff1a{ \"\": \"...\", \"en\": \"...\", ... }\uff09\n if (typeof field === 'object' && field !== null && !Array.isArray(field)) {\n \/\/ \u512a\u5148\u53d6\u7576\u524d\u8a9e\u8a00\uff0c\u82e5\u7121\u5247\u53d6\u7e41\u4e2d\u7248\u672c\uff08\u7a7a\u5b57\u4e32 key\uff09\n return field[lang] !== undefined ? field[lang] : (field[''] || field);\n }\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u5b57\u4e32\uff08\u820a\u683c\u5f0f\uff09\uff0c\u76f4\u63a5\u8fd4\u56de\n return field;\n }\n\n \/\/ \u7576\u524d\u8a9e\u8a00\n const currentLang = getCurrentLang();\n console.log('\ud83c\udf10 \u7576\u524d\u8a9e\u8a00:', currentLang || '\u7e41\u9ad4\u4e2d\u6587 TW');\n\n \/\/ \u7528\u6236\u5730\u5340\uff08\u5f9e API \u53d6\u5f97\uff09\n let userArea = '';\n\n \/\/ \u5730\u5340 \u2192 \u8a9e\u8a00\u8def\u5f91\u5c0d\u61c9\u8868\n const areaToLangPath = {\n '\ud83c\uddf9\ud83c\uddfc Taiwan - \u7e41\u9ad4\u4e2d\u6587': '',\n '\ud83c\udded\ud83c\uddf0 Hong Kong - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\uddf2\ud83c\uddf4 Macau - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\udde8\ud83c\uddf3 China - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf8\ud83c\uddec Singapore - English': '\/en',\n '\ud83c\uddf8\ud83c\uddec Singapore - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - English': '\/en',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddec\ud83c\udde7 United Kingdom - English': '\/en',\n '\ud83c\uddea\ud83c\uddfa Europe (EU) - English': '\/en',\n '\ud83c\udf10 Global \/ Other - English': '\/en',\n '\ud83c\uddf0\ud83c\uddf7 South Korea - \ud55c\uad6d\uc5b4': '\/kr',\n '\ud83c\uddef\ud83c\uddf5 Japan - \u65e5\u672c\u8a9e': '\/jp',\n '\ud83c\udde7\ud83c\uddf7 Brazil - Portugu\u00eas': '\/br',\n '\ud83c\uddf9\ud83c\udded Thailand - \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22': '\/th',\n '\ud83c\uddfb\ud83c\uddf3 Vietnam - Ti\u1ebfng Vi\u1ec7t': '\/vi',\n '\ud83c\uddee\ud83c\udde9 Indonesia - Bahasa Indonesia': '\/id',\n '\ud83c\uddf5\ud83c\udded Philippines - English': '\/en',\n '\ud83c\udde6\ud83c\uddfa Australia - English': '\/en',\n };\n\n \/\/ \u6839\u64da\u5730\u5340\u53d6\u5f97\u8a9e\u8a00\u8def\u5f91\n function getLangPathByArea(area) {\n return areaToLangPath[area] || '';\n }\n\n \/\/ \ud83d\udd04 Loading \/ Error \u63a7\u5236\n function showLoading() {\n document.getElementById('loadingScreen').classList.remove('hidden');\n }\n function hideLoading() {\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n function showError(title, message) {\n document.getElementById('errorTitle').textContent = title;\n document.getElementById('errorMessage').textContent = message;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83c\udf89 \u986f\u793a\u5df2\u5b8c\u6210\u6e2c\u9a57\u8a0a\u606f\n function showCompletedMessage(code) {\n const resultUrl = `https:\/\/maybeits.me\/mbti-result\/?id=${encodeURIComponent(code)}`;\n document.getElementById('errorTitle').textContent = '\ud83c\udf89 \u4f60\u5df2\u5b8c\u6210\u6e2c\u9a57';\n document.getElementById('errorMessage').innerHTML = `\n \u4f60\u5df2\u6e2c\u5b8c MBTI \u6e2c\u9a57\uff0c\u4ee5\u4e0b\u662f\u4f60\u7684\u5831\u544a\u9023\u7d50\uff1a<br><br>\n <a href=\"${resultUrl}\" style=\"color: var(--accent-color); text-decoration: underline; word-break: break-all;\">${resultUrl}<\/a>\n `;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n async function fetchQuizByCode(code) {\n const url = `${API_QUIZ_BY_CODE}?code=${encodeURIComponent(code)}`;\n const res = await fetch(url);\n\n if (!res.ok) {\n const errorData = await res.json().catch(() => ({}));\n throw new Error(errorData.message || '\u8f09\u5165\u5931\u6557');\n }\n\n const data = await res.json();\n\n \/\/ \u4fdd\u5b58 _meta \u8cc7\u8a0a\n const meta = data._meta;\n\n \/\/ \u79fb\u9664 meta \u8cc7\u8a0a\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u6e2c\u9a57\u8cc7\u6599\n delete data._meta;\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n \/\/ \u5c07 _meta \u9644\u52a0\u5230\u6e2c\u9a57\u8cc7\u6599\u4e0a\n const quizData = records[0];\n quizData._meta = meta;\n\n return quizData;\n }\n\n \/\/ \ud83d\udce1 API 1: \u67e5\u8a62\u4ee3\u78bc\u5c0d\u61c9\u7684\u89d2\u8272\uff08\u5099\u7528\uff09\n async function fetchCodeData(code) {\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/5&where=1005241,eq,${encodeURIComponent(code)}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u7db2\u8def\u9023\u7dda\u7570\u5e38');\n const data = await res.json();\n\n \/\/ \u79fb\u9664 _debug \u6b04\u4f4d\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u8cc7\u6599\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u4ee3\u78bc\u7121\u6548\u6216\u5df2\u904e\u671f');\n\n return records[0];\n }\n\n \/\/ \ud83d\udce1 API 2: \u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\uff08\u5099\u7528\uff09\n async function fetchQuizRawData(role) {\n const pathSuffix = roleToPath[role];\n if (!pathSuffix) throw new Error('\u89d2\u8272\u4ee3\u78bc\u7121\u6548');\n\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/11${pathSuffix}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u8f09\u5165\u6e2c\u9a57\u8cc7\u6599\u5931\u6557');\n const data = await res.json();\n\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n return records[0];\n }\n\n \/\/ \ud83d\udd27 \u89e3\u6790 JSON \u6b04\u4f4d\uff0c\u5efa\u7acb\u984c\u5eab\n function buildQuizFromAPI(rawData) {\n \/\/ \ud83c\udf10 \u89e3\u6790\u591a\u8a9e\u8a00 JSON\uff08\u6b04\u4f4d\u662f JSON \u5b57\u4e32\uff0c\u88e1\u9762\u5305\u542b\u591a\u8a9e\u8a00\u7d50\u69cb\uff09\n let quizConfig;\n try {\n \/\/ \u5148\u89e3\u6790 JSON \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedJSON = JSON.parse(rawData.JSON);\n \/\/ \u5982\u679c\u662f\u591a\u8a9e\u8a00\u7d50\u69cb\uff08\u7269\u4ef6 with \u8a9e\u8a00 key\uff09\uff0c\u53d6\u5f97\u5c0d\u61c9\u8a9e\u8a00\n if (typeof parsedJSON === 'object' && parsedJSON !== null && !Array.isArray(parsedJSON)) {\n \/\/ \u6aa2\u67e5\u662f\u5426\u6709\u8a9e\u8a00 key\uff08\u5982 \"\"\u3001\"en\"\u3001\"jp\" \u7b49\uff09\n const hasLangKeys = Object.keys(parsedJSON).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n quizConfig = parsedJSON[currentLang] || parsedJSON[''] || parsedJSON;\n console.log('\ud83c\udf10 \u5df2\u8f09\u5165\u8a9e\u8a00\u7248\u672c\u7684\u6e2c\u9a57\u914d\u7f6e:', currentLang || '\u7e41\u4e2d');\n } else {\n \/\/ \u820a\u683c\u5f0f\uff08\u76f4\u63a5\u662f\u984c\u76ee\u914d\u7f6e\uff09\n quizConfig = parsedJSON;\n console.log('\ud83d\udccb \u5df2\u8f09\u5165\u6e2c\u9a57\u914d\u7f6e\uff08\u55ae\u8a9e\u8a00\u683c\u5f0f\uff09');\n }\n } else {\n quizConfig = parsedJSON;\n }\n } catch (e) {\n console.error('\u274c \u89e3\u6790 JSON \u6b04\u4f4d\u5931\u6557:', e);\n return;\n }\n\n \/\/ \ud83c\udfaf \u5132\u5b58\u300c5\u985e\u578b\u6587\u6848\u300d\u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u4f7f\u7528\uff09\n if (rawData['5\u985e\u578b\u6587\u6848']) {\n try {\n \/\/ \u5148\u89e3\u6790 5\u985e\u578b\u6587\u6848 \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedPaywall = JSON.parse(rawData['5\u985e\u578b\u6587\u6848']);\n let localizedPaywall;\n \/\/ \u6aa2\u67e5\u662f\u5426\u70ba\u591a\u8a9e\u8a00\u7d50\u69cb\n if (typeof parsedPaywall === 'object' && parsedPaywall !== null && !Array.isArray(parsedPaywall)) {\n const hasLangKeys = Object.keys(parsedPaywall).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n localizedPaywall = parsedPaywall[currentLang] || parsedPaywall[''] || parsedPaywall;\n } else {\n localizedPaywall = parsedPaywall;\n }\n } else {\n localizedPaywall = parsedPaywall;\n }\n \/\/ \u5132\u5b58\u70ba JSON \u5b57\u4e32\n sessionStorage.setItem('quiz_paywall_copies', JSON.stringify(localizedPaywall));\n console.log('\u2705 \u5df2\u5132\u5b58 5\u985e\u578b\u6587\u6848\u5230 sessionStorage\uff08\u8a9e\u8a00:', currentLang || '\u7e41\u4e2d', '\uff09');\n } catch (e) {\n console.error('\u274c \u89e3\u6790 5\u985e\u578b\u6587\u6848 \u5931\u6557:', e);\n }\n } else {\n console.warn('\u26a0\ufe0f rawData \u4e2d\u6c92\u6709\u300c5\u985e\u578b\u6587\u6848\u300d\u6b04\u4f4d');\n console.log('rawData \u7684\u6240\u6709 key:', Object.keys(rawData));\n }\n\n \/\/ \u5efa\u7acb\u5716\u7247\u4f86\u6e90\u5c0d\u7167\u8868\n imageSources = {};\n for (let i = 1; i <= 93; i++) {\n const keyA = `${i}-0`, keyB = `${i}-1`;\n if (rawData[`${keyA}-img`]) imageSources[keyA] = rawData[`${keyA}-img`];\n if (rawData[`${keyB}-img`]) imageSources[keyB] = rawData[`${keyB}-img`];\n }\n imageSources[\"default\"] = \"https:\/\/images.unsplash.com\/photo-1534447677768-be436bb09401?w=800&q=80\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u8cc7\u8a0a\u8207\u904e\u5834\n const chapterMap = {};\n transitions = {};\n let questionIndex = 1;\n\n for (let i = 1; i <= 93; i++) {\n const config = quizConfig[String(i)];\n if (!config) continue;\n\n const chapterName = config[\"\u4e3b\u984c\u5206\u985e\"] || \"\u672a\u5206\u985e\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u7bc4\u570d\n if (!chapterMap[chapterName]) {\n chapterMap[chapterName] = { name: chapterName, start: questionIndex, end: questionIndex };\n } else {\n chapterMap[chapterName].end = questionIndex;\n }\n\n \/\/ \u6536\u96c6\u904e\u5834\u6587\u5b57\n let rawTransText = config[\"\u904e\u5834\u6587\u5b57\"];\n \/\/ \u652f\u63f4\u9663\u5217\u683c\u5f0f\uff08\u6bcf\u884c\u4e00\u500b\u5143\u7d20\uff09\u6216\u5b57\u4e32\u683c\u5f0f\n if (Array.isArray(rawTransText)) {\n rawTransText = rawTransText.join('\\n');\n }\n if (rawTransText && rawTransText.trim()) {\n const text = rawTransText.trim();\n\n \/\/ \u512a\u5148\u4f7f\u7528 JSON \u4e2d\u6307\u5b9a\u7684\u300c\u904e\u5834\u985e\u578b\u300d\uff0c\u5426\u5247\u81ea\u52d5\u5224\u65b7\n let transType = 'minor';\n if (config[\"\u904e\u5834\u985e\u578b\"]) {\n \/\/ JSON \u4e2d\u6709\u660e\u78ba\u6307\u5b9a major\/minor\n transType = config[\"\u904e\u5834\u985e\u578b\"].toLowerCase().trim();\n } else {\n \/\/ \u81ea\u52d5\u5224\u65b7\uff1a\u542b\u300c\u3010\u300d\u6216\u8d85\u904e 3 \u884c = major\n const isMajor = text.includes(\"\u3010\") || text.split('\\n').length > 3;\n transType = isMajor ? 'major' : 'minor';\n }\n\n transitions[questionIndex] = {\n type: transType,\n text: text\n };\n }\n\n questionIndex++;\n }\n\n \/\/ \u52a0\u5165\u6700\u7d42\u904e\u5834\n transitions[94] = { type: 'final' };\n\n \/\/ \u5efa\u7acb chapterRanges\uff08\u52a0\u5165\u984f\u8272\uff09\n chapterRanges = Object.values(chapterMap).map(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n return { ...ch, colors: style.colors };\n });\n\n \/\/ \u5efa\u7acb fireworkColors\n fireworkColors = {};\n chapterRanges.forEach(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n fireworkColors[ch.start] = { hues: style.fireworkHues, name: ch.name };\n });\n\n \/\/ \u5efa\u7acb quizData \u9663\u5217\n quizData = [];\n for (let i = 1; i <= 94; i++) {\n const config = quizConfig[String(i)];\n let ch = chapterRanges.find(r => i >= r.start && i <= r.end);\n if (!ch) ch = { name: \"\u6700\u7d42\u7ae0\", start: 94, end: 94, colors: [\"#000\",\"#111\",\"#222\",\"#333\",\"#444\"] };\n\n const trans = transitions[i];\n\n \/\/ \u53d6\u5f97\u9078\u9805\u5c0d\u61c9\u7684 key\n let optKeyA = `${i}-0`, optKeyB = `${i}-1`;\n let questionText = `Question ${i}`;\n let textA = \"\u9078\u9805 A\", textB = \"\u9078\u9805 B\";\n\n if (config) {\n optKeyA = config[\"\u9078\u9805A\"] || optKeyA;\n optKeyB = config[\"\u9078\u9805B\"] || optKeyB;\n\n \/\/ \u5f9e rawData \u53d6\u5f97\u984c\u76ee\u548c\u9078\u9805\u6587\u5b57\n const qKey = `Q${optKeyA.split('-')[0]}`;\n questionText = rawData[qKey] || questionText;\n textA = rawData[optKeyA] || textA;\n textB = rawData[optKeyB] || textB;\n }\n\n quizData.push({\n id: i,\n chapter: ch.name,\n chapterStart: ch.start,\n chapterEnd: ch.end,\n bgColors: ch.colors,\n transition: trans,\n questionText: questionText,\n textA: textA,\n textB: textB,\n optionsA: optKeyA,\n optionsB: optKeyB,\n indicator: config ? config[\"\u6307\u6a19\"] : null \/\/ J\/P \u8a08\u5206\u7528\n });\n }\n }\n\n \/\/ \ud83d\ude80 \u4e3b\u8981\u521d\u59cb\u5316\u6d41\u7a0b\uff08\u4f7f\u7528\u5408\u4f75 API\uff09\n async function initQuiz() {\n const urlParams = new URLSearchParams(window.location.search);\n let id = urlParams.get('id');\n\n \/\/ \u5982\u679c URL \u6c92\u6709 id\uff0c\u5617\u8a66\u5f9e sessionStorage \u8b80\u53d6\uff08\u5f9e\u5c0e\u8cfc\u9801\u56de\u4f86\u7684\u60c5\u6cc1\uff09\n if (!id) {\n id = sessionStorage.getItem('quiz_user_id');\n }\n\n if (!id) {\n showError('\u8acb\u78ba\u8a8d\u6e2c\u9a57\u5c08\u5c6c\u9023\u7d50\u662f\u5426\u6b63\u78ba', '\u627e\u4e0d\u5230\u4f60\u7684\u6e2c\u9a57\u4ee3\u78bc ...');\n return;\n }\n\n \/\/ \u5132\u5b58 id \u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u56de\u4f86\u6642\u4f7f\u7528\uff09\n sessionStorage.setItem('quiz_user_id', id);\n\n try {\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n const quizRawData = await fetchQuizByCode(id);\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u5b8c\u6210\u6e2c\u9a57\n if (quizRawData._meta && quizRawData._meta.completed === 'Yes') {\n showCompletedMessage(id);\n return;\n }\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n if (quizRawData._meta && quizRawData._meta.purchased === 'Yes') {\n hasPurchased = true;\n }\n\n \/\/ \ud83c\udf0d \u4fdd\u5b58\u7528\u6236\u5730\u5340\uff08\u7528\u65bc\u8df3\u8f49\uff09\n if (quizRawData._meta && quizRawData._meta.area) {\n userArea = quizRawData._meta.area;\n console.log('\u7528\u6236\u5730\u5340:', userArea);\n }\n\n \/\/ \u89e3\u6790\u4e26\u5efa\u7acb\u984c\u5eab\n buildQuizFromAPI(quizRawData);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u524d 5 \u984c\u5716\u7247\n preloadUpcoming(-1, 5);\n\n \/\/ \u96b1\u85cf Loading\uff0c\u555f\u52d5\u6e2c\u9a57\n hideLoading();\n init();\n\n } catch (error) {\n console.error('\u521d\u59cb\u5316\u5931\u6557:', error);\n showError('\u8f09\u5165\u5931\u6557', error.message || '\u8acb\u7a0d\u5f8c\u518d\u8a66');\n }\n }\n\n \/\/ \u5716\u7247\u53d6\u5f97\u51fd\u6578\n function getImgUrl(key) { return imageSources[key] || imageSources[\"default\"]; }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\ude80 \u5716\u7247\u9810\u8f09\u5165\u512a\u5316\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n const preloadedImages = new Set();\n\n \/\/ \u9810\u8f09\u5165\u55ae\u5f35\u5716\u7247\n function preloadImage(url) {\n if (!url || preloadedImages.has(url)) return;\n const img = new Image();\n img.src = url;\n preloadedImages.add(url);\n }\n\n \/\/ \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 N \u984c\u7684\u5716\u7247\n function preloadUpcoming(startIdx, count = 3) {\n for (let i = 1; i <= count; i++) {\n const nextIdx = startIdx + i;\n if (nextIdx >= quizData.length) break;\n\n const nextQ = quizData[nextIdx];\n if (nextQ) {\n preloadImage(getImgUrl(nextQ.optionsA));\n preloadImage(getImgUrl(nextQ.optionsB));\n }\n }\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udfaf Paywall \u52d5\u614b\u6587\u6848\uff1a\u5132\u5b58 Q1-Q10 \u7b54\u6848\u8207\u6307\u6a19\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n function saveQuizDataForPaywall() {\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u7b54\u6848\uff08\"A\" \u6216 \"B\"\uff09\n const first10Answers = [];\n for (let i = 0; i < 10; i++) {\n const qId = quizData[i].id;\n const answerKey = `q${qId}`;\n const answerVal = answers[answerKey]; \/\/ \"A\" \u6216 \"B\"\n first10Answers.push(answerVal || null);\n }\n\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u6307\u6a19\uff08\"J=A\" \u6216 \"J=B\"\uff09\n const first10Indicators = quizData.slice(0, 10).map(q => q.indicator);\n\n \/\/ \u5132\u5b58\u5230 sessionStorage\n sessionStorage.setItem('quiz_answers_10', JSON.stringify(first10Answers));\n sessionStorage.setItem('quiz_indicators_10', JSON.stringify(first10Indicators));\n\n \/\/ \u9664\u932f\u8f38\u51fa\n console.log('\ud83c\udfaf saveQuizDataForPaywall \u57f7\u884c');\n console.log('answers \u7269\u4ef6:', answers);\n console.log('first10Answers:', first10Answers);\n console.log('first10Indicators:', first10Indicators);\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \u4ee5\u4e0b\u70ba\u539f\u6709\u6e2c\u9a57\u908f\u8f2f\uff08\u8cc7\u6599\u5df2\u6539\u70ba\u52d5\u614b\u8f09\u5165\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n let currentIdx = 0;\n let isTransitioning = false;\n let transitionTimer = null, typeTimer = null;\n let currentFireworkHues = [30, 40, 50]; \/\/ \u9810\u8a2d\u6696\u8272\n let hasPurchased = false; \/\/ \u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n const answers = {};\n\n const dom = {\n box: document.getElementById('questionBox'),\n counter: document.getElementById('questionCounter'),\n badge: document.getElementById('chapterBadge'),\n qTitle: document.getElementById('qTitle'),\n imgA: document.getElementById('imgA'), imgB: document.getElementById('imgB'),\n textA: document.getElementById('textA'), textB: document.getElementById('textB'),\n progressBar: document.getElementById('progressBar'),\n prevBtn: document.getElementById('prevBtn'),\n mobileBackBtn: document.getElementById('mobileBackBtn'),\n transitionLayer: document.getElementById('transitionLayer'),\n transText: document.getElementById('transText'),\n transChapter: document.getElementById('transChapter'),\n fireworksCanvas: document.getElementById('fireworksCanvas'),\n desktopMinorText: document.getElementById('desktopMinorText'),\n tapHint: document.getElementById('tapHint'),\n finalBtn: document.getElementById('finalBtn'),\n bgWrapper: document.getElementById('bgWrapper'),\n balloonContainer: document.getElementById('balloonContainer'),\n questionArea: document.getElementById('questionArea'),\n iframeOverlay: document.getElementById('iframeOverlay'),\n embeddedFrame: document.getElementById('embeddedFrame')\n };\n\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316 HTML \u975c\u614b\u6587\u5b57\u7684\u591a\u8a9e\u8a00\u7ffb\u8b6f\n function initUITranslations() {\n \/\/ Loading \u756b\u9762\n const loadingText = document.querySelector('.loading-text');\n if (loadingText) loadingText.textContent = t('loading');\n\n \/\/ iframe \u8f09\u5165\u4e2d\n const iframeLoaderText = document.querySelector('.iframe-loader-text');\n if (iframeLoaderText) iframeLoaderText.textContent = t('loading');\n\n \/\/ \u984c\u76ee\u8f09\u5165\u4e2d\n const qTitle = document.getElementById('qTitle');\n if (qTitle && qTitle.textContent.includes('\u8f09\u5165')) {\n qTitle.textContent = t('questionLoading');\n }\n\n \/\/ \u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c\n if (dom.tapHint) dom.tapHint.textContent = t('tapToContinue');\n\n \/\/ \u6211\u6e96\u5099\u597d\u4e86\u6309\u9215\n if (dom.finalBtn) dom.finalBtn.textContent = t('ready');\n\n \/\/ \u4e0a\u4e00\u984c\u6309\u9215\n const prevBtn = document.getElementById('prevBtn');\n if (prevBtn) {\n prevBtn.innerHTML = `<span>\u2190<\/span> ${t('prevQuestion')}`;\n }\n\n console.log('\ud83c\udf10 UI \u7ffb\u8b6f\u521d\u59cb\u5316\u5b8c\u6210');\n }\n\n function init() {\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316\u591a\u8a9e\u8a00 UI \u6587\u5b57\n initUITranslations();\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u8b80\u53d6\u8a72\u7528\u6236\u7684\u9032\u5ea6\n const userId = sessionStorage.getItem('quiz_user_id');\n if (userId) {\n const savedProgress = localStorage.getItem(`soul_quiz_progress_${userId}`);\n if (savedProgress) {\n const parsed = JSON.parse(savedProgress);\n if (parsed.idx >= 94) {\n \/\/ idx 94 = \u8d85\u51fa\u7bc4\u570d\uff08Q1-Q93 + final \u5171 94 \u7b46\uff0cidx 0-93\uff09\n localStorage.removeItem(`soul_quiz_progress_${userId}`);\n localStorage.removeItem(`soul_quiz_answer_keys_${userId}`);\n currentIdx = 0;\n } else {\n currentIdx = parsed.idx;\n Object.assign(answers, parsed.answers); \/\/ \u4e00\u5b9a\u8981\u9084\u539f answers\n saveProgress(); \/\/ \u540c\u6b65\u66f4\u65b0 answer_keys\n }\n }\n }\n\n checkTransitionAndLoad();\n }\n\n function saveProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return; \/\/ \u6c92\u6709 userId \u5c31\u4e0d\u5132\u5b58\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u5132\u5b58\u9032\u5ea6\uff08\u4e0d\u540c\u7528\u6236\u7368\u7acb\u5132\u5b58\uff09\n localStorage.setItem(`soul_quiz_progress_${userId}`, JSON.stringify({ idx: currentIdx, answers: answers }));\n\n \/\/ \u5132\u5b58\u9078\u9805 key\uff08\u4f9b n8n \u4f7f\u7528\uff09\n const answerKeys = {};\n for (const q of quizData) {\n const answerVal = answers[`q${q.id}`];\n if (answerVal) {\n answerKeys[q.id] = answerVal === 'A' ? q.optionsA : q.optionsB;\n }\n }\n localStorage.setItem(`soul_quiz_answer_keys_${userId}`, JSON.stringify(answerKeys));\n }\n\n \/\/ \ud83d\udce6 \u7d44\u6210\u7b54\u6848\u5b57\u4e32\uff08\u4f9b n8n POST\uff09- \u4f9d\u7167 key \u524d\u7db4\u6578\u5b57\u6392\u5e8f\n function generateAnswerString() {\n const userId = sessionStorage.getItem('quiz_user_id');\n const answerKeys = JSON.parse(localStorage.getItem(`soul_quiz_answer_keys_${userId}`) || '{}');\n const parts = [];\n for (let i = 1; i <= 93; i++) {\n if (answerKeys[i]) {\n parts.push(answerKeys[i]);\n }\n }\n \/\/ \u4f9d\u7167 key \u7684\u6578\u5b57\u524d\u7db4\u6392\u5e8f\uff08\u5982 \"1-1\" \u2192 1, \"9-0\" \u2192 9, \"11-1\" \u2192 11\uff09\n parts.sort((a, b) => {\n const numA = parseInt(a.split('-')[0], 10);\n const numB = parseInt(b.split('-')[0], 10);\n return numA - numB;\n });\n return parts.join(',');\n }\n\n function updateBackground(colors) {\n if(!colors) return;\n const root = document.documentElement;\n root.style.setProperty('--bg-grad-1', colors[0]);\n root.style.setProperty('--bg-grad-2', colors[1]);\n root.style.setProperty('--bg-grad-3', colors[2]);\n root.style.setProperty('--bg-grad-4', colors[3]);\n root.style.setProperty('--bg-grad-5', colors[4]);\n }\n\n function checkTransitionAndLoad() {\n const data = quizData[currentIdx];\n updateBackground(data.bgColors);\n\n const showBack = (currentIdx > 0);\n dom.prevBtn.classList.toggle('hidden', !showBack);\n dom.mobileBackBtn.style.display = showBack ? 'inline-block' : 'none';\n\n if (data.transition) {\n const isMobile = window.innerWidth <= 900;\n if (data.id === 94) {\n runFinalTransition(data);\n }\n else if (data.transition.type === 'major' || (data.transition.type === 'minor' && isMobile)) {\n runFullScreenTransition(data);\n } else {\n runDesktopMinorTransition(data);\n }\n } else {\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n }\n }\n\n \/\/ \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801\n function runFinalTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.add('active');\n dom.transitionLayer.classList.add('final-mode');\n \n dom.fireworksCanvas.style.display = 'none';\n dom.tapHint.style.display = 'none';\n dom.transitionLayer.style.cursor = 'default';\n \n \/\/ \u5275\u5efa\u6c23\u7403\u8207\u661f\u661f\n createBalloons();\n createFinalStars();\n\n \/\/ \ud83c\udf10 \u4f7f\u7528\u591a\u8a9e\u8a00\u7ffb\u8b6f\n const userId = sessionStorage.getItem('quiz_user_id');\n\n const htmlContent = `\n <div class=\"final-badge\">\n <img decoding=\"async\" src=\"https:\/\/maybeits.me\/wp-content\/uploads\/2025\/11\/LOGO-.png\" alt=\"Logo\">\n <\/div>\n <div class=\"final-title\">${t('congrats')}<\/div>\n <div class=\"final-subtitle\">${t('soulReport')}<\/div>\n\n <div class=\"final-card\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon thanks\">\ud83d\ude4f<\/div>\n <div class=\"final-card-title\">${t('thanks')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('thanksText')}\n <\/div>\n <\/div>\n\n ${!hasPurchased ? `\n <div style=\"text-align: center; margin: 10px 0 8px 0; padding: 12px 0;\">\n <button class=\"final-simple-btn\" onclick=\"goToSimpleReport()\">${t('freeReport')}<\/button>\n <\/div>\n ` : ''}\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon photo\">\ud83d\udcf8<\/div>\n <div class=\"final-card-title\">${t('nextStep')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('nextStepText')}\n <\/div>\n <\/div>\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon time\">\u23f0<\/div>\n <div class=\"final-card-title\">${t('reminder')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('reminderText')}\n <\/div>\n <\/div>\n\n <button class=\"final-back-btn\" onclick=\"goBackFromFinal()\">${t('goBack')}<\/button>\n `;\n dom.transText.innerHTML = htmlContent;\n\n setTimeout(() => { dom.transText.classList.add('fade-in'); }, 100);\n setTimeout(() => {\n dom.finalBtn.classList.add('show');\n\n \/\/ \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u4e3b\u6309\u9215\u7070\u8272\u7981\u7528 + \u5e95\u90e8\u986f\u793a\u4ed8\u8cbb\u63d0\u793a\n if (!hasPurchased) {\n dom.finalBtn.classList.add('disabled');\n \/\/ \u5728\u6309\u9215\u4e0b\u65b9\u63d2\u5165\u63d0\u793a\u6587\u5b57\n if (!document.getElementById('finalUnlockHint')) {\n const hint = document.createElement('div');\n hint.id = 'finalUnlockHint';\n hint.className = 'final-unlock-hint show';\n hint.textContent = t('paidHint');\n dom.finalBtn.parentNode.insertBefore(hint, dom.finalBtn.nextSibling);\n }\n }\n }, 1200);\n }\n\n \/\/ \ud83d\udd25 \u5275\u5efa\u591a\u7a2e\u9020\u578b\u6c23\u7403\n function createBalloons() {\n const container = dom.balloonContainer;\n container.innerHTML = '';\n container.style.display = 'block';\n\n const balloonTypes = ['round', 'heart', 'donut', 'star'];\n const balloonColors = ['color-pink', 'color-blue', 'color-peach', 'color-lavender', 'color-mint', 'color-cream', 'color-coral', 'color-gold'];\n const positions = [3, 10, 20, 32, 45, 58, 70, 82, 90, 95];\n\n for (let i = 0; i < 12; i++) {\n const balloon = document.createElement('div');\n const type = balloonTypes[i % balloonTypes.length];\n const color = balloonColors[i % balloonColors.length];\n\n balloon.className = `balloon-base balloon-${type} ${color}`;\n balloon.style.left = positions[i % positions.length] + '%';\n balloon.style.setProperty('--duration', (11 + Math.random() * 6) + 's');\n balloon.style.setProperty('--delay', (i * 0.7) + 's');\n\n \/\/ \u6839\u64da\u985e\u578b\u6dfb\u52a0\u5167\u90e8\u5143\u7d20\n if (type === 'round') {\n const shine = document.createElement('div');\n shine.className = 'shine';\n balloon.appendChild(shine);\n } else if (type === 'heart') {\n const string = document.createElement('div');\n string.className = 'string';\n balloon.appendChild(string);\n } else if (type === 'donut') {\n const sprinkles = document.createElement('div');\n sprinkles.className = 'sprinkles';\n balloon.appendChild(sprinkles);\n }\n\n container.appendChild(balloon);\n }\n }\n\n \/\/ \u2728 \u5275\u5efa\u9583\u720d\u661f\u661f\n function createFinalStars() {\n \/\/ \u79fb\u9664\u820a\u7684\u661f\u661f\u5bb9\u5668\n const oldStars = document.querySelector('.final-stars');\n if (oldStars) oldStars.remove();\n\n const container = document.createElement('div');\n container.className = 'final-stars';\n dom.transitionLayer.appendChild(container);\n\n for (let i = 0; i < 25; i++) {\n const star = document.createElement('div');\n star.className = 'final-star';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.animationDelay = Math.random() * 2 + 's';\n star.style.animationDuration = (1.5 + Math.random()) + 's';\n container.appendChild(star);\n }\n }\n\n function runFullScreenTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.remove('final-mode');\n dom.transitionLayer.classList.add('active');\n dom.balloonContainer.style.display = 'none';\n \n dom.fireworksCanvas.style.display = 'block';\n dom.transChapter.innerText = `CHAPTER: ${data.chapter}`;\n dom.tapHint.style.display = 'block';\n dom.transitionLayer.style.cursor = 'pointer';\n \n dom.transText.innerText = \"\";\n \n \/\/ \ud83d\udd25 \u8a2d\u7f6e\u8a72\u7ae0\u7bc0\u7684\u7159\u706b\u984f\u8272\n if (fireworkColors[data.id]) {\n currentFireworkHues = fireworkColors[data.id].hues;\n }\n \n if (data.transition.type === 'major') startFireworks();\n\n const duration = (data.transition.type === 'major') ? 15000 : 10000;\n \n typeWriterEffect(data.transition.text, dom.transText, duration, () => {\n stopFireworks();\n dom.transitionLayer.classList.remove('active');\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n });\n }\n\n function runDesktopMinorTransition(data) {\n dom.questionArea.classList.add('has-transition');\n dom.desktopMinorText.innerText = \"\";\n dom.desktopMinorText.classList.add('active'); \n setTimeout(() => { dom.desktopMinorText.classList.add('show'); }, 10);\n typeWriterEffect(data.transition.text, dom.desktopMinorText, 0, null, 55);\n renderQuestion(data); \n }\n\n function typeWriterEffect(text, element, waitTime, callback, baseSpeed = 60) {\n let i = 0;\n \/\/ \ud83d\udd25 \u6839\u64da\u6587\u5b57\u9577\u5ea6\u52d5\u614b\u8abf\u6574\u901f\u5ea6\uff08\u6587\u5b57\u8d8a\u9577\u901f\u5ea6\u8d8a\u5feb\uff09\n \/\/ \u624b\u6a5f\u7248\u984d\u5916\u52a0\u901f\n const isMobile = window.innerWidth <= 900;\n const textLen = text.length;\n let speed = baseSpeed;\n\n if (textLen > 150) {\n speed = isMobile ? 15 : 25; \/\/ \u8d85\u9577\u6587\u5b57\uff1a\u6975\u5feb\n } else if (textLen > 100) {\n speed = isMobile ? 20 : 30; \/\/ \u9577\u6587\u5b57\uff1a\u5f88\u5feb\n } else if (textLen > 60) {\n speed = isMobile ? 30 : 40; \/\/ \u4e2d\u7b49\u6587\u5b57\uff1a\u8f03\u5feb\n } else {\n speed = isMobile ? 40 : baseSpeed; \/\/ \u77ed\u6587\u5b57\uff1a\u6b63\u5e38\u901f\u5ea6\n }\n\n function type() {\n if (!isTransitioning && waitTime > 0) return;\n if (i < text.length) {\n element.innerText += text.charAt(i);\n i++;\n typeTimer = setTimeout(type, speed);\n } else {\n if (waitTime > 0) {\n transitionTimer = setTimeout(() => { endTransition(callback); }, waitTime);\n } else if (callback) { callback(); }\n }\n }\n type();\n if (waitTime > 0) dom.transitionLayer.onclick = () => endTransition(callback);\n else dom.transitionLayer.onclick = null;\n }\n\n function endTransition(callback) {\n if (!isTransitioning) return;\n isTransitioning = false;\n clearTimeout(typeTimer); clearTimeout(transitionTimer);\n dom.transitionLayer.onclick = null;\n if (callback) callback();\n }\n\n function adjustTextSize(text) {\n const len = text.length;\n let size = '28px'; \n if (window.innerWidth <= 900) {\n if (len > 35) size = '16px';\n else if (len > 25) size = '18px';\n else if (len > 15) size = '20px';\n else size = '22px';\n } else {\n if (len > 40) size = '20px';\n else if (len > 30) size = '24px';\n }\n dom.qTitle.style.fontSize = size;\n }\n\n function renderQuestion(data) {\n updateBackground(data.bgColors);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 3 \u984c\u7684\u5716\u7247\n preloadUpcoming(currentIdx, 3);\n\n dom.box.classList.add('hidden');\n setTimeout(() => {\n dom.badge.innerText = data.chapter;\n const totalInChapter = data.chapterEnd - data.chapterStart + 1;\n const currentInChapter = data.id - data.chapterStart + 1;\n dom.counter.innerText = `${currentInChapter}\/${totalInChapter}`;\n const pct = Math.round((currentInChapter \/ totalInChapter) * 100);\n dom.progressBar.style.width = `${pct}%`;\n dom.qTitle.innerText = data.questionText;\n adjustTextSize(data.questionText);\n dom.imgA.src = getImgUrl(data.optionsA); \n dom.imgB.src = getImgUrl(data.optionsB);\n dom.textA.innerText = data.textA;\n dom.textB.innerText = data.textB;\n dom.box.classList.remove('hidden');\n }, 300);\n }\n\n function openEmbeddedPage(url) {\n const loader = document.getElementById('iframeLoader');\n \/\/ \u91cd\u7f6e\u72c0\u614b\n loader.classList.remove('hidden');\n dom.embeddedFrame.classList.remove('loaded');\n \/\/ \u986f\u793a overlay\n dom.iframeOverlay.classList.add('active');\n \/\/ \u76e3\u807d iframe \u8f09\u5165\u5b8c\u6210\n dom.embeddedFrame.onload = function() {\n \/\/ \u96b1\u85cf loading\uff0c\u986f\u793a iframe\n loader.classList.add('hidden');\n dom.embeddedFrame.classList.add('loaded');\n };\n \/\/ \u5ef6\u9072\u8a2d\u7f6e src \u78ba\u4fdd DOM \u5df2\u66f4\u65b0\n setTimeout(() => {\n dom.embeddedFrame.src = url;\n }, 100);\n }\n\n function closeEmbeddedPage() {\n const loader = document.getElementById('iframeLoader');\n dom.iframeOverlay.classList.remove('active');\n dom.embeddedFrame.classList.remove('loaded');\n loader.classList.remove('hidden');\n dom.embeddedFrame.src = 'about:blank';\n }\n\n window.selectOption = function(val) {\n if(isTransitioning) return;\n answers[`q${quizData[currentIdx].id}`] = val;\n saveProgress();\n \/\/ Q10 \u5b8c\u6210\uff1a\u5df2\u8cfc\u8cb7\u7528\u6236\u76f4\u63a5\u7e7c\u7e8c\uff0c\u672a\u8cfc\u8cb7\u7528\u6236\u986f\u793a\u5c0e\u8cfc\u9801\n if (quizData[currentIdx].id === 10 && !hasPurchased) {\n saveQuizDataForPaywall(); \/\/ \u5132\u5b58 Q1-Q10 \u7b54\u6848\u4f9b\u5c0e\u8cfc\u9801\u8a08\u7b97 J \u5206\u6578\n\n \/\/ \ud83c\udd95 POST webhook\uff1a\u901a\u77e5\u7b2c10\u984c\u5b8c\u6210\uff08\u4e0d\u7b49\u5f85\u56de\u61c9\uff09\n const first10Answers = JSON.parse(sessionStorage.getItem('quiz_answers_10') || '[]');\n const first10Indicators = JSON.parse(sessionStorage.getItem('quiz_indicators_10') || '[]');\n\n \/\/ \u8a08\u7b97 J \u5206\u6578\uff08\u79e9\u5e8f\u5206\uff09\n let jScore = 0;\n for (let i = 0; i < 10; i++) {\n const indicator = first10Indicators[i]; \/\/ \"J=A\" \u6216 \"J=B\"\n const answer = first10Answers[i]; \/\/ \"A\" \u6216 \"B\"\n if (indicator && answer && answer === indicator.split('=')[1]) {\n jScore++;\n }\n }\n\n \/\/ J \u5206\u6578 \u2192 \u985e\u578b\n let jType = '';\n if (jScore >= 9) jType = '\u6975\u81f4\u79e9\u5e8f';\n else if (jScore >= 7) jType = '\u9bae\u660e\u79e9\u5e8f';\n else if (jScore >= 4) jType = '\u5e73\u8861';\n else if (jScore >= 2) jType = '\u9bae\u660e\u81ea\u7531';\n else jType = '\u6975\u81f4\u81ea\u7531';\n\n fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: sessionStorage.getItem('quiz_user_id'),\n answers: first10Answers,\n jScore: jScore,\n jType: jType,\n lang: currentLang || '',\n area: userArea || ''\n })\n }).catch(err => console.error('Q10 webhook error:', err));\n\n \/\/ \u50b3\u905e\u7236\u9801\u9762\u7684 country\/test \u548c lang \u53c3\u6578\u7d66\u5c0e\u8cfc\u9801\n const urlParams = new URLSearchParams(window.location.search);\n const country = urlParams.get('country') || urlParams.get('test');\n let paywallUrl = \"https:\/\/maybeits.me\/mbit-buy\";\n const params = new URLSearchParams();\n if (country) params.set('country', country);\n if (currentLang) params.set('lang', currentLang);\n if (params.toString()) {\n paywallUrl += '?' + params.toString();\n }\n openEmbeddedPage(paywallUrl);\n return;\n }\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n } else {\n \/\/ \ud83c\udf89 Q93 \u5b8c\u6210\uff01\u7522\u751f\u7b54\u6848\u5b57\u4e32\n const answerString = generateAnswerString();\n console.log('\ud83d\udce6 93\u984c\u5168\u90e8\u5b8c\u6210\uff01\u7b54\u6848\u5b57\u4e32:', answerString);\n \/\/ TODO: POST \u5230 n8n\n }\n };\n\n window.prevQuestion = function() {\n if (currentIdx > 0) { \n currentIdx--; \n saveProgress();\n dom.questionArea.classList.remove('has-transition');\n renderQuestion(quizData[currentIdx]); \n if(!quizData[currentIdx].transition) {\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n }\n }\n };\n\n window.goToFinalStep = async function() {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._finalStepSubmitting) return;\n window._finalStepSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._finalStepSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u6309\u9215\u8996\u89ba\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = 'none';\n dom.finalBtn.style.opacity = '0.5';\n }\n\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 2. \u8a2d\u7f6e 15 \u79d2\u8d85\u6642\u6a5f\u5236\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n \/\/ 3. \u767c\u9001 webhook \u4e26\u7b49\u5f85\u56de\u61c9\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/379dc121-5a66-4694-8452-5802a7d8d95b', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n \/\/ 4. \u6aa2\u67e5\u56de\u61c9\u72c0\u614b\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 5. \u6210\u529f\u5f8c\u8df3\u8f49\u9801\u9762\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n console.log('\u8df3\u8f49\u8a9e\u8a00\u8def\u5f91:', langPath, '(\u5730\u5340:', userArea, ')');\n window.location.href = `https:\/\/maybeits.me${langPath}\/photo-editor\/?id=${userId}`;\n\n } catch (error) {\n \/\/ 6. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._finalStepSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = '';\n dom.finalBtn.style.opacity = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n \/\/ \u986f\u793a\u932f\u8aa4\u756b\u9762\uff08\u4f7f\u7528\u73fe\u6709\u7684\u932f\u8aa4 UI \u7d44\u4ef6\uff09\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToFinalStep()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83c\udd93 \u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\uff08\u514d\u8cbb\u7528\u6236\uff09\n window.goToSimpleReport = async function() {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._simpleReportSubmitting) return;\n window._simpleReportSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._simpleReportSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u514d\u8cbb\u5831\u544a\u6309\u9215\uff08\u9632\u6b62 loading \u904e\u6e21\u671f\u9593\u88ab\u518d\u6b21\u9ede\u64ca\uff09\n const simpleBtn = document.querySelector('.final-simple-btn');\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = 'none';\n simpleBtn.style.opacity = '0.5';\n simpleBtn.style.animation = 'none';\n }\n\n \/\/ 2. \u7d44\u6210\u7b54\u6848\u5b57\u4e32\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 3. POST webhook\uff0815 \u79d2\u8d85\u6642\uff09\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 \u7c21\u6613\u7248\u5831\u544a Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 4. \u6210\u529f\u5f8c\u8df3\u8f49\u5230\u514d\u8cbb\u6e2c\u9a57\u7d50\u679c\u9801\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n window.location.href = `https:\/\/maybeits.me${langPath}\/mbti-express\/?id=${encodeURIComponent(userId)}`;\n\n } catch (error) {\n \/\/ 5. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._simpleReportSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = '';\n simpleBtn.style.opacity = '';\n simpleBtn.style.animation = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToSimpleReport()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83d\udd19 \u5f9e Final \u9801\u8fd4\u56de\u4e0a\u4e00\u984c\n window.goBackFromFinal = function() {\n \/\/ \u2705 \u91cd\u7f6e\u63d0\u4ea4\u9396\uff08\u56de\u5230\u984c\u76ee\u5f8c\u5141\u8a31\u91cd\u65b0\u63d0\u4ea4\uff09\n window._finalStepSubmitting = false;\n window._simpleReportSubmitting = false;\n\n \/\/ \u95dc\u9589\u8f49\u5834\u5c64\n isTransitioning = false;\n dom.transitionLayer.classList.remove('active');\n dom.transitionLayer.classList.remove('final-mode');\n dom.finalBtn.classList.remove('show');\n dom.transText.classList.remove('fade-in');\n dom.transText.innerHTML = '';\n\n \/\/ \u96b1\u85cf\u6c23\u7403\n dom.balloonContainer.style.display = 'none';\n dom.balloonContainer.innerHTML = '';\n\n \/\/ \u79fb\u9664\u661f\u661f\n const stars = document.querySelector('.final-stars');\n if (stars) stars.remove();\n\n \/\/ \u56de\u5230\u6700\u5f8c\u4e00\u984c\uff08Q93\uff0cindex = 92\uff09\n currentIdx = quizData.length - 2; \/\/ Q93 \u7684 index \u662f 92\uff0c\u4e0d\u662f 93\uff08\u90a3\u662f final\uff09\n renderQuestion(quizData[currentIdx]);\n };\n\n \/\/ \ud83c\udd93 \u60c5\u5883 C\uff1a\u76e3\u807d\u5c0e\u8cfc\u9801 iframe \u7684 postMessage\uff08\u514d\u8cbb\u7e7c\u7e8c\u6e2c\u9a57\uff09\n window.addEventListener('message', function(event) {\n if (event.data && event.data.type === 'freeContinue') {\n console.log('\ud83c\udd93 \u6536\u5230\u514d\u8cbb\u7e7c\u7e8c\u8a0a\u865f\uff0c\u9032\u5165\u7b2c 11 \u984c');\n closeEmbeddedPage();\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n }\n }\n });\n\n \/\/ \ud83d\udd25 \u5730\u7403\u6309\u9215\u9ede\u64ca - \u53ef\u81ea\u8a02\u7ffb\u8b6f\u529f\u80fd\n window.onGlobeClick = function() {\n \/\/ \u5728\u9019\u88e1\u6dfb\u52a0\u4f60\u7684\u7ffb\u8b6f\u5916\u639b\u89f8\u767c\u4ee3\u78bc\n console.log('Globe clicked - add your translation plugin here');\n \/\/ \u793a\u4f8b\uff1a\u53ef\u4ee5\u6253\u958b\u7ffb\u8b6f\u9762\u677f\u6216\u89f8\u767c\u7ffb\u8b6f\u5916\u639b\n };\n\n \/* =========================================\n \ud83d\udd25 \u7159\u706b\u5f15\u64ce - \u652f\u63f4\u4e0d\u540c\u984f\u8272\n ========================================= *\/\n const canvas = document.getElementById('fireworksCanvas'); \n const ctx = canvas.getContext('2d'); \n let particles = []; let fireworksInterval;\n let animationFrameId; \n \n function resizeCanvas() { \n const dpr = window.devicePixelRatio || 1;\n const width = window.innerWidth;\n const height = window.innerHeight;\n canvas.width = width * dpr; \n canvas.height = height * dpr; \n ctx.scale(dpr, dpr);\n canvas.style.width = width + 'px';\n canvas.style.height = height + 'px';\n }\n window.addEventListener('resize', resizeCanvas); resizeCanvas();\n \n function createParticle(x, y) {\n \/\/ \u4f7f\u7528\u7576\u524d\u7ae0\u7bc0\u7684\u984f\u8272\n const baseHue = currentFireworkHues[Math.floor(Math.random() * currentFireworkHues.length)];\n const isMobile = window.innerWidth < 768;\n const particleCount = isMobile ? 60 : 120; \/\/ \u66f4\u591a\u7d30\u5c0f\u7c92\u5b50\n\n for (let i = 0; i < particleCount; i++) { \n const hue = baseHue + (Math.random() * 15 - 7.5); \/\/ \u8f15\u5fae\u8272\u76f8\u8b8a\u5316\n particles.push({ \n x: x, y: y, \n hue: hue,\n speed: Math.random() * 2.5 + 0.3, \/\/ \u8f03\u6162\u64f4\u6563\n angle: Math.random() * Math.PI * 2, \n alpha: 0.9 + Math.random() * 0.1, \n decay: Math.random() * 0.008 + 0.003, \/\/ \u66f4\u6162\u8870\u6e1b\n size: Math.random() * 0.8 + 0.2 \/\/ \u66f4\u7d30\u5c0f\u7684\u7c92\u5b50\n }); \n }\n }\n \n function updateFireworks() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n \n \/\/ \u66f4\u67d4\u548c\u7684\u6de1\u51fa\u6548\u679c\n ctx.globalAlpha = 1;\n ctx.globalCompositeOperation = 'source-over'; \n ctx.fillStyle = 'rgba(0, 0, 0, 0.06)'; \/\/ \u66f4\u6162\u6de1\u51fa\uff0c\u62d6\u5c3e\u66f4\u9577\n ctx.fillRect(0, 0, width, height); \n ctx.globalCompositeOperation = 'lighter';\n \n for (let i = particles.length - 1; i >= 0; i--) { \n let p = particles[i]; \n p.x += Math.cos(p.angle) * p.speed; \n p.y += Math.sin(p.angle) * p.speed + 0.3; \/\/ \u8f15\u5fae\u4e0b\u589c\n p.speed *= 0.985; \/\/ \u9010\u6f38\u6e1b\u901f\n p.alpha -= p.decay; \n \n if (p.alpha <= 0) {\n particles.splice(i, 1);\n continue;\n }\n \n \/\/ \u4f7f\u7528\u5f91\u5411\u6f38\u5c64\u7e6a\u88fd\uff0c\u66f4\u67d4\u548c\n const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 3);\n gradient.addColorStop(0, `hsla(${p.hue}, 65%, 75%, ${p.alpha})`);\n gradient.addColorStop(0.3, `hsla(${p.hue}, 75%, 65%, ${p.alpha * 0.5})`);\n gradient.addColorStop(1, `hsla(${p.hue}, 85%, 55%, 0)`);\n \n ctx.fillStyle = gradient;\n ctx.beginPath(); \n ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2); \n ctx.fill(); \n }\n \n if (isTransitioning) {\n animationFrameId = requestAnimationFrame(updateFireworks);\n }\n }\n\n function startFireworks() {\n if (fireworksInterval) clearInterval(fireworksInterval);\n if (animationFrameId) cancelAnimationFrame(animationFrameId);\n updateFireworks(); \n \n \/\/ \u958b\u5834\u653e\u4e00\u767c\n setTimeout(() => createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.5), 300);\n \n \/\/ \u4e3b\u5faa\u74b0 - \u9593\u9694 600ms\uff0c\u8f03\u70ba\u8212\u9069\n fireworksInterval = setInterval(() => { \n if (!isTransitioning) return;\n createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.6);\n }, 600); \n }\n\n function stopFireworks() { \n clearInterval(fireworksInterval); \n cancelAnimationFrame(animationFrameId);\n ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); \n particles = []; \n }\n \n \/* \u661f\u7a7a\u80cc\u666f *\/\n (function() { \n if (document.readyState === 'loading') { \n document.addEventListener('DOMContentLoaded', initStarryBackground); \n } else { initStarryBackground(); } \n \n function initStarryBackground() { \n const starsContainer = document.getElementById('starsContainer'); \n const meteorsContainer = document.getElementById('meteorsContainer'); \n if (!starsContainer || !meteorsContainer) return; \n \n for (let i = 0; i < 120; i++) { \n const star = document.createElement('div'); \n const size = Math.random(); \n if (size > 0.95) star.className = 'star sparkle'; \n else if (size > 0.8) star.className = 'star large'; \n else if (size > 0.5) star.className = 'star medium'; \n else star.className = 'star small'; \n star.style.left = Math.random() * 100 + '%'; \n star.style.top = Math.random() * 100 + '%'; \n star.style.setProperty('--duration', (2 + Math.random() * 3) + 's'); \n star.style.setProperty('--delay', Math.random() * 3 + 's'); \n starsContainer.appendChild(star); \n } \n \n function createMeteor(isBig = false) { \n const meteor = document.createElement('div'); \n meteor.className = isBig ? 'meteor big' : 'meteor'; \n const startX = 30 + Math.random() * 65; \n const startY = 5 + Math.random() * 40; \n const duration = isBig ? 1.2 + Math.random() * 0.5 : 0.8 + Math.random() * 0.4; \n meteor.style.left = startX + '%'; \n meteor.style.top = startY + '%'; \n meteor.style.setProperty('--duration', duration + 's'); \n meteorsContainer.appendChild(meteor); \n setTimeout(() => { meteor.classList.add('active'); }, 50); \n setTimeout(() => { meteor.remove(); }, duration * 1000 + 200); \n } \n \n setTimeout(() => createMeteor(), 500); \n setTimeout(() => createMeteor(), 2000); \n setTimeout(() => createMeteor(true), 4000); \n \n function scheduleMeteor() { \n const delay = 4000 + Math.random() * 6000;\n setTimeout(() => { \n createMeteor(Math.random() > 0.7); \n scheduleMeteor(); \n }, delay); \n } \n setTimeout(scheduleMeteor, 5000); \n } \n })();\n\n \/\/ \ud83d\ude80 \u555f\u52d5\u6e2c\u9a57\uff08\u5148\u8f09\u5165 API \u8cc7\u6599\uff09\n initQuiz();\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Immersive Quiz &#821 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3787","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/3787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/comments?post=3787"}],"version-history":[{"count":492,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/3787\/revisions"}],"predecessor-version":[{"id":8276,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/3787\/revisions\/8276"}],"wp:attachment":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/media?parent=3787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}