*{
    box-sizing:border-box;
}


body{

    margin:0;

    background:#ddd;

    font-family:
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

}



.app{

    width:100%;

    max-width:430px;

    min-height:100vh;

    margin:auto;

    background:#fff3e7;

    position:relative;

    overflow:hidden;

}





/* =================
首页
================= */


.home-page{

    padding:22px 18px 100px;

}






/* 顶部 */


.header{


display:flex;

justify-content:space-between;

align-items:center;


}



.decor{


font-size:26px;

letter-spacing:5px;


animation:float 3s infinite;


}



.search-btn{


border:none;

background:#f8d36b;

padding:10px 15px;

border-radius:22px;

font-weight:bold;

color:#806000;


}




/* 标题 */


.brand{


text-align:center;

margin-top:22px;


animation:float 3s ease-in-out infinite;
}



.brand h1{


margin:0;


font-size:30px;


color:#ef7f92;


font-weight:900;


letter-spacing:2px;


}



.brand p{


margin-top:10px;


font-size:16px;


font-weight:bold;


color:#d8797c;


}







/* 照片 */


.couple-box{


text-align:center;

margin-top:18px;


}



.couple-box img{


width:130px;


height:130px;


object-fit:cover;


border-radius:32px;


border:8px solid white;


box-shadow:

0 10px 25px rgba(0,0,0,.12);


}







.slogan{


text-align:center;


margin-top:15px;


font-size:14px;


color:#98745e;


font-weight:bold;


}




/* 每日语句 */


.daily-text{


margin-top:12px;


text-align:center;


font-size:13px;


color:#c18b73;


font-style:italic;


}









/* =================
今天吃什么
================= */


.eat-card{


margin-top:25px;


background:white;


border-radius:25px;


padding:16px;


box-shadow:

0 10px 25px rgba(0,0,0,.06);


}



.eat-title{


display:flex;


justify-content:space-between;


align-items:center;


}



.eat-title h2{


margin:0;


font-size:22px;


color:#80624e;


}





.random-btn{


border:none;


background:#fff0bd;


color:#9a7639;


padding:8px 14px;


border-radius:20px;


font-size:13px;


font-weight:bold;


white-space:nowrap;


}




.category{


display:flex;


gap:8px;


margin-top:16px;


}



.category button{


border:none;


padding:8px 15px;


border-radius:20px;


font-size:13px;


font-weight:bold;


background:#f7eadb;


}



.category button:nth-child(2){

background:#f4aaa4;

color:white;

}


.category button:nth-child(3){

background:#dfe995;

}


.category button:nth-child(4){

background:#cfe6f2;

}









/* =================
菜品
================= */


.food-container{


margin-top:20px;


display:grid;


grid-template-columns:1fr 1fr;


gap:15px;


}



.food-card{

transition:.3s;
background:white;


border-radius:24px;


padding:8px;


box-shadow:

0 8px 18px rgba(0,0,0,.08);


cursor:pointer;


animation:show .5s;


}




.food-card img{


width:100%;


height:145px;


object-fit:cover;


border-radius:18px;


}



.food-name{


text-align:center;


margin-top:10px;


font-weight:bold;


color:#76564b;


font-size:15px;


}






/* =================
详情页
================= */


.detail-page{


position:fixed;


top:0;

left:0;

right:0;

bottom:0;


background:#fff3e7;


padding:25px 18px;


overflow:auto;


z-index:20;


transform:translateX(100%);


transition:.35s;


}



.detail-page.show{


transform:translateX(0);


}




.back-btn{


border:none;


background:#f8d36b;


padding:10px 18px;


border-radius:25px;


font-weight:bold;


}



.detail-page h1{


text-align:center;


color:#ef7f92;


}



.detail-page img{


width:100%;


border-radius:25px;


margin-top:15px;


}



.detail-info{


background:white;


border-radius:25px;


padding:18px;


margin-top:18px;


}



.collect-btn{


width:100%;


border:none;


background:#ef7f92;


color:white;


padding:14px;


border-radius:30px;


font-size:16px;


font-weight:bold;


}



.tag-box{


display:flex;


gap:10px;


margin:15px 0;


}



.tag-box span{


background:#fff0bd;


padding:6px 12px;


border-radius:15px;


font-size:13px;


}






.photo-btn{


border:none;


background:#f8d36b;


padding:12px 20px;


border-radius:25px;


}









/* =================
搜索
================= */


.search-panel{


display:none;


position:fixed;


inset:0;


background:rgba(0,0,0,.3);


z-index:50;


align-items:center;

}



.search-panel.show{


display:flex;


}




.search-content{

background:#fffaf2;

width:85%;

max-width:320px;

padding:25px;

border-radius:30px;

}

}



.search-content input{


width:100%;


padding:15px;


border-radius:20px;


border:1px solid #ddd;


}









/* =================
底部
================= */


.bottom-nav{


position:absolute;


bottom:15px;


left:15px;


right:15px;


height:70px;


background:rgba(255,255,255,.8);


border-radius:30px;


display:flex;


justify-content:space-around;


align-items:center;


box-shadow:

0 5px 20px rgba(0,0,0,.08);


}



.nav-item{


text-align:center;


font-size:13px;


color:#80624e;
cursor:pointer;
user-select:none;

}



.nav-item span{


display:block;


font-size:22px;


}



.nav-item.active{


color:#ef7f92;


}









/* =================
动画
================= */


@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-6px);

}


}



@keyframes breathe{


0%,100%{

transform:scale(1);

}


50%{

transform:scale(1.03);

}


}



@keyframes show{


from{

opacity:0;

transform:translateY(20px);

}


to{

opacity:1;

transform:translateY(0);

}


}
/* 搜索弹窗优化 */

.search-panel{
display:none;
position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:78%;

max-width:320px;

background:#fffaf2;

border-radius:32px;

padding:20px;
height:520px;
display:none;

box-shadow:0 15px 40px rgba(0,0,0,.12);

z-index:999;

animation:shadowBreath 3s ease-in-out infinite;
}
.search-panel.show{
    display:flex;
}
.search-content{

display:flex;

flex-direction:column;

justify-content:flex-end;
align-items:center;

gap:16px;

height:100%;

width:100%;

box-sizing:border-box;

padding-bottom:30px;
}


.search-panel{

display:none;


}
#searchInput
{

    height:48px;

    border-radius:24px;

    border:2px solid #f2dcc3;

    background:white;

    padding:0 20px;

    font-size:16px;

    color:#8b6548;

    outline:none;

}



#searchInput::placeholder{

    color:#c8a88a;

}



#searchInput:focus{

    border-color:#ffd86b;

}



#searchConfirm{

    height:46px;

    border:none;

    border-radius:18px;
   
    width:100%;

    background:#ffd86b;

    color:#7b5835;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;
animation:pulse 2.5s infinite;
}
/* ==================
 小厨房呼吸动画
================== */


@keyframes breathe{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.015);
}

}


@keyframes float{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-6px);
}

}


@keyframes pulse{

0%,100%{

box-shadow:0 5px 15px rgba(255,216,107,.25);
s
}

50%{

box-shadow:0 8px 25px rgba(255,216,107,.55);

}

}
@keyframes shadowBreath{

0%,100%{
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

50%{
box-shadow:0 20px 50px rgba(239,127,146,.18);
}

}
.search-photo{
    width:236px;
    height:500px;
    object-fit:cover;
    border-radius:35px;
    display:block;

    margin:20px auto-10px;
}
/* 爱情彩蛋 */

.love-avatar{
    cursor:pointer;
    display:flex;
    justify-content:center;
    transition:0.3s;
}


.love-avatar:active{
    transform:scale(1.08);
}


#loveMessage{

    text-align:center;

    color:#ff7b9c;

    font-size:22px;

    font-weight:bold;

    margin-top:20px;

    opacity:0;

    transform:translateY(15px);

    transition:0.8s;

}


