*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p{
    margin: 0;
}
html,body{
    color: #333;
    background-color: #C95C2D;
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: 'Courier New', Courier, monospace;
    overflow:hidden;
    touch-action: none;
}

/* ===== 第一页背景：半透明二次元女孩 ===== */
.bg-girl{
    position: fixed;
    inset: 0;
    background: url("anime-girl.png") center bottom / auto 100% no-repeat;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}
.name,.blessings,.tip,.surprise,.nowtime{
    position: relative;
    z-index: 1;
}

.name{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1;
    font-size: clamp(48px, 13vw, 100px);
    font-family: "STXingkai", "华文行楷", cursive;
    color: #502F17;
}
.blessings{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    width: 100%;
    height: auto;
    font-size:22px ;
    font-family: "Stkaiti","Kaiti","楷体";
    color: #6A5038;
    transform: translateY(20px);
}
.time{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    font-size: 15px;
    color: #846B4F;

}
.tip{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    font-size: 25px;
    font-family: "Songti SC", "SimSun", "宋体", serif;
    transform: translateY(150px);
}
.nowtime{
    display: flex-end;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 80px;
    font-size: 15px;
    transform: translateY(350px) translateX(40px);
}
.surprise{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 22px;
    font-family: "Songti SC", "SimSun", "宋体", serif;
    color: #6A5038;
    transform: translateY(250px) translateX(10px);
    gap: 24px;
}
.surprise-btn{
    display: none;
    padding: 10px 42px;
    font-size: 22px;
    font-family: "Songti SC", "SimSun", "宋体", serif;
    color: #502F17;
    background-color: transparent;
    border: 2px solid #502F17;
    border-radius: 30px;
    cursor: pointer;
}
.surprise-btn:active{
    background-color: #502F17;
    color: #C95C2D;
}

/* ===== 第二界面（惊喜页） ===== */
.surprise-page{
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #C95C2D;
    z-index: 999;
    overflow: hidden;
    transition: background-color .8s ease;
}
.surprise-page.active{
    display: block;
}
.surprise-page.show-cake{
    background-color: #000000;
}

/* --- 阶段一：全屏堆叠生日祝福卡片 --- */
.cards-stage{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .4s ease;
}
.surprise-page.active .cards-stage{
    opacity: 1;
}
.surprise-page.show-cake .cards-stage{
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}
.b-card{
    position: absolute;
    left: var(--left);
    top: var(--top);
    font-family: "Stkaiti","Kaiti","楷体", serif;
    font-weight: bold;
    font-size: clamp(15px, 3.8vw, 32px);
    padding: clamp(10px, 2.4vw, 16px) clamp(18px, 5vw, 30px);
    border-radius: 14px;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, .6);
    box-shadow: 0 8px 22px rgba(80, 30, 10, .28);
    opacity: 0;
    transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%)) scale(.2) rotate(var(--fr));
    animation: cardFly .95s cubic-bezier(.18, .9, .28, 1.15) var(--d) both;
}
@keyframes cardFly{
    to{
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--s)) rotate(var(--r));
    }
}

