* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on Android */
}

.rotate-char {
    text-orientation: sideways;
    display: inline-block; /* Ensure transform/orientation applies correctly */
    vertical-align: middle; /* Align horizontally in vertical mode */
    position: relative;
    left: -5px; /* Fix Android alignment: shift left 2px more (total -5px) without affecting iOS */
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "LXGW WenKai", "PingFang SC", "PingFang TC", sans-serif;
    font-weight: bold;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in WeChat/iOS */
    text-size-adjust: 100%;
}

body.dark-bg {
    background-color: #030000 !important;
}
 
#transition-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background-color: transparent;
    will-change: opacity, background-color;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Ensure background images don't block clicks */
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Remove opacity: 0 because we handle visibility via mask */
    /* But to prevent FOUC before JS adds classes, we can keep it 0 and set to 1 in animation */
    opacity: 0;
}

/* UI Layer Styles */
.ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column !important; /* Force vertical stacking */
    justify-content: center; /* Center content vertically */
    align-items: center;
    gap: 5vh; /* Adaptive gap, fallback/base */
    pointer-events: none; /* Allow clicks to pass through to background */
    z-index: 3;
}

/* 
   We need to ensure the gap is effectively "50px" but adaptive.
   Using 'gap' in flexbox is the modern way. 
   Since user asked for "50px (adaptive)", we can use clamp or vh relative to typical height.
   Let's try a relative unit that approximates 50px on standard screens but scales.
   50px on a 800px high screen is ~6.25vh.
*/
@media (min-height: 800px) {
    .ui-layer {
        gap: 50px;
    }
}
@media (max-height: 800px) {
    .ui-layer {
        gap: 6.25vh;
    }
}

/* Spinner Styles */
.spinner-wrapper {
    position: relative;
    width: 50%; /* Restore to 50% width */
    height: auto; /* Allow height to be determined by content */
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in; /* Smooth fade-in */
    pointer-events: auto; /* Re-enable pointer events */
}

.spinner-wrapper.fade-in {
    opacity: 1;
}

.spinner-wrapper img {
    width: 100%; /* Fill the wrapper */
    height: auto;
    object-fit: contain; /* Ensure spinner is not cropped */
    animation: spin 2s linear infinite;
    transition: opacity 0.5s linear; /* Smooth crossfade between spinners */
}

#spinner-1 {
    position: relative; /* Establishes height for the wrapper */
    opacity: 1; /* Initial spinner visible */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Add 3D shadow effect */
}

#spinner-2 {
    position: absolute; /* Overlay on top of spinner-1 */
    top: 0;
    left: 0;
    opacity: 0; /* Final spinner hidden */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Add 3D shadow effect */
}

/* Loading Percent Styles */
#loading-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "LXGW WenKai", "SimSun", "Songti SC", serif;
    font-size: 38px;
    color: #ffffff; /* White color */
    font-weight: 700; /* Bold font */
    z-index: 4; /* Above spinner, same level as button (which is initially scale(0)) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add 3D shadow effect */
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none; /* Prevent blocking clicks */
}

/* Button Styles */
#button-img {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%) scale(0);
    width: 100%; /* Assume button fits within spinner wrapper */
    height: auto;
    object-fit: contain;
    z-index: 4; /* Higher than spinner images */
    opacity: 1; /* Always opaque, controlled by scale */
    transition: transform 1s ease-in-out;
    animation: none; /* No spin for button */
    cursor: pointer; /* Indicate clickable */
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Outer glow + 3D shadow */
}

#button-img.visible {
    transform: translateY(-50%) scale(1);
}

#button-img.breathe {
    animation: breathe 1s ease-in-out infinite;
}

/* Click Text Styles */
#click-text-img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(calc(-50% - 2px));
    width: 100%;
    height: 100%; /* Fill the wrapper */
    z-index: 5; /* On top of button */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    animation: none; /* Text doesn't spin */
    pointer-events: none; /* Allow clicks to pass through to button */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Add 3D shadow effect */
    display: flex;
    justify-content: center;
    align-items: center;
}