#loveMessage.show{

    opacity:1;

    transform:translateY(0);

}
/* 爱情隐藏彩蛋 */

#loveMessage{

    text-align:center;

    margin-top:20px;

    font-size:20px;

    color:#ff7f9c;

    font-weight:bold;


    opacity:0;

    transform:translateY(15px);

    transition:0.6s;

}


#loveMessage.show{

    opacity:1;

    transform:translateY(0);

}
.food-result{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.25);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}



.food-result-card{

    width:300px;

    background:#fffaf2;

    border-radius:32px;

    padding:35px 25px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}



.food-result-title{

    font-size:20px;

    color:#8b684d;

    margin-bottom:30px;

}



.food-result-name{

    font-size:28px;

    font-weight:bold;

    color:#d58a5a;

    margin-bottom:30px;

}



.food-result-love{

    font-size:18px;

    color:#ef7690;

    margin-bottom:35px;

}



.food-result-card button{

    width:120px;

    height:45px;

    border:none;

    border-radius:25px;

    background:#ffd86b;

    color:#7b5a2b;

    font-size:18px;

}

/* =====================================
   像素情侣首页 - 第一阶段：全屏世界
===================================== */

.pixel-intro{

    position:fixed;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    max-width:430px;

    height:100vh;

    height:100dvh;

    overflow:hidden;

    z-index:5000;


    /* 奶油粉像素世界底色 */

    background:
        linear-gradient(
            to bottom,
            #f8cfca 0%,
            #f9ddd0 32%,
            #fff0da 68%,
            #f3d9b8 100%
        );


    color:#7e594f;

}
/* 像素颗粒背景 */

.pixel-intro::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0.18;


    background-image:

        linear-gradient(
            rgba(255,255,255,.45) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.45) 1px,
            transparent 1px
        );


    background-size:12px 12px;

}
/* 首页标题区域 */

.pixel-world-title{

    position:absolute;

    top:9%;

    left:0;

    width:100%;

    text-align:center;

    z-index:5;

}


.pixel-title-main{

    display:inline-block;

    padding:10px 16px;

    font-size:24px;

    font-weight:900;

    letter-spacing:2px;

    color:#8a554f;

    background:#fff1dd;

    border:3px solid #8a554f;


    /* 像素感：不使用普通圆角 */

    border-radius:2px;


    box-shadow:

        4px 0 0 #ef9e98,

        0 4px 0 #ef9e98,

        4px 4px 0 #c87d78;

}


.pixel-title-small{

    margin-top:16px;

    font-size:14px;

    font-weight:bold;

    letter-spacing:4px;

    color:#d8737f;

}
/* 整个像素世界轻微呼吸 */

.pixel-intro{

    animation:
        pixelWorldBreath 5s
        ease-in-out
        infinite;

}


@keyframes pixelWorldBreath{

    0%,
    100%{

        filter:
            brightness(1)
            saturate(1);

    }


    50%{

        filter:
            brightness(1.035)
            saturate(1.04);

    }

}
/* =====================================
   像素世界：天空
===================================== */

.pixel-sky-scene{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}


/* 像素太阳 */

.pixel-sun{

    position:absolute;

    top:16%;

    right:11%;

    width:34px;

    height:34px;

    background:#ffd978;

    border:4px solid #e8aa59;

    box-shadow:

        5px 0 0 rgba(255,217,120,.35),

        -5px 0 0 rgba(255,217,120,.35),

        0 5px 0 rgba(255,217,120,.35),

        0 -5px 0 rgba(255,217,120,.35);

}


/* 像素云 */

.pixel-cloud{

    position:absolute;

    width:66px;

    height:16px;

    background:#fff8ee;

    box-shadow:

        12px -10px 0 #fff8ee,

        26px -6px 0 #fff8ee,

        42px -12px 0 #fff8ee,

        52px -4px 0 #fff8ee;

}


.px-cloud-1{

    top:20%;

    left:7%;

    animation:pxCloudMove1 18s linear infinite;

}


.px-cloud-2{

    top:31%;

    right:8%;

    transform:scale(.75);

    opacity:.8;

    animation:pxCloudMove2 22s linear infinite;

}


.px-cloud-3{

    top:10%;

    left:44%;

    transform:scale(.55);

    opacity:.65;

}
@keyframes pxCloudMove1{

    0%{

        transform:translateX(-12px);

    }

    50%{

        transform:translateX(12px);

    }

    100%{

        transform:translateX(-12px);

    }

}


@keyframes pxCloudMove2{

    0%{

        transform:
            translateX(10px)
            scale(.75);

    }

    50%{

        transform:
            translateX(-10px)
            scale(.75);

    }

    100%{

        transform:
            translateX(10px)
            scale(.75);

    }

}
/* =====================================
   像素远山
===================================== */
/* =====================================
   像素远山 - 新版
===================================== */

.pixel-hills{

    position:absolute;

    left:0;

    right:0;

    bottom:24%;

    height:260px;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}


/* =====================
   后方高山
===================== */

.hill-back{

    position:absolute;

    left:-8%;

    bottom:0;

    width:116%;

    height:220px;

    background:#d2b8aa;

    opacity:.72;

    clip-path:polygon(

        0% 100%,

        0% 78%,

        5% 78%,
        5% 70%,

        10% 70%,
        10% 60%,

        15% 60%,
        15% 48%,

        20% 48%,
        20% 35%,

        25% 35%,
        25% 23%,

        30% 23%,
        30% 15%,

        35% 15%,
        35% 26%,

        40% 26%,
        40% 39%,

        46% 39%,
        46% 50%,

        52% 50%,
        52% 42%,

        58% 42%,
        58% 31%,

        64% 31%,
        64% 20%,

        70% 20%,
        70% 10%,

        76% 10%,
        76% 23%,

        82% 23%,
        82% 38%,

        88% 38%,
        88% 52%,

        94% 52%,
        94% 67%,

        100% 67%,

        100% 100%

    );

}


/* =====================
   前方绿色山丘
===================== */

.hill-front{

    position:absolute;

    left:-10%;

    bottom:0;

    width:120%;

    height:165px;

    background:#aebf87;

    opacity:.92;

    clip-path:polygon(

        0% 100%,

        0% 74%,

        7% 74%,
        7% 64%,

        14% 64%,
        14% 52%,

        21% 52%,
        21% 42%,

        28% 42%,
        28% 31%,

        35% 31%,
        35% 43%,

        42% 43%,
        42% 54%,

        49% 54%,
        49% 48%,

        56% 48%,
        56% 37%,

        63% 37%,
        63% 27%,

        70% 27%,
        70% 39%,

        77% 39%,
        77% 51%,

        84% 51%,
        84% 61%,

        92% 61%,
        92% 72%,

        100% 72%,

        100% 100%

    );

}
/* =====================================
   像素小厨房
===================================== */

.pixel-kitchen-world{

    position:absolute;

    left:50%;

    bottom:22%;

    transform:translateX(-50%);

    width:250px;

    height:205px;

    z-index:4;

}


/* 房体 */