/* --- 阶段二：黑底炫酷蛋糕 --- */
.cake-stage{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .9s ease .1s;
    background: radial-gradient(circle at 50% 62%, #1c1233 0%, #0a0616 55%, #000000 100%);
}
.surprise-page.show-cake .cake-stage{
    opacity: 1;
}

/* 烟花 */
.fireworks{
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.fw-burst{
    position: absolute;
    width: 0;
    height: 0;
}
.fw-burst i{
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px 2px currentColor;
    animation: fwFly 2.8s ease-out infinite;
}
@keyframes fwFly{
    0%{
        opacity: 0;
        transform: rotate(var(--rot)) translateY(4px) scale(1);
    }
    8%{ opacity: 1; }
    55%{ opacity: 1; }
    100%{
        opacity: 0;
        transform: rotate(var(--rot)) translateY(calc(-1 * var(--dist))) scale(.25);
    }
}

/* 霓虹标题 */
.cake-title{
    position: absolute;
    left: 50%;
    top: clamp(40px, 10vh, 90px);
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    opacity: 0;
}
.surprise-page.show-cake .cake-title{
    animation: titleIn 1s ease .45s both;
}
@keyframes titleIn{
    from{ opacity: 0; transform: translateX(-50%) translateY(-26px); }
    to{ opacity: 1; transform: translateX(-50%) translateY(0); }
}
.title-cn{
    display: block;
    font-family: "STXingkai", "华文行楷", cursive;
    font-size: clamp(44px, 11vw, 84px);
    letter-spacing: .18em;
    color: #ffe9f3;
    animation: neonPink 1.5s ease-in-out infinite alternate;
}
.title-en{
    display: block;
    margin-top: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: clamp(30px, 7.5vw, 58px);
    letter-spacing: .12em;
    color: #fff6cf;
    animation: neonGold 1.5s ease-in-out infinite alternate;
}
@keyframes neonPink{
    from{ text-shadow: 0 0 8px #ff9ec8, 0 0 22px #ff5fa2, 0 0 44px #ff2d85; }
    to{ text-shadow: 0 0 14px #ffd6e8, 0 0 36px #ff5fa2, 0 0 70px #ff2d85, 0 0 96px #ff2d85; }
}
@keyframes neonGold{
    from{ text-shadow: 0 0 8px #ffe9a8, 0 0 22px #ffc23d, 0 0 44px #ff8a00; }
    to{ text-shadow: 0 0 14px #fff6cf, 0 0 36px #ffc23d, 0 0 70px #ff8a00, 0 0 96px #ff8a00; }
}

/* 蛋糕本体 */
.cake-wrap{
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.surprise-page.show-cake .cake-wrap{
    animation: cakeIn 1.1s cubic-bezier(.2, 1.1, .3, 1.2) .35s both;
}
@keyframes cakeIn{
    0%{ transform: translate(-50%, -50%) scale(0) rotate(-8deg); }
    70%{ transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
    100%{ transform: translate(-50%, -50%) scale(1) rotate(0); }
}

.candles{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(12px, 4vw, 24px);
    position: relative;
    z-index: 3;
    margin-bottom: -8px;
}
.candle{
    position: relative;
    width: clamp(7px, 2vw, 10px);
    height: clamp(36px, 9vw, 48px);
    border-radius: 3px;
    background: repeating-linear-gradient(45deg, #ffffff 0 6px, #ff9ec0 6px 12px);
    box-shadow: 0 0 8px rgba(255, 158, 192, .5);
}
.candle-center{
    width: clamp(9px, 2.6vw, 13px);
    height: clamp(46px, 11vw, 60px);
}
.flame{
    position: absolute;
    left: 50%;
    top: clamp(-16px, -4vw, -14px);
    width: clamp(11px, 3vw, 15px);
    height: clamp(17px, 4.6vw, 23px);
    border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
    background: radial-gradient(circle at 50% 72%, #fff7c2 0%, #ffd24a 38%, #ff8a1e 72%, rgba(255, 110, 0, 0) 100%);
    box-shadow: 0 0 18px 9px rgba(255, 170, 60, .55);
    transform-origin: 50% 100%;
    animation: flicker .45s ease-in-out infinite alternate;
}
@keyframes flicker{
    from{ transform: translateX(-50%) scale(1, .95) rotate(-4deg); }
    to{ transform: translateX(-50%) scale(1.08, 1.14) rotate(4deg); }
}

.layer{
    position: relative;
    border-radius: 14px 14px 10px 10px;
    z-index: 2;
}
.layer-top{
    width: clamp(128px, 42vw, 168px);
    height: clamp(44px, 14vw, 58px);
    background:
        radial-gradient(circle at 28% 62%, #ffe08a 3.5px, transparent 4.5px),
        radial-gradient(circle at 62% 70%, #8fd3ff 3.5px, transparent 4.5px),
        radial-gradient(circle at 80% 55%, #c9a2ff 3.5px, transparent 4.5px),
        linear-gradient(#ffc1d9, #f46aa3);
}
.layer-mid{
    width: clamp(180px, 58vw, 236px);
    height: clamp(56px, 18vw, 74px);
    background:
        radial-gradient(circle at 18% 62%, #fff 3.5px, transparent 4.5px),
        radial-gradient(circle at 45% 70%, #ffd24a 3.5px, transparent 4.5px),
        radial-gradient(circle at 72% 58%, #9bf59b 3.5px, transparent 4.5px),
        radial-gradient(circle at 90% 72%, #8fd3ff 3.5px, transparent 4.5px),
        linear-gradient(#b99bff, #7b4fe0);
}
.layer-bottom{
    width: clamp(230px, 74vw, 306px);
    height: clamp(66px, 22vw, 88px);
    background:
        radial-gradient(circle at 15% 60%, #ffd24a 4px, transparent 5px),
        radial-gradient(circle at 38% 70%, #8fd3ff 4px, transparent 5px),
        radial-gradient(circle at 62% 58%, #ff9ec8 4px, transparent 5px),
        radial-gradient(circle at 85% 68%, #9bf59b 4px, transparent 5px),
        linear-gradient(#ff8fb8, #d93676);
}
/* 顶部奶油条 */
.layer::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: rgba(255, 246, 236, .96);
    border-radius: 10px 10px 0 0;
}
/* 奶油滴落 */
.layer::before{
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 18px;
    background-image: radial-gradient(circle at 12px 12px, #fff6ec 10px, transparent 11px);
    background-size: 24px 18px;
    background-repeat: repeat-x;
}
.plate{
    width: clamp(260px, 86vw, 350px);
    height: clamp(26px, 7vw, 36px);
    margin-top: -4px;
    background: linear-gradient(#e2e2ee, #8686a0);
    border-radius: 50%;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .65), 0 0 40px rgba(120, 90, 200, .25);
    z-index: 1;
}

.back-hint{
    position: absolute;
    bottom: clamp(20px, 5vh, 38px);
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
    letter-spacing: .25em;
    opacity: 0;
}
.surprise-page.show-cake .back-hint{
    animation: hintIn 1s ease 2.2s both;
}
@keyframes hintIn{
    to{ opacity: 1; }
}