/* 禁止iOS文字自动放大 */
* {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Page 3 Styles */
.page-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Below Page 2 (10) so it's revealed when Page 2 slides up */
    background-color: #030000;
    overflow: hidden;
    visibility: hidden; /* Initially hidden */
}

#p3-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#p3-video-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Above first video */
    opacity: 0; /* Initially hidden but rendered */
    visibility: visible;
    pointer-events: none; /* Prevent interaction when invisible */
    /* Mobile Video Hack: Ensure it's not optimized away */
    transform: translateZ(0); 
}

 

#p3-text {
    position: absolute;
    top: 40.9vh; /* Approx 20px adaptive - moved down another 40% */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Adjust width as needed, maybe adaptive */
    max-width: 600px;
    height: auto;
    object-fit: contain;
    z-index: 6; /* Above video */
    opacity: 0;
    /* Apply SVG Filter and Golden-Grey Drop Shadow for 3D effect */
    /* Golden with a hint of gray: rgba(160, 140, 90, 0.8) */
    filter: url(#ripple-filter) drop-shadow(0 15px 10px rgba(160, 140, 90, 0.8));
    pointer-events: none;
}

#p3-bubble {
    position: absolute;
    top: 165px; /* Moved down 20px more (145+20) */
    left: 50%;
    transform: translateX(-50%);
    margin-left: calc(90px - 6vw);
    width: 41.4%; /* Scaled down 8% (45% * 0.92) */
    max-width: 276px; /* Scaled down 8% (300px * 0.92) */
    height: auto;
    object-fit: contain;
    z-index: 7;
    opacity: 0;
    /* Ripple filter + Drop Shadow (Projection) */
    filter: url(#ripple-filter) drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.6));
    pointer-events: none;
    visibility: hidden;
}

/* Page 4 Styles */
.page-4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4; /* Below Page 3 (5) */
    background-color: #030000; /* Dark Gray */
    visibility: hidden; /* Initially hidden */
}

.p4-text-container {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    font-family: "LXGW WenKai", "PingFang SC", "PingFang TC", sans-serif; /* Use LXGW WenKai as primary, PingFang as fallback */
    font-weight: 700;
    font-size: calc(5vw + 2px);
    line-height: 1.6;
    color: #c5aa67; /* Dark grey for readability on white */
    text-align: justify; /* Nice block alignment */
    z-index: 1;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

#p4-text {
    /* Styles now handled by container, keeping ID for potential JS ref */
    font-size: 1.2em; /* Increase font size relative to container (approx 4 sizes bigger) */
    text-decoration: underline; /* Add underline */
    text-underline-offset: 4px; /* Adjust underline position */
    font-weight: 600;
}

#p4-q1 {
    margin-top: 30px; /* 30px distance from above */
    text-align: left; /* Ensure left alignment */
}

.p4-options {
    margin-top: 30px; /* Distance from question */
    display: flex;
    flex-direction: column;
    gap: 30px; /* 30px spacing between options */
    text-align: left; /* Ensure left alignment */
    padding-left: 50px; /* Indent options */
}