.pixel-house{

    position:absolute;

    left:15px;

    bottom:0;

    width:220px;

    height:125px;

    background:#f8c4ad;

    border:5px solid #8d6456;

    box-shadow:

        6px 0 0 #d99782,

        0 6px 0 #d99782;

}


/* 屋顶 */

.pixel-roof{

    position:absolute;

    top:18px;

    left:0;

    width:250px;

    height:72px;

    background:#d47d79;

    border:5px solid #8d6456;

    clip-path:polygon(

        0 100%,

        0 78%,

        10% 78%,

        10% 62%,

        20% 62%,

        20% 47%,

        30% 47%,

        30% 31%,

        40% 31%,

        40% 16%,

        60% 16%,

        60% 31%,

        70% 31%,

        70% 47%,

        80% 47%,

        80% 62%,

        90% 62%,

        90% 78%,

        100% 78%,

        100% 100%

    );

}
/* 房顶下的小牌子 */

.pixel-house-sign{

    position:absolute;

    top:10px;

    left:50%;

    transform:translateX(-50%);

    background:#fff0c9;

    color:#c25f6e;

    border:3px solid #8d6456;

    padding:4px 10px;

    font-family:monospace;

    font-size:12px;

    font-weight:bold;

    letter-spacing:2px;

    z-index:3;

}
/* =====================================
   厨房窗户
===================================== */

.pixel-window{

    position:absolute;

    top:48px;

    width:43px;

    height:43px;

    background:#ffd875;

    border:4px solid #8d6456;

    box-shadow:

        inset 0 0 0 3px #fff1a8,

        0 0 12px rgba(255,216,117,.45);

    animation:pxWindowGlow 3.5s ease-in-out infinite;

}


.window-left{

    left:20px;

}


.window-right{

    right:20px;

}


.window-cross-v{

    position:absolute;

    left:17px;

    top:0;

    width:4px;

    height:100%;

    background:#8d6456;

}


.window-cross-h{

    position:absolute;

    top:17px;

    left:0;

    width:100%;

    height:4px;

    background:#8d6456;

}


@keyframes pxWindowGlow{

    0%,
    100%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.12);

    }

}
/* =====================================
   厨房门
===================================== */

.pixel-door{

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:54px;

    height:78px;

    background:#b87962;

    border:

        4px solid #8d6456;

}


.door-window{

    position:absolute;

    width:28px;

    height:22px;

    left:9px;

    top:9px;

    background:#ffe293;

    border:3px solid #8d6456;

}


.door-knob{

    position:absolute;

    right:7px;

    top:44px;

    width:6px;

    height:6px;

    background:#ffd66c;

}


.door-heart{

    position:absolute;

    width:100%;

    bottom:7px;

    text-align:center;

    color:#f59aa4;

    font-size:12px;

}
/* =====================================
   烟囱
===================================== */

.pixel-chimney{

    position:absolute;

    top:5px;

    right:38px;

    width:26px;

    height:45px;

    background:#a96c61;

    border:4px solid #8d6456;

    z-index:0;

}


.smoke{

    position:absolute;

    background:#fff6ec;

    width:10px;

    height:10px;

    opacity:.8;

}


.smoke-1{

    left:4px;

    top:-16px;

    animation:pxSmoke 3s ease-in-out infinite;

}


.smoke-2{

    left:13px;

    top:-29px;

    animation:pxSmoke 3s .8s ease-in-out infinite;

}


.smoke-3{

    left:3px;

    top:-40px;

    animation:pxSmoke 3s 1.4s ease-in-out infinite;

}


@keyframes pxSmoke{

    0%{

        transform:translateY(4px);

        opacity:0;

    }

    40%{

        opacity:.8;

    }

    100%{

        transform:
            translateY(-9px)
            translateX(5px);

        opacity:0;

    }

}
/* =====================================
   草地
===================================== */

.pixel-ground-scene{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:27%;

    z-index:3;

    pointer-events:none;

}


.pixel-grass-ground{

    position:absolute;

    inset:0;

    background:#b8cb91;

    border-top:6px solid #91a96d;

}
/* 厨房小路 */

.pixel-path{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:160px;

    height:100%;

    background:#e9cda8;

    clip-path:polygon(

        42% 0,

        58% 0,

        72% 100%,

        28% 100%

    );

}
/* 小石头 */

.pixel-stone{

    position:absolute;

    width:13px;

    height:8px;

    background:#aa9b86;

    border-bottom:3px solid #897a68;

}


.stone-1{

    left:14%;

    top:33%;

}


.stone-2{

    right:17%;

    top:54%;

}


.stone-3{

    left:24%;

    bottom:14%;

}
/* 草地小花 */

.pixel-mini-flower{

    position:absolute;

    color:#fff7ea;

    font-size:16px;

    text-shadow:

        2px 0 #e99199,

        -2px 0 #e99199;

}


.flower-1{

    left:8%;

    top:18%;

}


.flower-2{

    left:20%;

    top:67%;

    color:#ffd5df;

}


.flower-3{

    right:11%;

    top:29%;

    color:#fff3a8;

}


.flower-4{

    right:23%;

    top:73%;

}
/* =====================================
   左右像素树
===================================== */

.px-tree{

    position:absolute;

    width:80px;

    height:155px;

    bottom:23%;

    z-index:6;

    pointer-events:none;

}


/* 左边树 */

.px-tree-left{

    left:8px;

    transform:scale(.95);

}


/* 右边树 */

.px-tree-right{

    right:8px;

    transform:scale(.82);

}


/* 树干 */

.px-tree-trunk{

    position:absolute;

    left:30px;

    bottom:0;

    width:20px;

    height:75px;

    background:#95664f;

    border:4px solid #76503f;

    box-shadow:

        inset 5px 0 0 #b87b5d;

}


/* 树冠 */

.px-tree-top{

    position:absolute;

    left:11px;

    top:8px;

    width:58px;

    height:65px;

    background:#8fac73;

    border:4px solid #668557;

    box-shadow:

        -12px 18px 0 #8fac73,

        12px 18px 0 #8fac73,

        0 -12px 0 #a5be82,

        -10px -2px 0 #a5be82,

        10px -2px 0 #a5be82;

}
/* 树冠轻轻呼吸 */

.px-tree-top{

    animation:
        pixelTreeBreath
        4.5s
        ease-in-out
        infinite;

}


.px-tree-right .px-tree-top{

    animation-delay:1.2s;

}


@keyframes pixelTreeBreath{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-2px);

    }

}
/* =====================================
   像素爱情信箱
===================================== */

.px-love-mailbox{

    position:absolute;

    left:8%;

    bottom:14%;

    width:48px;

    height:40px;

    padding:0;

    margin:0;

    border:4px solid #7b5148;

    border-radius:0;

    background:#e9828e;

    z-index:10;

    cursor:pointer;

    appearance:none;

    outline:none;

    box-shadow:
        5px 0 0 #be6670,
        0 5px 0 #be6670,
        5px 5px 0 #9f585f;

}


/* 信箱上面的盖子 */

.px-love-mailbox::before{

    content:"";

    position:absolute;

    left:-4px;

    top:-13px;

    width:48px;

    height:13px;

    background:#f3a1a9;

    border:4px solid #7b5148;

    box-sizing:border-box;

}


/* 信箱下面的木柱 */

.px-love-mailbox::after{

    content:"";

    position:absolute;

    left:16px;

    top:36px;

    width:10px;

    height:47px;

    background:#9b6750;

    border-left:3px solid #70483c;

    border-right:3px solid #70483c;

    box-sizing:border-box;

}


/* 信箱正面的爱心 */

