/* 首页动画样式 */
.fade-in { animation: fadeIn 0.8s ease-in-out; }
.slide-in { animation: slideIn 0.8s ease-in-out; }
.zoom-in { animation: zoomIn 0.8s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#main-content-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 与活动主视觉一致的首屏底色；避免背景图未加载时整屏闪大红 */
    background-color: #0b1f3a;
}

/* 首页各区块改为纵向排列，禁止再使用「整屏绝对定位」叠在一起 */
#homeSection > [id$="Wrapper"] {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto;
    z-index: 2;
    flex-shrink: 0;
}
#homeSection > [id$="Wrapper"] img {
    pointer-events: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 首页各图块尺寸（原 fillWrapper 内联样式，统一写死在此） */
#logoImageWrapper img {
    max-width: min(50vw, 400px);
    max-height: min(18vh, 120px);
    margin-top: 4px;
}
#titleImageWrapper img {
    max-width: min(93vw, 400px);
    max-height: min(42vh, 280px);
    margin-top: 2vh;
}
#subtitleImageWrapper img {
    max-width: min(80vw, 400px);
    max-height: 120px;
    margin-top: 4px;
}
#themeImageWrapper img {
    max-width: min(86vw, 400px);
    max-height: min(12vh, 88px);
    margin-top: 1vh;
}
#organizerImageWrapper img {
    max-width: min(55vw, 400px);
    max-height: 120px;
    margin-top: 3vh;
}
#timeImageWrapper img {
    max-width: min(75vw, 400px);
    max-height: 120px;
    margin-top: 3vh;
}
#enterImageWrapper img {
    max-width: min(320px, 42vw);
    max-height: min(22vh, 120px);
    margin-top: 40vh;
    cursor: pointer;
}
.content-area {
    position: relative;
    z-index: 20;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    box-sizing: border-box;
    /* 与活动深蓝主色一致，避免缝隙露出浅色 */
    background-color: #0b1f3a;
}

/* 去掉图片按钮的高亮效果和点击变暗效果 */
img, img:active, img:focus {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* 移除按钮的点击变暗效果 */
.lottery-top-btns img,
.lottery-top-btns img:active,
.lottery-top-btns img:focus,
.lottery-top-btns img:hover {
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* 移除开始答题按钮的点击变暗效果 */
#enterImageWrapper img,
#enterImageWrapper img:active,
#enterImageWrapper img:focus,
#enterImageWrapper img:hover {
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.home-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 0px);
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#homeSection {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px 16px max(40px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    /* 铺满可视区域；不用 min(100vh,900px) 以免大屏底部留白 */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    background-color: #0b1f3a;
    /*
     * var() 的回退里不要用带逗号的 linear-gradient，部分 WebView 会整句失效只剩底色。
     * 默认图与 home-assets.js 的 bgImage 一致（路径相对本 CSS 文件）。
     */
    background-image: var(--home-bg, url("../assets/home-bg.jpg"));
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.home-section img {
    box-sizing: border-box;
    /* outline: 1px solid #eee; // 调试用 */
}

.home-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5%;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #222;
    width: 90vw;
    z-index: 20;
}

.home-desc {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 12%;
    text-align: center;
    color: #666;
    margin: 0;
    width: 90vw;
    z-index: 20;
}

.home-btns {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5%;
    display: flex;
    justify-content: center;
    gap: 18px;
    width: 90vw;
    z-index: 30;
}

.home-btn {
    padding: 12px 32px;
    font-size: 1.1rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(90deg, #e8c547 0%, #c9a227 52%, #a67c00 100%);
    color: #0f172a;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.22);
}
.home-btn:hover {
    background: linear-gradient(90deg, #f0d65c 0%, #d4af37 52%, #b8860b 100%);
    color: #0f172a;
}

#wechat-only-message {
    /* 显隐以 wechat.css + wechat.js 为准；此处仅作首页兜底 */
    display: none;
}
#wechat-only-message p {
    font-size: 1.2rem;
    color: inherit;
    margin: 12px 0;
}


.lottery-top-btns {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 12px));
    right: 0;
    /* 与视口右侧贴齐；刘海屏仅保留系统安全区内边距，不再额外加 12px */
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
    align-items: flex-end;
}
.lottery-top-btns img {
    width: min(88px, 22vw);
    max-width: 66px;
    height: auto;
    cursor: pointer;
    display: block;
}

/* ========== 首页 home-section 依次入场 + 开始答题呼吸 ========== */
#homeSection > div {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: opacity, transform;
}
#homeSection.home-anim-started > div:nth-child(1) {
    animation: wzdtHomeBlockIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0ms;
}
#homeSection.home-anim-started > div:nth-child(2) {
    animation: wzdtHomeBlockIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 85ms;
}
#homeSection.home-anim-started > div:nth-child(3) {
    animation: wzdtHomeBlockIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 170ms;
}
#homeSection.home-anim-started > div:nth-child(4) {
    animation: wzdtHomeBlockIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 255ms;
}
#homeSection.home-anim-started > div:nth-child(5) {
    animation: wzdtHomeBlockIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 340ms;
}
#homeSection.home-anim-started > div:nth-child(6) {
    animation: wzdtHomeBlockIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 425ms;
}
#homeSection.home-anim-started > div:nth-child(7) {
    animation: wzdtHomeBlockIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 510ms;
}
@keyframes wzdtHomeBlockIn {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
/* 开始答题：仅用 scale 呼吸，勿用 filter/box-shadow 关键帧——否则加类瞬间会从「无阴影」突变到 0% 关键帧，出现闪一下的阴影 */
#enterImageWrapper img.home-breath {
    animation: wzdtHomeEnterBreath 2.6s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes wzdtHomeEnterBreath {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}
@media (prefers-reduced-motion: reduce) {
    #homeSection > div {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    #enterImageWrapper img.home-breath {
        animation: none !important;
    }
}