#click-text-img.visible {
    opacity: 1;
}

.spinner-paused img {
    animation-play-state: paused;
}

/* Title Styles */
.title-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initially hidden */
    pointer-events: auto;
}

.title-wrapper.fade-in {
    opacity: 1;
}

.title-content {
    position: relative;
    width: 50%; /* Control the overall width of the title block */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Add mask animation to the content container */
.title-wrapper.fade-in .title-content {
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
    -webkit-mask-size: 100% 250%;
    mask-size: 100% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* Remove single animation for container, as we will animate children separately */
    /* animation: maskRevealDown 2s ease-out forwards; */
    /* But actually, mask is on container. If we want children to appear sequentially,
       we should probably animate their opacity OR apply mask to them individually.
       
       However, the mask effect is cool.
       If user wants "Bg then Img", maybe we can keep the mask reveal for BG,
       and then fade in the Text Img?
       
       Let's try to adapt:
       1. Title Wrapper becomes visible.
       2. Title BG (mask reveal).
       3. Title Img (fade in + scale?).
       
       But currently structure is:
       .title-content
          #title-bg (absolute)
          #title-img (relative)
          
       If we apply mask to .title-content, both appear together.
       
       Let's move mask to #title-bg ONLY.
       And set #title-img opacity to 0 initially.
    */
}

.title-content #title-bg {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
    
    /* Move mask here */
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
    -webkit-mask-size: 100% 250%;
    mask-size: 100% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* Animation controlled by class addition */
}

/* New class for animating BG */
.title-content #title-bg.animate-reveal {
    animation: maskRevealDown 2s ease-out forwards;
}

.title-content #title-img {
    width: 100%; /* Matches background width */
    height: auto;
    object-fit: contain;
    position: relative; /* Relative to stack on top of absolute bg */
    z-index: 2;
    opacity: 0; /* Hidden initially */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Add 3D shadow effect */
    transition: opacity 1s ease-out;
}

.title-content #title-img.visible {
    opacity: 1;
}

/* Subtitle Styles */
#subtitle-text {
    width: auto; /* Allow width to fit content for accurate centering */
    height: auto;
    position: absolute;
    top: 12%; /* Fixed top to allow downward expansion */
    right: 10px; /* Distance from the right edge of title-bg */
    left: auto; /* Reset left */
    transform: none; /* Remove vertical centering */
    z-index: 3; /* Overlay on top of title-img (z-index: 2) */
    opacity: 0; /* Initially hidden even when wrapper is visible */
    transition: opacity 1.5s ease-in-out;
    
    /* Text Styles to match "宋体字" look */
    font-family: "LXGW WenKai", "PingFang SC", sans-serif;
    font-size: clamp(13px, 4.2vw, 19px); /* Reduced by ~2px (was 15/4.8vw/21) */
    color: #ffffff;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1.2em;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* iOS specific adjustment: Move left by 5px */
@supports (-webkit-touch-callout: none) {
    #subtitle-text {
        right: 15px; /* Original 10px + 5px to move left */
    }
    
    /* Fix parentheses alignment: Nudge right to correct "skewed left" */
    .rotate-char {
        position: relative;
        left: 4px; /* Increased from 2px to 4px */
        top: -1px; /* Slight vertical correction if needed */
    }
}

/* Global Bottom Margin for Non-WeChat Environments (Adaptive) */
body.not-wechat {
    padding-bottom: clamp(20px, 4vh, 40px); /* Adaptive 30px approximation */
    box-sizing: border-box; /* Ensure padding doesn't add to height causing scroll */
}

#subtitle-text.visible {
    opacity: 1;
}