.mailbox-heart{

    position:absolute;

    left:0;

    top:7px;

    width:100%;

    text-align:center;

    color:#fff1df;

    font-size:18px;

    font-family:monospace;

    font-weight:bold;

    line-height:18px;

    z-index:2;

}


/* =====================================
   信箱右侧小旗
===================================== */

.mailbox-flag{

    position:absolute;

    right:-13px;

    top:-2px;

    width:5px;

    height:29px;

    background:#7b5148;

    transform-origin:bottom center;

}


/* 黄色旗子 */

.mailbox-flag-head{

    position:absolute;

    top:0;

    left:0;

    width:15px;

    height:11px;

    background:#ffd477;

    border:3px solid #7b5148;

    box-sizing:border-box;

}


/* =====================================
   信箱待机小动画
===================================== */

.px-love-mailbox{

    animation:
        mailboxIdle
        4.5s
        ease-in-out
        infinite;

}


@keyframes mailboxIdle{

    0%,
    86%,
    100%{

        transform:translateY(0);

    }

    92%{

        transform:translateY(-2px);

    }

}


/* 点击时像游戏按钮一样压下去 */

.px-love-mailbox:active{

    animation:none;

    transform:translateY(3px);

    box-shadow:
        2px 0 0 #be6670,
        0 2px 0 #be6670,
        2px 2px 0 #9f585f;

}
/* =====================================
   爱情信箱：收到情书动画
===================================== */

.px-love-mailbox.mailbox-open{

    animation:
        mailboxReceive
        .9s
        steps(5,end);

}


@keyframes mailboxReceive{

    0%{

        transform:translateY(0);

    }

    25%{

        transform:translateY(-4px);

    }

    50%{

        transform:translateY(1px);

    }

    75%{

        transform:translateY(-2px);

    }

    100%{

        transform:translateY(0);

    }

}
/* 信箱小旗动画 */

.px-love-mailbox.mailbox-open
.mailbox-flag{

    animation:
        mailboxFlagUp
        .8s
        steps(4,end);

}


@keyframes mailboxFlagUp{

    0%{

        transform:
            rotate(0deg);

    }

    35%{

        transform:
            rotate(-65deg);

    }

    70%{

        transform:
            rotate(-65deg);

    }

    100%{

        transform:
            rotate(0deg);

    }

}
/* =====================================
   像素情书弹窗
===================================== */

.pixel-letter-overlay{

    position:fixed;

    top:0;

    left:50%;

    transform:
        translateX(-50%);

    width:100%;

    max-width:430px;

    height:100vh;

    height:100dvh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    box-sizing:border-box;

    background:
        rgba(89,59,52,.32);

    z-index:9000;


    opacity:0;

    pointer-events:none;

    transition:
        opacity .2s ease;

}


.pixel-letter-overlay.show{

    opacity:1;

    pointer-events:auto;

}
/* =====================================
   情书主体
===================================== */

.pixel-letter-card{

    position:relative;

    width:100%;

    max-width:320px;

    padding:

        34px
        22px
        24px;

    background:#fff0d7;

    border:

        4px solid #785347;

    box-sizing:border-box;


    box-shadow:

        7px 0 0 #e69892,

        0 7px 0 #e69892,

        7px 7px 0 #b96869;


    color:#795648;

    text-align:center;


    animation:

        pixelLetterPop
        .25s
        steps(4,end);

}
@keyframes pixelLetterPop{

    0%{

        transform:
            scale(.82)
            translateY(15px);

    }

    50%{

        transform:
            scale(1.04)
            translateY(-3px);

    }

    100%{

        transform:
            scale(1)
            translateY(0);

    }

}
/* =====================================
   情书爱心邮票
===================================== */

.pixel-letter-stamp{

    position:absolute;

    top:10px;

    right:12px;

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e9828e;

    border:

        3px solid #795348;

    color:#fff1df;

    font-size:16px;

    font-family:monospace;

    box-shadow:

        3px 3px 0 #bc6570;

}
.pixel-letter-title{

    font-size:18px;

    font-weight:900;

    color:#b9616e;

    letter-spacing:1px;

    margin-bottom:12px;

}


.pixel-letter-line{

    font-family:monospace;

    color:#db9b91;

    font-size:13px;

    letter-spacing:3px;

    margin-bottom:24px;

}
/* 情书正文 */

.pixel-letter-text{

    min-height:88px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:

        14px
        8px;

    font-size:16px;

    font-weight:bold;

    line-height:1.9;

    color:#78574d;

}
.pixel-letter-text.letter-change{

    animation:

        loveTextChange
        .3s
        steps(4,end);

}


@keyframes loveTextChange{

    0%{

        opacity:0;

        transform:
            translateY(7px);

    }

    50%{

        opacity:1;

        transform:
            translateY(-2px);

    }

    100%{

        transform:
            translateY(0);

    }

}
.pixel-letter-sign{

    margin-top:8px;

    margin-bottom:24px;

    font-family:monospace;

    font-size:13px;

    font-weight:bold;

    letter-spacing:3px;

    color:#d37580;

}
/* =====================================
   情书按钮
===================================== */

.pixel-letter-buttons{

    display:flex;

    gap:10px;

}


.pixel-letter-buttons button{

    flex:1;

    height:42px;

    padding:0;

    border:

        3px solid #785347;

    border-radius:0;

    font-size:13px;

    font-weight:bold;

    cursor:pointer;

    appearance:none;

}
.pixel-letter-again{

    background:#ffd77b;

    color:#795347;

    box-shadow:

        3px 3px 0 #cfa355;

}
.pixel-letter-close{

    background:#eca0a7;

    color:#fff8e8;

    box-shadow:

        3px 3px 0 #be6c76;

}
.pixel-letter-buttons button:active{

    transform:
        translate(
            2px,
            2px
        );

    box-shadow:none;

}
/* =====================================
   像素草莓盆栽
===================================== */

.px-strawberry-pot{

    position:absolute;

    right:8%;

    bottom:13%;

    width:56px;

    height:70px;

    padding:0;

    margin:0;

    border:0;

    background:transparent;

    appearance:none;

    outline:none;

    cursor:pointer;

    z-index:10;

}
/* 花盆 */

.strawberry-pot-body{

    position:absolute;

    left:12px;

    bottom:0;

    width:34px;

    height:28px;

    background:#d98a68;

    border:4px solid #795247;

    box-sizing:border-box;

    clip-path:polygon(

        0 0,

        100% 0,

        84% 100%,

        16% 100%

    );

    box-shadow:

        inset 6px 0 0 #eda17a;

}
/* =====================================
   草莓叶子
===================================== */

.strawberry-leaf{

    position:absolute;

    width:19px;

    height:12px;

    background:#7ca66b;

    border:3px solid #55764e;

    box-sizing:border-box;

}


.leaf-left{

    left:5px;

    top:18px;

    transform:rotate(-28deg);

}

.leaf-middle{

    left:19px;

    top:10px;

    width:18px;

    height:15px;

}

.leaf-right{

    right:5px;

    top:21px;

    transform:rotate(25deg);

}
/* =====================================
   两颗像素草莓
===================================== */
/* =====================================
   更像草莓的像素果实
===================================== */

.pixel-berry{

    position:absolute;

    width:20px;

    height:24px;

    background:#e95665;

    border:3px solid #93404b;

    box-sizing:border-box;

    z-index:3;


    /* 草莓上宽下尖的轮廓 */

    clip-path:polygon(

        20% 0%,

        80% 0%,

        100% 22%,

        94% 50%,

        78% 73%,

        50% 100%,

        22% 73%,

        6% 50%,

        0% 22%

    );

}