.p4-option {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.p4-option::before {
    content: "";
    width: 22.2px;
    height: 22.2px;
    background-image: url("https://qn.lzhxit.cn/gls/img/QA/方块.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.p4-option.selected::before {
    background-image: url("https://qn.lzhxit.cn/gls/img/QA/方块.png"), url("https://qn.lzhxit.cn/gls/img/P3/金色勾.png");
    background-size: contain, 60%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    animation: p4-breathe 300ms ease-in-out 4;
}

.p4-options.show .p4-option::before {
    opacity: 1;
    transform: translateY(0);
}

.p4-option.selected {
    animation: p4-breathe 300ms ease-in-out 4;
}

@keyframes p4-breathe {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes bubble-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.p4-character-container {
    position: absolute;
    bottom: 8vh;
    right: 6vw;
    width: 38vw; /* Matches original video size approx */
    height: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align to right */
}

.page-13 .p4-character-container {
    right: 2vw; /* Move video container closer to right edge for Page 13 */
}

.page-15 .p4-character-container {
    bottom: 18vh; /* Move video container up 10vh from original 8vh */
}

.p4-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 Aspect Ratio */
    height: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2; /* Increased z-index to be above bubble */
    background-color: #030000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    /* Reset absolute positioning */
    bottom: auto;
    right: auto;
    
    /* Fix for mobile video border-radius clipping */
    /* This hack forces the browser to respect border-radius on video */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    
    /* Force Hardware Acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    background-color: #030000; /* Use dark background to blend with video */
}

#p4-bubble, #p5-bubble, #p7-bubble, #p9-bubble, #p11-bubble, #p13-bubble, #p15-bubble, #p17-bubble, #p19-bubble, #p21-bubble {
    position: absolute;
    /* Shift left by 15px and up by 8px using margin/transform to maintain flow */
    /* Since it's absolute positioned, we can adjust right/bottom or use transform translate */
    /* Using transform translate allows combining with scale and keeps layout logic cleaner */
    /* Original transform was scale(0.6), so we add translate(-15px, -8px) */
    /* However, since we animate transform in JS, we should bake this offset into the CSS positioning if possible */
    /* Adjusting 'right' and 'bottom' is safer for static offset */
    bottom: calc(80% + 8px); /* Move up 8px */
    right: calc(10% + 15px + 20vw);
    
    width: 110%; /* Relative to container width */
    height: auto;
    object-fit: contain;
    z-index: 1;
    opacity: 0;
    transform-origin: bottom right;
    transform: scale(0.6);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    /* Reset old positioning */
    top: auto;
    left: auto;
    pointer-events: none;
}

#p5-bubble, #p7-bubble, #p9-bubble, #p11-bubble, #p13-bubble, #p15-bubble, #p17-bubble, #p19-bubble {
    animation: bubble-breathe 2.5s infinite ease-in-out;
    animation-delay: 1.2s; /* Wait for entrance animation */
}

/* .page-5 .p4-video-container removed to match Page 4 size */

#p4-video, #p5-video, #p7-video, #p9-video, #p11-video, #p13-video, #p15-video, #p17-video, #p19-video, #p21-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#p15-video {
    object-position: center -10%;
}

#p16-overlay-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
    z-index: 12;
}
.page-16 .p4-video-container {
    z-index: 2;
}
#p16-hand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8vw;
    height: auto;
    z-index: 13;
    pointer-events: none;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}
#p18-archer, #p18-tiger {
    position: absolute;
    display: block;
    width: 30vw;
    height: auto;
    z-index: 6;
    pointer-events: none;
}
#p18-archer {
    left: calc(5vw - 15px);
    top: 4vh;
}
#p18-tiger {
    right: 30px;
    bottom: 80px;
}
body.not-wechat #p18-tiger {
    bottom: 15px;
}
#p18-book, #p18-book-black {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 32vw;
    height: auto;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(10px 14px 20px rgba(0,0,0,0.7));
}
#p18-finger {
    position: absolute;
    width: 6vw;
    height: auto;
    z-index: 20;
    opacity: 0;
    pointer-events: none; /* Controlled by JS */
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
    cursor: pointer;
}
#p18-copy {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 80%;
    color: #c5aa67;
    font-size: 14px;
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    text-align: justify;
}

#p18-copy .p18-highlight {
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: underline;
    pointer-events: auto;
    cursor: pointer;
}
#p16-overlay-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#p8-popup-video {
    position: absolute;
    left: calc(25.65% - 84px); /* Moved right 4px (-88px + 4px = -84px) */
    top: calc(32.21% + 85px - 5vw); /* +2% down */
    width: calc(52.5vw + 25px); /* Increased width by ~25px to increase height by 14px (maintaining 16:9) */
    height: auto;
    z-index: 1001;
    opacity: 0;
}

#p8-popup-text {
    position: absolute;
    right: 30px; /* Changed from left positioning to fixed distance from right */
    top: calc(33.03% + 80px); /* +2% down */
    width: 22vw; /* Constrain width to fit on screen */
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: 4vw; /* Changed to 4vw */
    font-weight: bold;
    z-index: 1003;
    opacity: 0;
    pointer-events: none;
    line-height: 1.4;
}

#p8-popup-text-2 {
    position: absolute;
    left: 8%;
    top: 30%;
    right: 54%; /* This sets the width implicitly */
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: 4.2vw;
    font-weight: bold;
    z-index: 1003;
    opacity: 0;
    pointer-events: none;
    line-height: 1.4;
    text-align: left; /* Or justify if preferred, defaulting to left */
}

#p4-arrow {
    position: absolute;
    bottom: 80px;
    left: 30px;
    width: auto;
    height: auto;
    /* Limit width to avoid it being huge if the original image is large */
    max-width: 15%; 
    object-fit: contain;
    z-index: 1; /* Same level as video container */
    opacity: 0; /* Initially hidden, controlled by JS */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Consistent shadow */
    pointer-events: auto; /* Ensure clickable */
    cursor: pointer;
}