/* Animation classes */
.fade-in-up {
    /* Reveal from bottom to top */
    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 60%);
    mask-image: linear-gradient(to bottom, transparent 40%, black 60%);
    -webkit-mask-size: 100% 250%;
    mask-size: 100% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: maskRevealUp 4s ease-out forwards;
}

.fade-in-down {
    /* Reveal from top to bottom */
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
    -webkit-mask-size: 100% 250%;
    mask-size: 100% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: maskRevealDown 4s ease-out forwards;
}

@keyframes maskRevealUp {
    0% {
        opacity: 1; /* Make visible to mask */
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    100% {
        opacity: 1;
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
    }
}

@keyframes maskRevealDown {
    0% {
        opacity: 1; /* Make visible to mask */
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
    }
    100% {
        opacity: 1;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

/* Page 1 Container */
#page-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

/* Page 2 Styles */
.page-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #fff; /* Fallback */
    overflow: hidden;
    visibility: hidden; /* Hide initially to prevent showing through Page 1 */
}

.p2-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1; /* Always visible in the page-2 container */
}

/* Cloud Styles */
.cloud-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Xiangyun (Auspicious Cloud) - CSS Drawing */
.xiangyun {
    position: absolute;
    width: auto;
    height: auto;
    will-change: transform; /* Optimize for movement */
    /* Create black outline using multiple drop-shadows + 3D shadow */
    filter: 
        drop-shadow(1.5px 1.5px 0 #030000) 
        drop-shadow(-1.5px 1.5px 0 #030000) 
        drop-shadow(1.5px -1.5px 0 #030000) 
        drop-shadow(-1.5px -1.5px 0 #030000)
        drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.4));
}

.xiangyun .body {
    display: block;
    position: relative;
    background: #fff;
    border-radius: 50%;
}

.xiangyun .tail-left,
.xiangyun .tail-right {
    display: block;
    position: absolute;
    background: #fff;
}

/* Cloud 1: Large, balanced, classic */
.cloud-1 .body {
    width: 120px;
    height: 50px;
    border-radius: 50px;
}
.cloud-1 .body::before {
    content: ''; position: absolute; width: 60px; height: 60px; background: #fff; border-radius: 50%; top: -25px; left: 20px;
}
.cloud-1 .body::after {
    content: ''; position: absolute; width: 45px; height: 45px; background: #fff; border-radius: 50%; top: -15px; right: 15px;
}
.cloud-1 .tail-left {
    width: 50px; height: 30px; top: 15px; left: -25px; border-radius: 50% 0 0 50%; transform: rotate(-10deg);
}
.cloud-1 .tail-right {
    width: 50px; height: 30px; top: 15px; right: -25px; border-radius: 0 50% 50% 0; transform: rotate(10deg);
}

/* Cloud 2: Compact, taller */
.cloud-2 .body {
    width: 90px;
    height: 45px;
    border-radius: 40px;
}
.cloud-2 .body::before {
    content: ''; position: absolute; width: 50px; height: 50px; background: #fff; border-radius: 50%; top: -25px; left: 10px;
}
.cloud-2 .tail-left {
    width: 40px; height: 20px; top: 18px; left: -20px; border-radius: 100% 0 0 0; transform: skewX(-20deg);
}
.cloud-2 .tail-right {
    width: 60px; height: 25px; top: 15px; right: -30px; border-radius: 0 100% 0 50%;
}

/* Cloud 3: Elongated, wavy */
.cloud-3 .body {
    width: 140px;
    height: 40px;
    border-radius: 20px;
}
.cloud-3 .body::before {
    content: ''; position: absolute; width: 40px; height: 40px; background: #fff; border-radius: 50%; top: -20px; left: 30px;
}
.cloud-3 .body::after {
    content: ''; position: absolute; width: 35px; height: 35px; background: #fff; border-radius: 50%; top: -15px; right: 30px;
}
.cloud-3 .tail-left {
    width: 40px; height: 20px; bottom: 0; left: -30px; border-radius: 100% 0 0 100%;
}
.cloud-3 .tail-right {
    width: 40px; height: 20px; bottom: 0; right: -30px; border-radius: 0 100% 100% 0;
}

/* Cloud 4: Asymmetrical, big head */
.cloud-4 .body {
    width: 100px;
    height: 55px;
    border-radius: 30px;
}
.cloud-4 .body::before {
    content: ''; position: absolute; width: 70px; height: 70px; background: #fff; border-radius: 50%; top: -30px; left: 15px;
}
.cloud-4 .tail-left {
    width: 30px; height: 20px; bottom: 10px; left: -15px; border-radius: 50% 0 0 50%;
}
.cloud-4 .tail-right {
    width: 50px; height: 15px; bottom: 15px; right: -35px; border-radius: 0 100% 50% 0; transform: rotate(15deg);
}

/* Cloud 5: Small, cute, simple */
.cloud-5 .body {
    width: 70px;
    height: 35px;
    border-radius: 20px;
}
.cloud-5 .body::before {
    content: ''; position: absolute; width: 30px; height: 30px; background: #fff; border-radius: 50%; top: -15px; left: 10px;
}
.cloud-5 .body::after {
    content: ''; position: absolute; width: 25px; height: 25px; background: #fff; border-radius: 50%; top: -10px; right: 10px;
}
.cloud-5 .tail-left {
    width: 20px; height: 10px; bottom: 5px; left: -15px; border-radius: 100% 0 0 0;
}
.cloud-5 .tail-right {
    width: 20px; height: 10px; bottom: 5px; right: -15px; border-radius: 0 100% 0 0;
}

/* Cloud 6: Flat, ribbon-like */
.cloud-6 .body {
    width: 130px;
    height: 30px;
    border-radius: 15px;
}
.cloud-6 .body::before {
    content: ''; position: absolute; width: 40px; height: 25px; background: #fff; border-radius: 50% 50% 0 0; top: -15px; left: 45px;
}
.cloud-6 .tail-left {
    width: 40px; height: 15px; bottom: 0; left: -35px; border-radius: 50% 0 0 50%;
}
.cloud-6 .tail-right {
    width: 40px; height: 15px; bottom: 0; right: -35px; border-radius: 0 50% 50% 0;
}

/* Cloud 7: Tiny, distant */
.cloud-7 .body {
    width: 60px;
    height: 30px;
    border-radius: 15px;
}
.cloud-7 .body::before {
    content: ''; position: absolute; width: 25px; height: 25px; background: #fff; border-radius: 50%; top: -12px; left: 10px;
}
.cloud-7 .tail-left {
    width: 15px; height: 10px; bottom: 5px; left: -10px; border-radius: 100% 0 0 0;
}
.cloud-7 .tail-right {
    width: 25px; height: 10px; bottom: 5px; right: -15px; border-radius: 0 100% 0 50%; transform: rotate(10deg);
}

/* Cloud 8: Large, puffy, foreground */
.cloud-8 .body {
    width: 110px;
    height: 60px;
    border-radius: 30px;
}
.cloud-8 .body::before {
    content: ''; position: absolute; width: 50px; height: 50px; background: #fff; border-radius: 50%; top: -25px; left: 10px;
}
.cloud-8 .body::after {
    content: ''; position: absolute; width: 40px; height: 40px; background: #fff; border-radius: 50%; top: -20px; right: 15px;
}
.cloud-8 .tail-left {
    width: 40px; height: 20px; top: 20px; left: -25px; border-radius: 50% 0 0 50%; transform: rotate(-15deg);
}
.cloud-8 .tail-right {
    width: 30px; height: 20px; top: 25px; right: -20px; border-radius: 0 50% 50% 0;
}

/* Initial positions - Optimized for hardware acceleration */
.cloud-1 { top: 15%; left: 0; transform: translateX(-20vw); z-index: 3; opacity: 0.85; }
.cloud-2 { top: 30%; left: 0; transform: translateX(120vw); z-index: 2; opacity: 0.75; }
.cloud-3 { top: 45%; left: 0; transform: translateX(-25vw); z-index: 4; opacity: 0.9; }
.cloud-4 { top: 60%; left: 0; transform: translateX(125vw); z-index: 1; opacity: 0.65; }
.cloud-5 { top: 75%; left: 0; transform: translateX(-15vw); z-index: 3; opacity: 0.8; }
.cloud-6 { top: 10%; left: 0; transform: translateX(120vw); z-index: 2; opacity: 0.7; }
.cloud-7 { top: 20%; left: 0; transform: translateX(-10vw); z-index: 1; opacity: 0.5; }
.cloud-8 { top: 85%; left: 0; transform: translateX(130vw); z-index: 5; opacity: 0.95; }

/* Generic Inner Line Style */
.xiangyun .inner {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid transparent; /* Base transparent */
    z-index: 5;
}

/* Cloud 1: Main swirl */
.cloud-1 .inner {
    width: 40px; height: 40px;
    top: 5px; left: 40px;
    border-bottom: 1.5px solid #030000;
    border-right: 1.5px solid #030000;
    transform: rotate(45deg);
}

/* Cloud 2: Top curve */
.cloud-2 .inner {
    width: 30px; height: 20px;
    top: 10px; left: 30px;
    border-top: 1.5px solid #030000;
    transform: rotate(-10deg);
}

/* Cloud 3: Wavy line */
.cloud-3 .inner {
    width: 50px; height: 20px;
    top: 10px; left: 45px;
    border-bottom: 1.5px solid #030000;
}

/* Cloud 4: Big head swirl */
.cloud-4 .inner {
    width: 35px; height: 35px;
    top: -5px; left: 30px;
    border-left: 1.5px solid #030000;
    border-bottom: 1.5px solid #030000;
    transform: rotate(-30deg);
}

/* Cloud 5: Simple arc */
.cloud-5 .inner {
    width: 20px; height: 10px;
    top: 5px; left: 25px;
    border-top: 1.5px solid #030000;
}

/* Cloud 6: Long curve */
/* .cloud-6 .inner {
    width: 40px; height: 15px;
    top: 5px; left: 45px;
    border-top: 1.5px solid #1d1e20;
} */

/* Cloud 7: Tiny detail */
.cloud-7 .inner {
    width: 15px; height: 15px;
    top: 5px; left: 20px;
    border-right: 1.5px solid #030000;
}

/* Cloud 8: Large swirl */
/* .cloud-8 .inner {
    width: 40px; height: 40px;
    top: 0; left: 35px;
    border-top: 1.5px solid #1d1e20;
    border-left: 1.5px solid #1d1e20;
    transform: rotate(-15deg);
} */

#p2-2-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 4; /* Below fog (z-index 5) for reveal effect */
    visibility: hidden;
}

#p2-3-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* White background to cover underlying layers */
    z-index: 100; /* Ensure it is on top of everything in Page 2 */
    opacity: 0;
    visibility: hidden;
}

#p2-3-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Changed to cover to match P2-2-bg */
    object-position: center;
    display: block;
    opacity: 1; /* Override global img opacity: 0 */
}