/* =====================================
   草莓顶部绿色萼片
===================================== */

.pixel-berry::before{

    content:"";

    position:absolute;

    left:3px;

    top:-1px;

    width:8px;

    height:5px;

    background:#587f4c;

    box-shadow:

        -5px 2px 0 #6f9a5f,

        5px 2px 0 #6f9a5f,

        0 4px 0 #6f9a5f;

}


/* =====================================
   草莓籽
===================================== */

.pixel-berry::after{

    content:"";

    position:absolute;

    left:5px;

    top:7px;

    width:2px;

    height:2px;

    background:#ffd99b;

    box-shadow:

        6px 1px 0 #ffd99b,

        3px 5px 0 #ffd99b,

        -1px 8px 0 #ffd99b,

        7px 9px 0 #ffd99b,

        3px 13px 0 #ffd99b;

}


/* 左边大草莓 */

.berry-left{

    left:8px;

    top:29px;

    transform:rotate(-7deg);

}


/* 右边小草莓 */

.berry-right{

    right:6px;

    top:34px;

    transform:
        rotate(8deg)
        scale(.83);

}
/* 草莓果实轻微明暗层次 */

.berry-left{

    box-shadow:
        inset 4px 0 0 #f37478;

}


.berry-right{

    box-shadow:
        inset 3px 0 0 #f37478;

}

/* 草莓盆栽待机动画 */

.px-strawberry-pot{

    animation:

        strawberryIdle
        4.8s
        ease-in-out
        infinite;

}


@keyframes strawberryIdle{

    0%,
    82%,
    100%{

        transform:rotate(0deg);

    }


    88%{

        transform:rotate(-2deg);

    }


    94%{

        transform:rotate(2deg);

    }

}
/* 点击草莓后的动画 */

.px-strawberry-pot.strawberry-click{

    animation:

        strawberryJump
        .55s
        steps(6,end);

}


@keyframes strawberryJump{

    0%{

        transform:
            translateY(0)
            scale(1);

    }


    25%{

        transform:
            translateY(-9px)
            scale(1.05);

    }


    50%{

        transform:
            translateY(2px)
            scale(.97);

    }


    75%{

        transform:
            translateY(-4px)
            scale(1.02);

    }


    100%{

        transform:
            translateY(0)
            scale(1);

    }

}
/* =====================================
   草莓点击后的文字
===================================== */

.strawberry-score{

    position:absolute;

    transform:
        translateX(-50%);

    z-index:100;

    pointer-events:none;

    white-space:nowrap;

    font-family:monospace;

    font-size:13px;

    font-weight:900;

    color:#d8576b;

    text-shadow:

        2px 0 0 #fff0d9,

        -2px 0 0 #fff0d9,

        0 2px 0 #fff0d9,

        0 -2px 0 #fff0d9;

    animation:

        sweetScoreFly
        1.2s
        steps(8,end)
        forwards;

}


@keyframes sweetScoreFly{

    0%{

        opacity:0;

        transform:
            translateX(-50%)
            translateY(5px)
            scale(.7);

    }


    20%{

        opacity:1;

        transform:
            translateX(-50%)
            translateY(-3px)
            scale(1.1);

    }


    100%{

        opacity:0;

        transform:
            translateX(-50%)
            translateY(-42px)
            scale(1);

    }

}
/* =====================================
   草莓爱心粒子
===================================== */

.strawberry-heart{

    position:absolute;

    z-index:99;

    pointer-events:none;

    color:#ef7081;

    font-family:monospace;

    font-weight:bold;

    animation:

        strawberryHeartFly
        1.4s
        steps(10,end)
        forwards;

}


@keyframes strawberryHeartFly{

    0%{

        opacity:0;

        transform:
            translate(-50%,0)
            scale(.5);

    }


    15%{

        opacity:1;

    }


    100%{

        opacity:0;

        transform:
            translate(
                var(--heart-x),
                -65px
            )
            scale(1.15);

    }

}
/* =====================================
   像素小猫
===================================== */

.px-pixel-cat{

    position:absolute;

    left:calc(50% + 73px);

    bottom:19%;

    width:50px;

    height:58px;

    padding:0;

    margin:0;

    border:0;

    background:transparent;

    appearance:none;

    outline:none;

    cursor:pointer;
    pointer-events:auto;
    z-index:12;

}
/* =====================================
   猫身体
===================================== */

.cat-body{

    position:absolute;

    left:12px;

    bottom:5px;

    width:29px;

    height:31px;

    background:#a77b66;

    border:3px solid #65483e;

    box-sizing:border-box;

    box-shadow:

        inset 5px 0 0 #be9075;

}
/* 猫头 */

.cat-head{

    position:absolute;

    left:8px;

    top:7px;

    width:36px;

    height:30px;

    background:#ad816d;

    border:3px solid #65483e;

    box-sizing:border-box;

    z-index:3;

    box-shadow:

        inset 5px 0 0 #c29179;

}
/* =====================================
   猫耳朵
===================================== */

.cat-ear{

    position:absolute;

    top:-10px;

    width:13px;

    height:14px;

    background:#ad816d;

    border:3px solid #65483e;

    box-sizing:border-box;

}


/* 左耳 */

.cat-ear-left{

    left:-2px;

    clip-path:polygon(

        0 100%,

        25% 0,

        100% 100%

    );

}


/* 右耳 */

.cat-ear-right{

    right:-2px;

    clip-path:polygon(

        0 100%,

        75% 0,

        100% 100%

    );

}
.cat-ear::after{

    content:"";

    position:absolute;

    width:4px;

    height:5px;

    top:4px;

    background:#e9a0a1;

}


.cat-ear-left::after{

    left:4px;

}


.cat-ear-right::after{

    right:4px;

}
/* =====================================
   猫眼睛
===================================== */

.cat-eye{

    position:absolute;

    top:11px;

    width:4px;

    height:5px;

    background:#3e312d;

}


.cat-eye-left{

    left:7px;

}


.cat-eye-right{

    right:7px;

}
/* 猫鼻子 */

.cat-nose{

    position:absolute;

    left:50%;

    top:18px;

    transform:translateX(-50%);

    width:4px;

    height:3px;

    background:#df7f83;

}
/* =====================================
   猫爪
===================================== */

.cat-paw{

    position:absolute;

    bottom:-6px;

    width:9px;

    height:9px;

    background:#b88a72;

    border:

        3px solid #65483e;

    box-sizing:border-box;

}


.paw-left{

    left:1px;

}


.paw-right{

    right:1px;

}
/* =====================================
   猫尾巴
===================================== */

.cat-tail{

    position:absolute;

    right:0;

    bottom:12px;

    width:25px;

    height:9px;

    background:#a77b66;

    border:3px solid #65483e;

    box-sizing:border-box;

    transform:

        rotate(-25deg);

    transform-origin:

        left center;

    z-index:1;

}
/* 猫尾巴待机动画 */

.cat-tail{

    animation:

        pixelCatTail
        3.8s
        ease-in-out
        infinite;

}


@keyframes pixelCatTail{

    0%,
    72%,
    100%{

        transform:
            rotate(-25deg);

    }


    80%{

        transform:
            rotate(-5deg);

    }


    89%{

        transform:
            rotate(-38deg);

    }

}
/* =====================================
   猫眨眼
===================================== */

.cat-eye{

    animation:

        pixelCatBlink
        5s
        steps(1,end)
        infinite;

}