/* Non-WeChat adjustment for P4 Arrow */
body.not-wechat #p4-arrow {
    bottom: 15px;
}

#p5-text-img, #p6-text-wrapper, #p7-text-img, #p4b-text-img, #p10-text-img, #p13-text-img, #p14-text-wrapper, #p16-text-img, #p17-text-img, #p17a-text-img, #p18-text-img, #p19-text-img, #p20-text-img, #p21-text-img, #p22-text-img {
    position: absolute;
    top: 4vh;
    right: 6vw; /* Matches p4-character-container right margin */
    width: 12vw; /* Initial guess, adjust as needed */
    height: auto;
    z-index: 2;
}

#p6-text-wrapper {
    z-index: 100;
    /* background removed from here, handled by pseudo-element or separate logic */
    padding: 1px;
    box-sizing: content-box; 
    top: 0 !important; /* Force top alignment */
    padding-top: 4vh; /* Add padding to position image correctly */
    pointer-events: none;
}


#p6-text-wrapper.show-bg::before {
    opacity: 1;
}

#p6-text-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    transform: scale(0.855);
    transform-origin: top right;
}

#p10-text-img {
    z-index: 32;
}



#p14-text-img {
    display: block;
    width: 100%;
    height: auto;
}

#p16-text-img, #p18-text-img {
    width: 9.6vw; /* 12vw * 0.8 = 9.6vw */
    top: 4vh;
    right: 6vw;
}

#p20-book-container {
    position: absolute;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

#p20-book-1, #p20-book-2 {
    max-width: 60vw;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 0;
}

#p20-book-1 {
    opacity: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}



#p20-book-2 {
    opacity: 0;
    position: relative;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

#p20-book-text {
    position: absolute;
    left: 40px;
    right: 40px;
    color: #c5aa67;
    font-weight: 600;
    line-height: 1.8;
    z-index: 10;
    opacity: 0;
}

#p20-book-text .p20-book-line {
    margin-bottom: 15px;
    text-align: justify;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes water-wave {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
#p4b-text-img { width: 10vw; height: auto; }

#p7-text-img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

/* Page 12: stick text image to top edge */
.page-12 #p7-text-img {
    top: 0;
}
/* Page 5 specific styles */
/* Page 12 vertical text above center panel */
.page-12 .p12-vertical-text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 7vw;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    width: auto;
    max-width: none;
    overflow: visible;
    display: block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
}

.page-12 .p12-vertical-text.breathe {
    animation: p12VerticalBreathe 1.8s ease-in-out infinite;
}

@keyframes p12VerticalBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

/* Typewriter characters for page-12 vertical text */
.page-12 .p12-vertical-text span {
    display: inline-block;
    opacity: 0;
}
/* Page 17a Gallery */
.page-17a #p17a-gallery {
    position: absolute;
    top: 4vh;
    left: 30px;
    right: calc(18vw + 10px);
    height: 90vh; /* Allow max height */
    pointer-events: none;
    z-index: 1;
}

.page-17a .p17a-gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top; /* Changed from left top to center top */
    opacity: 0;
}

#p17a-img-1 {
    transform: scale(0.8);
    transform-origin: top center;
}

#p17a-img-5 {
    transform: scale(0.8);
    transform-origin: top center;
}

#p17a-img-6 {
    transform: scale(0.48);
    transform-origin: top center;
}

#p17a-text-img {
    transform: scale(0.8); /* Scale down by 20% (1 - 0.2 = 0.8) */
    transform-origin: top right; /* Keep anchored to the top-right corner */
}

#p17a-copy {
    position: absolute;
    top: 32%; /* Estimated position below the scaled image */
    left: 30px; /* 距离左边10px */
    right: 20px; /* Symmetric padding */
    font-family: "LXGW WenKai", "PingFang SC", "PingFang TC", sans-serif;
    font-size: 14px; /* Default for p18-copy is usually small */
    line-height: 1.5;
    color: #c5aa67; /* Matches typical p18-copy color */
    text-align: justify;
    opacity: 0; /* Initially hidden */
    padding-right: 14vw; /* Avoid overlapping with the right-side vertical text image */
}

.p17a-highlight {
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

#p17a-finger, #p17a-finger-2, #p17a-finger-3, #p17a-finger-4, #p17a-finger-5, #p17a-finger-6, #p17a-finger-7 {
    position: absolute;
    width: 30px;
    height: auto;
    z-index: 20;
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
}