/* P2 Text Layout - Refactored for Stability */
#p2-text {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    
    /* Use Flexbox for layout control instead of writing-mode on container */
    display: flex;
    flex-direction: row-reverse; /* Arrange columns Right to Left */
    align-items: flex-start; /* Align columns to the top */
    justify-content: center;
    
    /* Font styles - Inherited by children */
    font-family: "LXGW WenKai", serif;
    font-weight: 600;
    font-size: clamp(15px, 4.0vw, 20px);
    color: #ffffff;
    line-height: 1.4;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

body.not-wechat #p2-text {
    bottom: 15px;
}

.p2-text-line {
    /* Vertical text within each column */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: block;
    position: relative;
    white-space: nowrap;
    
    /* Layout */
    opacity: 0;
    transform: translateY(-20px);
    will-change: transform, opacity;
    
    /* Spacing and Separator */
    /* Applied to the LEFT of the line (which is visually between lines in row-reverse) */
    border-left: 1px solid #ffffff;
    padding-left: 20px;
    margin-left: 20px;
}

/* Remove border/spacing for the last item (Visually Leftmost) */
.p2-text-line:last-child {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}

.line-content {
    display: inline-block; /* Essential for transform to work */
    /* Ensure inheritance of vertical properties */
    writing-mode: inherit;
    text-orientation: inherit;
}