@keyframes pixelCatBlink{

    0%,
    46%,
    50%,
    100%{

        height:5px;

    }


    48%{

        height:1px;

        transform:
            translateY(2px);

    }

}

/* =====================================
   像素猫互动彩蛋
===================================== */


/* =====================
   猫开心的时候
===================== */

.px-pixel-cat.cat-happy .cat-tail{

    animation:
        catHappyTail
        .55s
        steps(6,end)
        2;

}


@keyframes catHappyTail{

    0%{

        transform:rotate(-25deg);

    }

    25%{

        transform:rotate(15deg);

    }

    50%{

        transform:rotate(-40deg);

    }

    75%{

        transform:rotate(12deg);

    }

    100%{

        transform:rotate(-25deg);

    }

}
/* =====================
   猫睡觉状态
===================== */

.px-pixel-cat.cat-sleeping{

    animation:none;

}


/* 身体稍微趴下来 */

.px-pixel-cat.cat-sleeping .cat-body{

    width:36px;

    height:23px;

    left:7px;

    bottom:4px;

}


/* 头稍微低下来 */

.px-pixel-cat.cat-sleeping .cat-head{

    transform:
        translateY(10px)
        rotate(-4deg);

}


/* 睡觉时闭眼 */

.px-pixel-cat.cat-sleeping .cat-eye{

    animation:none;

    height:2px;

    top:13px;

}


/* 睡着以后尾巴不甩了 */

.px-pixel-cat.cat-sleeping .cat-tail{

    animation:none;

    transform:rotate(-12deg);

}
/* =====================
   猫睡觉 Zzz
===================== */

.px-pixel-cat.cat-sleeping::after{

    content:"Z z z";

    position:absolute;

    left:35px;

    top:-13px;

    width:48px;

    color:#8e6585;

    font-family:monospace;

    font-size:11px;

    font-weight:bold;

    letter-spacing:1px;

    pointer-events:none;

    animation:
        catSleepZ
        1.6s
        steps(5,end)
        infinite;

}


@keyframes catSleepZ{

    0%{

        opacity:0;

        transform:translateY(4px);

    }

    35%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(-12px);

    }

}
/* =====================================
   猫彩蛋文字
===================================== */

.cat-message{

    position:absolute;

    z-index:200;

    pointer-events:none;

    white-space:nowrap;

    padding:7px 10px;

    background:#fff0d8;

    border:3px solid #765148;

    color:#a65d68;

    font-family:monospace;

    font-size:12px;

    font-weight:bold;

    box-shadow:
        3px 0 0 #e79a9d,
        0 3px 0 #e79a9d,
        3px 3px 0 #bd7479;

    animation:
        catMessagePop
        1.35s
        steps(8,end)
        forwards;

}


@keyframes catMessagePop{

    0%{

        opacity:0;

        transform:
            translate(-50%,8px)
            scale(.8);

    }

    18%{

        opacity:1;

        transform:
            translate(-50%,-3px)
            scale(1.05);

    }

    72%{

        opacity:1;

        transform:
            translate(-50%,-12px)
            scale(1);

    }

    100%{

        opacity:0;

        transform:
            translate(-50%,-24px)
            scale(.95);

    }

}
/* =====================================
   像素情侣主角
===================================== */

.pixel-couple-stage{

    position:absolute;

    inset:0;

    z-index:11;

    pointer-events:none;

}
/* =====================================
   两个人物共同结构
===================================== */

.couple-person{

    position:absolute;

    bottom:14%;

    width:52px;

    height:70px;

}
/* 俊 */

.couple-boy{
    left:82px;
    
}

/* 颖 */

.couple-girl{

    right:82px;

}
/* =====================================
   腿
===================================== */

.couple-leg{

    position:absolute;

    bottom:7px;

    width:8px;

    height:18px;

    border:
        3px solid #634940;

    box-sizing:border-box;

}


.couple-boy .couple-leg{

    background:#738a82;

}


.couple-girl .couple-leg{

    background:#f2c19f;

}


.couple-leg.leg-left{

    left:15px;

}


.couple-leg.leg-right{

    right:15px;

}
/* =====================================
   鞋
===================================== */

.couple-shoe{

    position:absolute;

    bottom:4px;

    width:11px;

    height:6px;

    border:
        3px solid #60473f;

    box-sizing:border-box;

    z-index:3;

}


.couple-boy .couple-shoe{

    background:#61564f;

}


.couple-girl .couple-shoe{

    background:#a85e69;

}


.couple-shoe.shoe-left{

    left:12px;

}


.couple-shoe.shoe-right{

    right:12px;

}
/* =====================================
   身体
===================================== */

.couple-body{

    position:absolute;

    left:13px;

    bottom:23px;

    width:26px;

    height:24px;

    border:
        3px solid #654940;

    box-sizing:border-box;

    z-index:3;

}


/* 俊的上衣 */

.couple-boy .couple-body{

    background:#a8b89c;

    box-shadow:

        inset 5px 0 0 #c0ccb2;

}
/* 颖的上衣 */

.couple-girl .couple-body{

    background:#e69aa5;

    box-shadow:

        inset 5px 0 0 #f1b4ba;

}
/* =====================================
   颖的小裙子
===================================== */

.couple-skirt{

    position:absolute;

    left:10px;

    bottom:19px;

    width:32px;

    height:16px;

    background:#d77f8d;

    border:
        3px solid #654940;

    box-sizing:border-box;

    clip-path:polygon(

        18% 0,

        82% 0,

        100% 100%,

        0 100%

    );

    z-index:4;

}
/* =====================================
   手臂
===================================== */

.couple-arm{

    position:absolute;

    bottom:25px;

    width:7px;

    height:21px;

    background:#f2c19f;

    border:
        3px solid #654940;

    box-sizing:border-box;

    z-index:2;

}


.couple-arm.arm-left{

    left:7px;

}


.couple-arm.arm-right{

    right:7px;

}
/* =====================================
   人物头部
===================================== */

.couple-head{

    position:absolute;

    left:12px;

    bottom:43px;

    width:28px;

    height:25px;

    background:#f2c19f;

    border:
        3px solid #654940;

    box-sizing:border-box;

    z-index:5;

}
/* =====================================
   俊的短发
===================================== */

.couple-boy .couple-hair{

    position:absolute;

    left:-3px;

    top:-4px;

    width:28px;

    height:10px;

    background:#58443d;

    border:
        3px solid #654940;

    box-sizing:border-box;

    z-index:2;

    box-shadow:

        4px 6px 0 #58443d,

        13px 5px 0 #58443d;

}
/* =====================================
   颖的长发
===================================== */

.couple-girl .couple-hair{

    position:absolute;

    left:-5px;

    top:-5px;

    width:32px;

    height:11px;

    background:#6b493f;

    border:
        3px solid #654940;

    box-sizing:border-box;

    z-index:2;

}


/* 左侧长发 */

.couple-girl .couple-hair::before{

    content:"";

    position:absolute;

    left:-3px;

    top:7px;

    width:7px;

    height:29px;

    background:#6b493f;

    border-left:
        3px solid #654940;

    border-bottom:
        3px solid #654940;

    box-sizing:border-box;

}


/* 右侧长发 */

.couple-girl .couple-hair::after{

    content:"";

    position:absolute;

    right:-3px;

    top:7px;

    width:7px;

    height:29px;

    background:#6b493f;

    border-right:
        3px solid #654940;

    border-bottom:
        3px solid #654940;

    box-sizing:border-box;

}
/* =====================================
   像素眼睛
===================================== */