/* Match p18-copy exactly if possible. Checking p18-copy styles... */
/* p18-copy is inside .page-18. Let's look for #p18-copy rule. */
/* It seems #p18-copy isn't explicitly defined in the snippet I read. */
/* I will assume standard text styles from p4-text-container or similar. */
/* Wait, I should check #p18-copy style first. */
.page-16 .p16-center {
    position: absolute;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}
.page-16 .p16-caption {
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", "PingFang TC", sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 20px;
}
.page-16 .p16-books {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.page-16 .p16-books img {
    width: auto;
    height: auto;
    max-height: 80%; /* Scale down to 80% */
    transform: scale(0.8); /* Alternative method: scale down 20% */
    transform-origin: top center; /* Ensure scaling doesn't shift it weirdly */
    display: block;
    opacity: 0;
    object-fit: contain;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

#p16-bottom-text {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 0;
    color: #c5aa67;
    font-weight: 600;
    line-height: 1.8;
    z-index: 10;
    opacity: 0;
}
#p16-bottom-text p {
    margin-bottom: 15px;
    text-align: justify;
}

.page-12 #p7-text-img {
    position: absolute;
    z-index: 4;
}

.page-12 .p12-item {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
    height: auto;
    will-change: left, top, width, opacity;
    filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.45));
}
/* Particles for Page 12 dissolve effect */
.page-12 .p12-particles {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
}
.page-12 .p12-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.65);
    will-change: transform, opacity;
}
/* Page 5 specific styles */
#p5-q1 {
    margin-top: 0; /* Removed top margin to rely on container positioning */
    text-align: left;
    color: #c5aa67;
}

/* Ensure Page 5 uses same container styling as Page 4 */
.page-5 .p4-text-container {
    /* Inherits from .p4-text-container in page4.css */
    top: 30px; /* Adjusted to 30px from top as requested */
    right: 80px; /* Increased right margin by 10px (40px -> 50px) */
    z-index: 10; /* Ensure it's above other elements */
}

.page-7 .p4-text-container, .page-9 .p4-text-container, .page-11 .p4-text-container, .page-13 .p4-text-container, .page-17 .p4-text-container, .page-19 .p4-text-container, .page-21 .p4-text-container {
    top: 30px;
    right: 80px;
    z-index: 10;
    /* Reduce font size for Page 7 text container (both Q and A) */
    /* Page 5 is calc(4.5vw + 2px), so make this smaller, e.g., 4vw */
    font-size: calc(4vw + 2px); 
}

.p4-text-container .qa-block + .qa-block {
    margin-top: 30px;
}

.page-5 .p4-options {
    padding-left: 0; /* Align with question text */
    gap: 15px; /* Reduced gap from 30px */
}

.page-7 .p4-options, .page-9 .p4-options, .page-11 .p4-options, .page-13 .p4-options, .page-15 .p4-options, .page-17 .p4-options, .page-19 .p4-options, .page-21 .p4-options {
    padding-left: 0;
    gap: 10px; /* Reduced gap further for Page 7 (smaller than 15px) */
}

/* Page 19 Styles */
.page-19 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #030000;
    overflow: hidden;
    visibility: hidden; /* Initially hidden */
}

.page-21 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #030000;
    overflow: hidden;
    visibility: hidden; /* Initially hidden */
}



/* Page 23 Styles */
.page-23 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #030000;
    overflow: hidden;
    visibility: hidden; /* Initially hidden */
}

/* Circle Transition Overlay - 淡出动画 */
#circle-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    background-color: #030000;
}

#circle-transition-overlay.active {
    opacity: 0;
    pointer-events: auto;
    animation: fadeOut 2s ease-in-out forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#p23-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#p19-video {
    object-position: center 80%; /* Shift view down to show more bottom content (default is 50%) */
}

#p13-video {
    object-position: 100% center; /* Shift view to the right to show more left content */
}

#p15-video {
    object-position: center 70%; /* Shift view down to show more bottom content - moved down another 10% */
}

#p17-video {
    object-position: center 80%; /* Shift view down to show more bottom content */
}

/* Reduce font size for both Questions and Options on Page 5 */
.page-5 .p4-text-container {
    font-size: calc(4.5vw + 2px); /* Increased from 4vw */
}