/* iOS Fine-tuning: Shift text left to align visually relative to vertical lines */
.platform-ios .line-content {
    transform: translateX(-9px);
}

/* Specific adjustment for the ellipsis in the last line on iOS: Back to standard position (-4px) per user adjustment */
/* Standard is translate(0px, -4px). Current: -9 + 5 = -4px */
.platform-ios .p2-text-line:last-child .ellipsis-fix {
    transform: rotate(90deg) translate(0px, -4px) !important;
}

.ellipsis-fix {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0px;
    display: inline-block;
    writing-mode: horizontal-tb; /* Reset to horizontal so we can rotate */
    transform: rotate(90deg) translate(0px, -4px); /* Rotate to match vertical flow */
    transform-origin: center;
}

/* Removed previous iOS-specific hacks as the new Flex layout is robust */

/* Pages 5-21 Default Styles */
.page-5, .page-6, .page-7, .page-8, .page-9, .page-10,
.page-11, .page-13, .page-15, .page-16, .page-17, .page-17a, .page-18, .page-19, .page-20 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Lowest index for now, will be managed by JS */
    background-color: #030000; /* Dark Background as requested */
    visibility: hidden;
    overflow: hidden;
}

/* Ensure Page 17a has correct full-screen properties explicitly */
.page-17a {
    /* display: none; 移除此行，由 JS GSAP 完全控制 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}




.page-12, .page-14 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    visibility: hidden;
    z-index: 5;
    /* overflow: hidden; Removed to prevent popup clipping */
}

