/* ===== 全局：古文手写行楷（马善政毛笔楷书），离线回退本地行楷/楷体 ===== */
:root{
    --xingshu: 'Ma Shan Zheng', 'STXingkai', '华文行楷', 'Xingkai',
               'STKaiti', 'KaiTi', '楷体', serif;
    /* 莫奈睡莲绿取色 */
    --monet-bg1: #E3EBD8;
    --monet-bg2: #C9D8BC;
    --monet-deep: #3F5A3A;
    --monet-mid: #5A7D5A;
    --monet-soft: #7FA073;
    --monet-ink: #2E4229;
}
*{ margin: 0; padding: 0; box-sizing: border-box; }
p{ margin: 0; }
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    font-family: var(--xingshu);
    color: var(--monet-ink);
    background: linear-gradient(160deg, var(--monet-bg1) 0%, var(--monet-bg2) 100%);
    -webkit-text-size-adjust: 100%;
}

/* ===== 第一页背景：日式中年男士水彩背影，半透 ===== */
.bg-father{
    position: fixed;
    inset: 0;
    background: url("father-bg.png") center bottom / auto 100% no-repeat;
    opacity: 0.32;
    z-index: 0;
    pointer-events: none;
}
.top-quote,.sub-quote,.start-wrap,.lunar-time,.signature{
    position: relative;
    z-index: 1;
}

/* 顶部寄语 */
.top-quote{
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 5%);
    left: 0; right: 0;
    text-align: center;
    font-size: clamp(17px, 4.6vw, 24px);
    line-height: 1.9;
    color: var(--monet-deep);
    letter-spacing: .06em;
    padding: 0 24px;
}

/* 顶部下间隔副句 */
.sub-quote{
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 24%);
    left: 0; right: 0;
    text-align: center;
    font-size: clamp(22px, 6vw, 34px);
    color: var(--monet-mid);
    letter-spacing: .35em;
    text-indent: .35em;
}

/* 农历生日提示：刚过几天 / 还有几天（放在开始按钮下方） */
.birth-tip{
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 62%);
    left: 0; right: 0;
    text-align: center;
    font-size: clamp(15px, 4vw, 20px);
    color: var(--monet-deep);
    letter-spacing: .12em;
    line-height: 2;
    opacity: .85;
}

/* 全局居中：开始按钮 */
.start-wrap{
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
}
.start-btn{
    padding: 18px 64px;
    font-size: clamp(26px, 7vw, 38px);
    font-family: var(--xingshu);
    letter-spacing: .25em;
    text-indent: .25em;
    color: #F4F7EE;
    background: linear-gradient(135deg, var(--monet-mid) 0%, var(--monet-soft) 100%);
    border: none;
    border-radius: 999px;            /* 全圆角胶囊 */
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(63, 90, 58, .35),
                inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.start-btn:active{
    transform: scale(.96);
    box-shadow: 0 4px 14px rgba(63, 90, 58, .3);
}

/* 底部居中：农历时间 */
.lunar-time{
    position: absolute;
    left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4%);
    text-align: center;
    font-size: clamp(15px, 4vw, 20px);
    color: var(--monet-deep);
    letter-spacing: .12em;
}

/* 右下角署名 */
.signature{
    position: absolute;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    font-size: 13px;
    color: rgba(63, 90, 58, .55);
    letter-spacing: .1em;
}

/* ============ 演出层 ============ */
.show{
    display: none;
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    background: #000;
    z-index: 999;
    overflow: hidden;
}
.show.on{ display: block; }

/* --- 阶段一：黑屏倒计时 --- */
.count-stage{
    position: absolute;
    inset: 0;
    background: #000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.count-stage.on{ display: flex; }
.count-num{
    font-family: var(--xingshu);
    font-size: clamp(120px, 40vw, 300px);
    line-height: 1;
    color: rgba(255,255,255,.92);
    text-shadow: 0 0 30px rgba(255,255,255,.25);
}
.count-num.pop{ animation: cdPop .9s ease both; }
@keyframes cdPop{
    0%{ transform: scale(1.25); opacity: .4; }
    100%{ transform: scale(1); opacity: 1; }
}
.count-wish{
    margin-top: 6vh;
    font-family: var(--xingshu);
    font-size: clamp(20px, 5.5vw, 30px);
    color: rgba(255,255,255,.78);
    letter-spacing: .25em;
    text-indent: .25em;
    min-height: 1.6em;
    text-align: center;
    padding: 0 24px;
}

/* --- 阶段二/四：9:16 纯视频舞台 --- */
.video-stage{
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #16241a 0%, #0a120c 60%, #05090a 100%);
    display: none;
    flex-direction: column;
}
.video-stage.on{ display: flex; }
.video-pad{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--xingshu);
    color: rgba(210, 225, 200, .35);
    font-size: clamp(20px, 5vw, 30px);
    letter-spacing: .4em;
    text-indent: .4em;
}
.main-video{
    flex: 0 0 auto;
    display: block;
    margin: 0 auto;
    width: min(100%, calc(100vh * 9 / 16));
    aspect-ratio: 9 / 16;
    max-height: 100%;
    background: #000;
    object-fit: contain;
    pointer-events: none;
    outline: none;
    border: none;
}

/* --- 阶段三：彩虹渐变 + 逐字 --- */
.rainbow-stage{
    position: absolute;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: linear-gradient(120deg,
        #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee,
        #c2e9fb, #d4fc79, #96e6a1, #ff9a9e);
    background-size: 600% 600%;
    animation: rainbowFlow 6s ease infinite;
}
.rainbow-stage.on{ display: flex; }
@keyframes rainbowFlow{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}
.rainbow-text{
    font-family: var(--xingshu);
    font-size: clamp(34px, 9vw, 60px);
    color: #fff;
    letter-spacing: .15em;
    text-align: center;
    padding: 0 24px;
    text-shadow: 0 2px 18px rgba(0,0,0,.25);
    min-height: 2em;
}

/* --- 阶段五：致谢黑屏 --- */
.ending-stage{
    position: absolute;
    inset: 0;
    background: #000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ending-stage.on{ display: flex; }
.ending-words{
    font-family: var(--xingshu);
    font-size: clamp(40px, 11vw, 72px);
    color: #fff;
    letter-spacing: .2em;
    text-indent: .2em;
}
.exit-hint{
    margin-top: 10vh;
    font-family: var(--xingshu);
    font-size: 22px;
    color: #ffffff;
    letter-spacing: .35em;
    text-indent: .35em;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.exit-hint.show{ opacity: 1; }