.page-5 .p4-option {
    color: #c5aa67;
    z-index: 10;
    font-size: 0.9em; /* Increased from 0.8em */
}

.page-7 .p4-option, .page-9 .p4-option, .page-11 .p4-option, .page-15 .p4-option, .page-17 .p4-option, .page-19 .p4-option, .page-21 .p4-option {
    color: #c5aa67;
    z-index: 10;
    font-size: 0.9em; /* Keep same scale factor or adjust if needed, container size handles base */
}

/* Page 5 Video Container Override */
.page-5 .p4-character-container, .page-7 .p4-character-container, .page-9 .p4-character-container, .page-11 .p4-character-container, .page-13 .p4-character-container, .page-15 .p4-character-container, .page-17 .p4-character-container, .page-19 .p4-character-container, .page-21 .p4-character-container {
    /* 250px on 750px design draft = 33.33vw */
    width: 33.33vw; 
}

/* Page 6 Styles */
.page-6 {
    background-image: url("https://qn.lzhxit.cn/gls/img/P6/P6-1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute; /* Ensure absolute positioning for full screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#p6-finger, #p6-finger-2, #p6-finger-3, #p6-finger-4, #p6-finger-5 {
    position: absolute;
    width: 10vw; /* Adjust size as needed, assumed responsive */
    height: auto;
    z-index: 200; /* Increased z-index to be above other elements */
    opacity: 0; /* Initially hidden */
    pointer-events: none;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    cursor: pointer; /* Add cursor pointer */
}

#p6-finger {
    /* Calculated based on 750px width and 1334px height */
    /* Left: 163px / 750px = 21.73% */
    left: 21.73%; 
    /* Top: 215px / 1334px = 16.12% */
    top: 16.12%;
}

#p6-finger-2 {
    /* Calculated based on 750px width and 1334px height */
    /* Left: 201px / 750px = 26.8% */
    left: 26.8%; 
    /* Top: 570px / 1334px = 42.73% */
    top: 42.73%;
}

#p6-finger-3 {
    /* Calculated based on 750px width and 1334px height */
    /* Left: 426px / 750px = 56.8% */
    left: 56.8%; 
    /* Top: 553px / 1334px = 41.45% + 2% = 43.45% */
    top: 42.73%;
}

#p6-finger-4 {
    /* Calculated based on 750px width and 1334px height */
    /* Left: 657px / 750px = 87.6% */
    /* Shift left 5px: using calc */
    left: calc(87.6% - 5px); 
    /* Top: 554px / 1334px = 41.53% */
    top: 41.53%;
}

#p6-finger-5 {
    /* Calculated based on 750px width and 1334px height */
    /* Left: 680px / 750px = 90.67% */
    /* Shift left 10px: using calc */
    left: calc(90.67% - 10px); 
    /* Top: 879px / 1334px = 65.89% */
    top: 65.89%;
}

/* Popup Overlay for Page 6 */
#p6-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    will-change: opacity, visibility;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#p6-arrow, #p4b-arrow {
    position: absolute;
    bottom:30px;
    right: 30px; /* Moved to right, matching left margin of 30px */
    width: auto;
    height: auto;
    max-width: 15%; 
    object-fit: contain;
    z-index: 100;
    opacity: 0;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: auto;
    cursor: pointer;
}



#p6-popup-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#p6-close-btn {
    position: absolute;
    /* Coordinates: X=687/750. Right = (750-687)/750 = 63/750 = 8.4% */
    /* Y=440/1334=32.98% */
    right: 8.4%;
    top: 32.98%;
    width: 8vw; /* Estimated width */
    height: auto;
    z-index: 1002; /* Above popup image */
    cursor: pointer;
    pointer-events: auto;
    display: block; /* Ensure visibility */
}

#p6-popup-text {
    position: absolute;
    /* Adjusted: Start at 55% from left */
    left: 55%;
    /* End at 8% from right (margin-right constraint) */
    right: 8%;
    top: 50%; /* Default vertical center */
    transform: translateY(-50%); /* Center vertically */
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: 4vw; 
    white-space: normal; /* Allow wrapping */
    text-align: left; /* Align text to left */
    z-index: 1003; /* Above close button and image */
    opacity: 0;
    pointer-events: none;
    font-weight: bold;
}