.page-21, .page-22 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #030000;
    visibility: hidden;
    z-index: 5;
    /* overflow: hidden; Removed to prevent popup clipping */
}

 
 .page-17, .page-19 {
     backface-visibility: hidden;
     transform: translateZ(0);
     will-change: opacity, transform;
 }
/* Override: make Page 17 background black to match Page 16 */
/* Page 12: set background image */
.page-12 {
    background-image: url('https://qn.lzhxit.cn/gls/img/P12/P12-2底图.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Page 13: match Page 11 defaults and stay hidden initially */
.page-13 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #030000;
    visibility: hidden;
    z-index: 5;
}

/* Page 12 center background panel */
.page-12 .p12-center-bg {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 25.2vw; /* 21vw * 1.2 */
    height: 50vh;   
    background-color: rgba(91, 92, 92, 0.5);
    transform: translate(-50%, -50%) scaleY(0);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}




/* Navigation Arrow for Pages 5-21 */
.nav-arrow {
    position: absolute;
    bottom: 80px;
    left: 30px;
    width: auto;
    height: auto;
    max-width: 15%; 
    object-fit: contain;
    z-index: 10; /* Ensure it's above content */
    opacity: 0; /* Hide by default to避免闪烁 */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: none; /* 进入页面不可点击，答完题后再开启 */
    cursor: pointer;
}

body.not-wechat .nav-arrow {
    bottom: 15px;
}

/* Page 4B: additional page below Page 4 with P4 background */
.page-4b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* Under Page 4 but above later defaults */
    background-image: url('https://qn.lzhxit.cn/gls/img/P4/P4底图.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    visibility: hidden; /* Initially hidden; shown via JS if needed */
    overflow: hidden;
}

/* iOS font scaling fixes for iPhone X and above */
.platform-ios .p4-text-container {
    font-size: clamp(14px, 4.1vw, 20px);
}
.platform-ios .page-5 .p4-text-container {
    font-size: clamp(14px, 3.8vw, 20px);
}
.platform-ios .page-7 .p4-text-container,
.platform-ios .page-9 .p4-text-container,
.platform-ios .page-11 .p4-text-container,
.platform-ios .page-13 .p4-text-container,
.platform-ios .page-15 .p4-text-container,
.platform-ios .page-17 .p4-text-container,
.platform-ios .page-19 .p4-text-container,
.platform-ios .page-21 .p4-text-container,
.platform-ios .page-20 .p4-text-container,
.platform-ios .page-22 .p4-text-container {
    font-size: clamp(14px, 3.7vw, 20px);
}
.platform-ios #p8-popup-text,
.platform-ios #p8-popup-text-2 {
    font-size: 3.7vw;
}
.platform-ios #p6-popup-text,
.platform-ios #p6-popup-text-2,
.platform-ios #p6-popup-text-3,
.platform-ios #p6-popup-text-4,
.platform-ios #p6-popup-text-5 {
    font-size: 3.7vw;
}