.couple-eye{

    position:absolute;

    top:11px;

    width:3px;

    height:4px;

    background:#3f312d;

    z-index:5;

}


.couple-eye.eye-left{

    left:5px;

}


.couple-eye.eye-right{

    right:5px;

}
/* =====================================
   小嘴巴
===================================== */

.couple-mouth{

    position:absolute;

    left:50%;

    bottom:3px;

    transform:
        translateX(-50%);

    width:5px;

    height:2px;

    background:#cd7779;

    z-index:5;

}
/* =====================================
   颖的小腮红
===================================== */

.couple-girl .couple-head::after{

    content:"";

    position:absolute;

    left:2px;

    top:16px;

    width:3px;

    height:2px;

    background:#e99b98;

    box-shadow:

        15px 0 0 #e99b98;

}
/* =====================================
   像素情侣进场动画
===================================== */

/* 先让两个人默认可见 */
.couple-person{
    opacity:1;
}


/* =========================
   进场前的初始位置
========================= */

.couple-boy{
    left:20px;
}

.couple-girl{
    right:20px;
}


/* =========================
   开始走路时：左右进入中间
========================= */

.couple-boy.enter-walk{
    animation: boyWalkIn 2.4s steps(12, end) forwards;
}

.couple-girl.enter-walk{
    animation: girlWalkIn 2.4s steps(12, end) forwards;
}


/* 俊从左边走到中间偏左 */
@keyframes boyWalkIn{
    0%{
        left:20px;
    }

    100%{
        left:calc(50% - 66px);
    }
}


/* 颖从右边走到中间偏右 */
@keyframes girlWalkIn{
    0%{
        right:20px;
    }

    100%{
        right:calc(50% - 66px);
    }
}


/* =========================
   走路时的身体轻微上下起伏
========================= */

.couple-person.walking .couple-head,
.couple-person.walking .couple-body,
.couple-person.walking .couple-arm,
.couple-person.walking .couple-skirt{
    animation: coupleBob 0.34s steps(2, end) infinite;
}

@keyframes coupleBob{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-2px);
    }

    100%{
        transform:translateY(0);
    }
}


/* =========================
   腿的交替动作
========================= */

.couple-person.walking .leg-left{
    animation: walkLegLeft 0.34s steps(2, end) infinite;
}

.couple-person.walking .leg-right{
    animation: walkLegRight 0.34s steps(2, end) infinite;
}

@keyframes walkLegLeft{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-2px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes walkLegRight{
    0%{
        transform:translateY(-2px);
    }

    50%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-2px);
    }
}


/* =========================
   鞋子也跟着交替一点点
========================= */

.couple-person.walking .shoe-left{
    animation: walkShoeLeft 0.34s steps(2, end) infinite;
}

.couple-person.walking .shoe-right{
    animation: walkShoeRight 0.34s steps(2, end) infinite;
}

@keyframes walkShoeLeft{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-2px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes walkShoeRight{
    0%{
        transform:translateY(-2px);
    }

    50%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-2px);
    }
}


/* =========================
   到达中间后保持位置
========================= */

.couple-boy.arrived{
    left:calc(50% - 66px);
}

.couple-girl.arrived{
    right:calc(50% - 66px);
}
/* =====================================
   像素情侣：拥抱前靠近一步
===================================== */

.couple-boy.hug-close{

    animation:
        boyHugClose
        .55s
        steps(5,end)
        forwards;

}


.couple-girl.hug-close{

    animation:
        girlHugClose
        .55s
        steps(5,end)
        forwards;

}
/* 俊向右靠近颖 */

@keyframes boyHugClose{

    0%{

        left:
            calc(50% - 66px);

    }


    100%{

        left:
            calc(50% - 44px);

    }

}


/* 颖向左靠近俊 */

@keyframes girlHugClose{

    0%{

        right:
            calc(50% - 66px);

    }


    100%{

        right:
            calc(50% - 50x);

    }

}
/* =====================================
   拥抱时头靠向彼此
===================================== */

.couple-boy.hugging .couple-head{

    animation:
        boyHeadHug
        .4s
        steps(4,end)
        forwards;

}


.couple-girl.hugging .couple-head{

    animation:
        girlHeadHug
        .4s
        steps(4,end)
        forwards;

}
@keyframes boyHeadHug{

    0%{

        transform:
            translate(0,0)
            rotate(0deg);

    }


    100%{

        transform:
            translate(4px,1px)
            rotate(3deg);

    }

}

@keyframes girlHeadHug{

    0%{

        transform:
            translate(0,0)
            rotate(0deg);

    }


    100%{

        transform:
            translate(-4px,1px)
            rotate(-3deg);

    }

}/* =====================================
   新版拥抱手臂
   俊抱肩 + 颖抱腰
===================================== */

.couple-person.hugging .couple-arm{

    transform-origin:
        50% 12%;

}


/* =====================================
   俊：右手搭向颖的肩膀
===================================== */

.couple-boy.hugging .arm-right{

    z-index:8;

    animation:
        boyArmAroundShoulder
        .45s
        steps(4,end)
        forwards;

}


@keyframes boyArmAroundShoulder{

    0%{

        transform:
            translate(0,0)
            rotate(0deg);

    }


    100%{

        transform:
            translate(5px,-4px)
            rotate(-72deg)
            scaleY(1.08);

    }

}
/* =====================================
   俊：另一只手藏到身体后面
===================================== */

.couple-boy.hugging .arm-left{

    z-index:1;

    animation:
        boyBackArm
        .35s
        steps(3,end)
        forwards;

}


@keyframes boyBackArm{

    0%{

        transform:
            translate(0,0);

    }


    100%{

        transform:
            translate(5px,3px)
            rotate(-8deg);

    }

}
/* =====================================
   颖：左手抱俊的腰
===================================== */

.couple-girl.hugging .arm-left{

    z-index:8;

    animation:
        girlArmAroundWaist
        .45s
        steps(4,end)
        forwards;

}


@keyframes girlArmAroundWaist{

    0%{

        transform:
            translate(0,0)
            rotate(0deg);

    }


    100%{

        transform:
            translate(-5px,7px)
            rotate(67deg)
            scaleY(1.05);

    }

}
/* =====================================
   颖：另一只手藏到身后
===================================== */

.couple-girl.hugging .arm-right{

    z-index:1;

    animation:
        girlBackArm
        .35s
        steps(3,end)
        forwards;

}


@keyframes girlBackArm{

    0%{

        transform:
            translate(0,0);

    }


    100%{

        transform:
            translate(-5px,3px)
            rotate(8deg);

    }

}

/* =====================================
   拥抱时身体轻轻贴近
===================================== */

.couple-boy.hugging .couple-body{

    transform:
        translateX(2px);

}


.couple-girl.hugging .couple-body,
.couple-girl.hugging .couple-skirt{

    transform:
        translateX(-2px);

}
/* =====================================
   拥抱时肩膀稍微靠近
===================================== */

.couple-boy.hugging .couple-body{

    transform:
        translateX(1px);

}


.couple-girl.hugging .couple-body{

    transform:
        translateX(-1px);

}


.couple-girl.hugging .couple-skirt{

    transform:
        translateX(-1px);

}
/* =====================================
   修正：拥抱前两个人同时往前走
===================================== */

/* 俊往右走一步 */

.couple-boy.hug-close{

    animation:
        boyStepCloser
        .55s
        steps(5,end)
        forwards;

}


/* 颖往左走一步 */

.couple-girl.hug-close{

    animation:
        girlStepCloser
        .55s
        steps(5,end)
        forwards;

}