#p6-popup-text-5 {
    position: absolute;
    /* Adjusted: Start at 70% from left */
    left: 70%;
    /* End at 8% from right */
    right: 8%;
    top: 50%; /* Default vertical center */
    transform: translateY(-50%); /* Center vertically */
    color: #c5aa67;
    font-family: "PingFang SC", "Times New Roman", "Georgia", serif;
    font-size: 4vw;
    white-space: normal; /* Allow wrapping */
    text-align: left; /* Align text to left */
    z-index: 1003; /* Above close button and image */
    opacity: 0;
    pointer-events: none;
    font-weight: bold;
}

#p6-popup-text-4 {
    position: absolute;
    left: 55%;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: 4vw;
    white-space: normal;
    text-align: left;
    z-index: 1003;
    opacity: 0;
    pointer-events: none;
    font-weight: bold;
}

#p6-popup-text-3 {
    position: absolute;
    /* Adjusted: Start at 70% from left */
    left: 70%;
    /* End at 8% from right */
    right: 8%;
    top: 50%; /* Default vertical center */
    transform: translateY(-50%); /* Center vertically */
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: 4vw;
    white-space: normal; /* Allow wrapping */
    text-align: left; /* Align text to left */
    z-index: 1003; /* Above close button and image */
    opacity: 0;
    pointer-events: none;
    font-weight: bold;
}

#p6-popup-text-2 {
    position: absolute;
    /* Adjusted: Start at 70% from left */
    left: 70%;
    /* End at 8% from right */
    right: 8%;
    top: 50%; /* Default vertical center */
    transform: translateY(-50%); /* Center vertically */
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: 4vw;
    white-space: normal; /* Allow wrapping */
    text-align: left; /* Align text to left */
    z-index: 1003; /* Above close button and image */
    opacity: 0;
    pointer-events: none;
    font-weight: bold;
}

/* Page 8 Styles */
.page-8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url("https://qn.lzhxit.cn/gls/img/P8/地图.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.page-4b .p4b-finger {
    position: absolute;
    width: 10vw;
    height: auto;
    z-index: 20;
    opacity: 0;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: none;
    transform-origin: center center;
}

#p4b-finger-1 { left: 62.2%; top: 30.79%; }
#p4b-finger-2 { left: 51.07%; top: 44.07%; }
#p4b-finger-3 { left: 68.33%; top: 53.03%; }
#p4b-finger-4 { left: 81.97%; top: 61.27%; }

/* Page 4B Popup */
.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    will-change: opacity, visibility;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.popup-box {
    position: relative;
    width: 100%; /* Force width to be full width */
    max-width: 100%;
    max-height: calc(100% - 40px);
    margin: 20px 0; /* Top/bottom 20px, Left/Right 0 */
    background-color: #030000;
    border: 20px solid #030000; /* 20px dark border */
    box-shadow: inset 0 0 0 2px #c5aa67, 0 12px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4); /* Inner gold border + Drop shadow */
    border-radius: 6px;
    overflow: hidden; /* keep border radius clean */
    display: flex;
    flex-direction: column;
}

.popup-content {
    padding: 16px;
    color: #c5aa67;
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: 4vw;
    line-height: 1.5;
    overflow-y: auto;
}

.popup-content img {
    opacity: 1 !important;
    visibility: visible !important;
}

.p10-back-button {
    position: absolute;
    left: 40px;
    bottom: 40px;
    width: 60px;
    height: auto;
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    z-index: 2002;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}
#p8-text {
    position: absolute;
    top: 0;
    right: 6vw; /* Matches p4-character-container right margin */
    width: 8vw; /* Adjusted from 12vw */
    height: auto;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.8));
    background-color: #030000;
    padding-top: 4vh;
    padding-bottom: 4vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border-radius: 0 0 5px 5px; /* Rounded corners only at bottom */
    box-sizing: content-box;
}



.p8-finger {
    position: absolute;
    width: 13.8vw; /* 14.25 * 0.97 approx */
    height: auto;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    transform-origin: center center;
}

#p8-finger-1 {
    left: 62.13%; /* 64.13 - 2 */
    top: 42.56%; /* 43.56 - 1 */
}

#p8-finger-2 {
    left: 81.73%; /* 83.73 - 2 */
    top: 67.44%; /* 68.44 - 1 */
}

#p8-arrow {
    z-index: 20; 
}

/* Popup Overlay for Page 8 */
#p8-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    will-change: opacity, visibility;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#p8-popup-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#p8-close-btn {
    position: absolute;
    /* Reuse Page 6 coordinates or adjust */
    right: calc(8.4% - 3px);
    top: calc(32.98% + 5px);
    width: 8vw;
    height: auto;
    z-index: 1002;
    cursor: pointer;
    pointer-events: auto;
    display: block;
}