.platform-android .p4-text-container {
    font-size: clamp(14px, 4.3vw, 20px);
}
.platform-android .page-5 .p4-text-container {
    font-size: clamp(14px, 4.0vw, 20px);
}
.platform-android .page-7 .p4-text-container,
.platform-android .page-9 .p4-text-container,
.platform-android .page-11 .p4-text-container,
.platform-android .page-13 .p4-text-container,
.platform-android .page-15 .p4-text-container,
.platform-android .page-17 .p4-text-container,
.platform-android .page-19 .p4-text-container,
.platform-android .page-21 .p4-text-container,
.platform-android .page-20 .p4-text-container,
.platform-android .page-22 .p4-text-container {
    font-size: clamp(14px, 3.9vw, 20px);
}
.platform-android #p8-popup-text,
.platform-android #p8-popup-text-2 {
    font-size: 3.9vw;
}
.platform-android #p6-popup-text,
.platform-android #p6-popup-text-2,
.platform-android #p6-popup-text-3,
.platform-android #p6-popup-text-4,
.platform-android #p6-popup-text-5 {
    font-size: 3.9vw;
}

/* iOS fixes: Page 10 text blocks */
.platform-ios #p10-text-container {
    font-size: clamp(14px, 3.2vw, 18px) !important;
    padding-bottom: 30px;
}
.platform-ios #p10-overlay-text,
.platform-ios #p10-overlay-2-text,
.platform-ios #p10-overlay-3-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
    padding-bottom: 30px;
}
.platform-ios #p10-overlay-content {
    padding-bottom: 30px;
}

#p10-text-container,
#p10-overlay-text,
#p10-overlay-2-text,
#p10-overlay-3-text {
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
}

.platform-android #p10-text-container {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}
.platform-android #p10-overlay-text,
.platform-android #p10-overlay-2-text,
.platform-android #p10-overlay-3-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}

#p14-bottom-text {
    font-size: clamp(14px, 3.2vw, 18px);
}
.platform-ios #p14-bottom-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}
.platform-android #p14-bottom-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}
#p20-book-text {
    font-size: clamp(14px, 3.2vw, 18px);
}
.platform-ios #p20-book-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}
.platform-android #p20-book-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}
#p16-bottom-text {
    font-size: clamp(14px, 3.2vw, 18px);
}
.platform-ios #p16-bottom-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}
.platform-android #p16-bottom-text {
    font-size: clamp(14px, 3.2vw, 18px) !important;
}

.page-14 {
    background-color: #030000;
}

/* Page 22 image shadow effects */
#p23-suc-image, #p23-err-image {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.6));
    -webkit-filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.6));
}