@keyframes boyStepCloser{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(22px);
    }

}


@keyframes girlStepCloser{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-22px);
    }

}
/* =====================================
   修正拥抱手臂
   不再使用伪元素
===================================== */


/* 两个人真正的手全部允许显示 */

.couple-boy .couple-arm,
.couple-girl .couple-arm{

    opacity:1;

}


/* =====================================
   俊：右手伸向颖
===================================== */


 .couple-boy.hugging .arm-right{
    z-index: 20;
    transform-origin: top center;
    animation: boyRealHugArm .45s steps(4,end) forwards;
}

@keyframes boyRealHugArm{
    0%{
        transform: translate(0,0) rotate(0deg) scaleY(1);
    }

    100%{
        transform: translate(13px,6px) rotate(-72deg) scaleY(1.45);
    }
}
/* 俊左手不要消失 */

.couple-boy.hugging .arm-left{

    z-index:4;

    animation:none;

    transform:
        translate(0,0)
        rotate(0deg);

}
/* =====================================
   颖：左手回应俊
===================================== */

.couple-girl.hugging .arm-left{

    opacity:1;

    z-index:10;

    animation:
        girlRealHugArm
        .45s
        steps(4,end)
        forwards;

}


@keyframes girlRealHugArm{

    0%{

        transform:
            translate(0,0)
            rotate(0deg);

    }

    100%{

        transform:
            translate(-6px,4px)
            rotate(58deg)
            scaleY(1.18);

    }

}
/* 颖右手自然放着 */

.couple-girl.hugging .arm-right{

    opacity:1;

    z-index:4;

    animation:none;

    transform:
        translate(0,0)
        rotate(0deg);

}
/* =====================================
   确保头发不会被手臂盖住
===================================== */

.couple-head{

    z-index:12;

}


.couple-hair{

    z-index:13 !important;

}


.couple-eye,
.couple-mouth{

    z-index:14;

}
/* =====================================
   像素情侣：亲亲
===================================== */


/* 俊的头再靠近一点 */

.couple-boy.kissing .couple-head{

    animation:
        boyKissHead
        .4s
        steps(4,end)
        forwards;

}


/* 颖的头再靠近一点 */

.couple-girl.kissing .couple-head{

    animation:
        girlKissHead
        .4s
        steps(4,end)
        forwards;

}
@keyframes boyKissHead{

    0%{

        transform:
            translate(4px,1px)
            rotate(3deg);

    }


    100%{

        transform:
            translate(7px,1px)
            rotate(4deg);

    }

}
@keyframes girlKissHead{

    0%{

        transform:
            translate(-4px,1px)
            rotate(-3deg);

    }


    100%{

        transform:
            translate(-7px,1px)
            rotate(-4deg);

    }

}
/* =====================================
   接吻时闭眼
===================================== */

.couple-person.kissing .couple-eye{

    animation:none;

    height:2px;

    top:13px;

}
/* 接吻时嘴巴变成一个小像素点 */

.couple-person.kissing .couple-mouth{

    width:3px;

    height:3px;

    bottom:3px;

    background:#d56f78;

}
/* =====================================
   接吻爱心
===================================== */
/* =====================================
   接吻结尾：爱的厨房
===================================== */

.love-kitchen-overlay{

    position:absolute;

    inset:0;

    z-index:500;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

}


/* =====================================
   巨型爱心
===================================== */

.giant-love-heart{

    position:absolute;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%)
        scale(.05);

    font-family:monospace;

    font-size:380px;

    line-height:.85;

    color:#ed7180;

    opacity:0;

    pointer-events:none;

    text-shadow:
        7px 0 0 #d95e70,
        -7px 0 0 #f49aa3,
        0 7px 0 #c95164,
        7px 7px 0 #b84b5d;

}


/* 巨型爱心开始放大 */

.love-kitchen-overlay.show
.giant-love-heart{

    animation:
        giantHeartGrow
        1.15s
        steps(10,end)
        forwards;

}


@keyframes giantHeartGrow{

    0%{

        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(.05);

    }


    20%{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(.2);

    }


    50%{

        transform:
            translate(-50%,-50%)
            scale(.55);

    }


    80%{

        transform:
            translate(-50%,-50%)
            scale(1.08);

    }


    100%{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1);

    }

}
/* =====================================
   爱的厨房提问框
===================================== */

.love-kitchen-question{

    position:relative;

    z-index:20;

    width:280px;

    padding:24px 20px 20px;

    background:#fff1db;

    border:4px solid #775149;

    text-align:center;

    box-sizing:border-box;

    opacity:0;

    transform:
        translateY(18px)
        scale(.75);

    pointer-events:none;

    box-shadow:
        6px 0 0 #d86173,
        0 6px 0 #d86173,
        6px 6px 0 #a94d5c;

}
/* 大爱心出现以后，对话框再弹出来 */

.love-kitchen-overlay.show
.love-kitchen-question{

    animation:
        loveQuestionAppear
        .5s
        steps(5,end)
        .85s
        forwards;

}


@keyframes loveQuestionAppear{

    0%{

        opacity:0;

        transform:
            translateY(18px)
            scale(.75);

    }

    60%{

        opacity:1;

        transform:
            translateY(-4px)
            scale(1.05);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        pointer-events:auto;

    }

}
/* W ♥ C */

.love-question-small{

    font-family:monospace;

    font-size:12px;

    font-weight:900;

    letter-spacing:4px;

    color:#d86f7d;

    margin-bottom:12px;

}


/* 是否进入爱的厨房？ */

.love-question-title{

    font-size:20px;

    font-weight:900;

    color:#795249;

    margin-bottom:12px;

}


/* 小情话 */

.love-question-text{

    font-size:13px;

    font-weight:bold;

    line-height:1.8;

    color:#a97468;

    margin-bottom:18px;

}
/* =====================================
   当然要按钮
===================================== */

.enter-love-kitchen{

    width:100%;

    height:46px;

    border:3px solid #775149;

    border-radius:0;

    background:#ffd878;

    color:#775149;

    font-size:15px;

    font-weight:900;

    cursor:pointer;

    box-shadow:
        4px 0 0 #ca994d,
        0 4px 0 #ca994d,
        4px 4px 0 #9f733e;

}


.enter-love-kitchen:active{

    transform:
        translate(3px,3px);

    box-shadow:none;

}
/* =====================================
   最终调整：信箱 / 草莓 / 小猫位置
===================================== */


/* 爱情信箱：移动到左下角 */

.px-love-mailbox{

    left:5% !important;

    bottom:6% !important;

}


/* 草莓：往下面移动 */

.px-strawberry-pot{

    right:7% !important;

    bottom:6% !important;

}


/* 小猫：移动到右边树下 */

.px-pixel-cat{

    left:auto !important;

    right:2% !important;

    bottom:23% !important;

}
/* =====================================
   菜品翻页
===================================== */

.food-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:28px;

    margin-bottom:25px;

}


.food-pagination button{

    border:none;

    background:#f8d36b;

    color:#795a43;

    padding:10px 14px;

    border-radius:18px;

    font-size:13px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:
        0 4px 10px
        rgba(0,0,0,.08);

}


.food-pagination button:active{

    transform:translateY(2px);

    box-shadow:
        0 2px 5px
        rgba(0,0,0,.08);

}


.food-pagination button:disabled{

    opacity:.35;

    cursor:default;

}


.food-pagination span{

    color:#9b7260;

    font-size:13px;

    font-weight:bold;

    white-space:nowrap;

}