/* Ensure Page 5 and 7 are also absolute to prevent layout issues */


/* Page 10 and 11 have black background */
.page-10, .page-11 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #030000; /* Black background */
    visibility: hidden; /* Default hidden */
}

/* Page 10 Border Animation */
.page-10::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 18px;
    /* Initial state for animation */
    width: 0;
    height: 0;
    border-top: 1px solid #c5aa67;
    border-right: 1px solid transparent; /* Initially transparent right border */
    pointer-events: none;
    z-index: 1;
}

.page-10.draw-borders::before {
    animation: drawTop 1s linear forwards, drawRight 1s linear 1s forwards;
}

@keyframes drawTop {
    0% {
        width: 0;
        border-right-color: transparent;
    }
    99% {
        border-right-color: transparent;
    }
    100% {
        width: calc(100% - 36px); /* Total width - left - right */
        border-right-color: #c5aa67; /* Reveal right border color at end */
    }
}

@keyframes drawRight {
    0% {
        height: 0;
    }
    100% {
        height: calc(100% - 60px); /* Total height - top - bottom */
    }
}

#p10-click-finger {
    position: absolute;
    bottom: 25%; /* 15% + 10% */
    right: 25%;  /* 15% + 10% */
    width: auto;
    height: auto;
    max-width: 20%;
    z-index: 20;
    /* cursor: pointer; */
    pointer-events: auto; /* Re-enable interaction */
    cursor: pointer;
    animation: fingerLoop 1.5s infinite alternate ease-in-out;
}

.p10-overlay-finger {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 15%; /* Adjust size as needed */
    z-index: 33; /* Above image */
    opacity: 0; /* Hidden initially */
    pointer-events: none; /* Cancel click events by default */
    animation: fingerLoop 1.5s infinite alternate ease-in-out;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Add projection */
}

#p10-overlay-finger-1 {
    top: 50%; /* Center vertically relative to image container? No, relative to parent div */
    left: 45%; /* Moved right 10% (20% -> 30%) */
    transform: translate(-50%, -50%); /* Center anchor */
    pointer-events: auto; /* Enable click for this finger */
    cursor: pointer;
}

#p10-overlay-finger-2 {
    bottom: 10%; /* Moved up ~15% (from -50px to 10%) */
    right: 15%;
    pointer-events: auto; /* Enable click for this finger */
    cursor: pointer;
}

/* Overlay Borders: Left and Bottom only */
#p10-overlay::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 18px;
    width: 0;
    height: 0;
    border-left: 1px solid #c5aa67;
    border-bottom: 1px solid transparent;
    pointer-events: none;
    z-index: 31;
}

#p10-overlay.draw-overlay-borders::before {
    animation: drawLeft 1s linear forwards, drawBottom 1s linear 1s forwards;
}

/* Overlay 2 Styles */
#p10-overlay-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 41; /* Above Overlay 1 (40) */
    display: none;
}

/* Overlay 2 Borders: Left and Right, Top to Bottom animation */
#p10-overlay-2::before,
#p10-overlay-2::after {
    content: "";
    position: absolute;
    top: 30px;
    width: 0; /* Width 0 but we use border-left/right so it's a line */
    height: 0;
    pointer-events: none;
    z-index: 31;
}

#p10-overlay-2::before {
    left: 18px;
    border-left: 1px solid #c5aa67;
}

#p10-overlay-2::after {
    right: 18px;
    border-right: 1px solid #c5aa67;
}

#p10-overlay-2.draw-overlay-2-borders::before,
#p10-overlay-2.draw-overlay-2-borders::after {
    animation: drawVertical 1.5s linear forwards;
}

@keyframes drawVertical {
    0% { height: 0; }
    100% { height: calc(100% - 60px); }
}

/* Overlay 3 Styles */
#p10-overlay-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 42; /* Above Overlay 2 (41) */
    display: none;
}

/* Overlay 3 Borders: Top and Bottom only, Top (L->R), Bottom (R->L) */
#p10-overlay-3::before,
#p10-overlay-3::after {
    content: "";
    position: absolute;
    left: 18px; /* Consistent left alignment */
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 31;
}

#p10-overlay-3::before {
    top: 30px;
    border-top: 1px solid #c5aa67;
}

#p10-overlay-3::after {
    /* Bottom needs careful positioning. 
       Image wrapper starts at top 55px. 
       We want bottom border below image? Or relative to screen?
       Overlay 1 used drawBottom with calc(100% - 36px) width.
       Let's assume it frames the content area or screen area similarly.
       Overlay 1 borders: left at top 30px, bottom implicit from left line height?
       Actually Overlay 1: border-left and border-bottom on ONE pseudo-element?
       No, overlay 1 used ::before with border-left and border-bottom.
       
       Let's align with Overlay 1's "box" concept.
       Overlay 1: top: 30px, left: 18px.
       Let's place top border at top 30px.
       Let's place bottom border at bottom ~30px? Or relative to content?
       User said "image margin ... consistent with ...".
       Let's put bottom border at a fixed position from bottom or top?
       Let's use bottom: 30px (approx) or calc(100% - 30px).
    */
    bottom: 30px;
    border-bottom: 1px solid #c5aa67;
    /* Bottom border R->L means we anchor right?
       Actually to animate width from right to left, we can use right positioning or transform.
       If we use left: 18px, increasing width goes L->R.
       If we use right: 18px, increasing width goes R->L visually if anchored right.
    */
    left: auto;
    right: 18px;
}

#p10-overlay-3.draw-overlay-3-borders::before {
    animation: drawHorizontal 1.5s linear forwards;
}

#p10-overlay-3.draw-overlay-3-borders::after {
    animation: drawHorizontal 1.5s linear forwards;
}

@keyframes drawHorizontal {
    0% { width: 0; }
    100% { width: calc(100% - 36px); } /* 18px margin on each side */
}

@keyframes drawLeft {
    0% { height: 0; border-bottom-color: transparent; }
    99% { border-bottom-color: transparent; }
    100% { height: calc(100% - 60px); border-bottom-color: #c5aa67; }
}

@keyframes drawBottom {
    0% { width: 0; }
    100% { width: calc(100% - 36px); }
}

@keyframes fingerLoop {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-10px, -10px); }
}

#p10-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Slightly darker to hide background better */
    z-index: 40; /* Increased to be above p10-container (31) */
    display: none; /* Controlled by JS */
}

#p10-container {
    position: absolute;
    top: 55px;
    left: 40px;
    width: calc(100% - 80px);
    z-index: 31; /* Above overlay background */
}

#p10-content-img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    transform: scale(0.9);
    transform-origin: left center;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

#p10-text-container {
    margin-top: 20px;
    color: #c5aa67;
    font-size: 5vw;
    font-weight: 600;
    line-height: 1.8;
    opacity: 0; /* Initially hidden to prevent flash */
}

#p10-text-container p {
    margin-bottom: 15px;
    text-align: justify;
}

#p14-bottom-text {
    margin-top: 25px;
    color: #c5aa67;
    font-weight: 600;
    line-height: 1.8;
    z-index: 10;
    opacity: 0;
}

#p14-bottom-text p {
    margin-bottom: 15px;
    text-align: justify;
}

#p9-arrow, #p10-arrow {
    position: absolute;
    bottom: 80px;
    right: 30px; /* Moved to right, matching left margin of 30px */
    width: auto;
    height: auto;
    max-width: 15%; 
    object-fit: contain;
    z-index: 100;
    opacity: 0;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: auto;
    cursor: pointer;
}

body.not-wechat #p9-arrow,
body.not-wechat #p10-arrow {
    bottom: 15px;
}

.p10-back-button {
    position: absolute;
    bottom: 80px;
    right: 30px; /* Moved to right, matching left margin of 30px */
    width: auto;
    height: auto;
    max-width: 15%; 
    object-fit: contain;
    z-index: 1000;
    opacity: 0;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: auto;
    cursor: pointer;
}

body.not-wechat .p10-back-button {
    bottom: 15px;
}

/* Page 10 Text Image Styles */
#p10-text-img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

/* Page 14 Text Image Styles */
#p14-text-img {
    position: absolute;
    top: 11vh;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

#p14-bottom-text {
    position: absolute;
    left: 40px;
    right: 40px;
    color: #c5aa67;
    font-weight: 600;
    line-height: 1.8;
    z-index: 10;
    opacity: 0;
}

/* Page 23 Image and Text Styles */
#p23-img {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center center;
    opacity: 0;
    z-index: 10;
    width: 28%;
    height: auto;
    object-fit: contain;
}

#p23-text {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center center;
    opacity: 0;
    z-index: 10;
    color: #c5aa67;
    font-family: 'LXGW WenKai', sans-serif;
    font-size: 20px;
}