* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
body {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d9afd9;
    background-image: linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%);
    overflow: hidden;
}

/* === 原有样式部分 === */
.card {
    width: 700px;
    height: 300px;
    background-color: #f5efe6;
    color: #334756;
    box-shadow: 0px 0px 22px 5px rgb(237, 237, 237);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 2.5em;
    font-family: '楷体';
    position: relative; 
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(23deg);
}
.card::before,
.card::after {
    content: '写给你的';
    width: 50%;
    height: 100%;
    color: #b7c4cf;
    font-size: 40px;
    position: absolute;
    font-family: '华文行楷';
    display: flex;
    align-items: center;
    transition: 2s;
    background-color: #f5efe6; 
    z-index: 1;
}
.card::before {
    left: 0;
    top: 0;
    justify-content: flex-end;
    transform-origin: left;
}
.card::after {
    content: '一封书信';
    right: 0;
    top: 0;
    justify-content: flex-start;
    transform-origin: right;
}
.card:hover::before { transform: rotateY(-180deg); }
.card:hover::after { transform: rotateY(180deg); }
.content {
    opacity: 0;
    transition: 2s;
    z-index: 2;
}
.card:hover .content { opacity: 1; }
@keyframes change { 30% { transform: rotate(45deg) scale(1.1) translateX(-70%); } 40% { transform: rotate(45deg) scale(1.3) translateX(-70%); } 45% { transform: rotate(45deg) scale(0.9) translateX(-70%); } 50% { transform: rotate(45deg) scale(0.5) translateX(-70%); } 70% { transform: rotate(45deg) scale(1) translateX(-70%); } 80% { transform: rotate(45deg) scale(1.5) translateX(-70%); } 90% { transform: rotate(45deg) scale(0.7) translateX(-70%); } 95% { transform: rotate(45deg) scale(1.5) translateX(-70%); } 100% { transform: rotate(45deg) scale(1.1) translateX(-70%); } }
.heart { position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; background-color: pink; transform: rotate(45deg) translateX(-70%); animation-name: change; animation-duration: 2.7s; animation-iteration-count: infinite; cursor: pointer; }
.heart::before, .heart::after { content: ''; width: 50px; height: 50px; border-radius: 50%; background-color: pink; position: absolute; }
.heart::before { transform: translateX(-25px); }
.heart::after { transform: translateY(-25px); }
.text { color: #7D6E83; margin-top: 45px; font-family: '华文行楷'; }
.textTwo { color: #7D6E83; font-weight: bold; font-size: 25px; margin-top: 30px; }

/* === Bug修复部分 === */
#box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -200;
    opacity: 0;
    color: #00ffd1;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 13vh;
    /* --- 修改开始 --- */
    width: 100vw;  /* 原来是 90vw */
    height: 100vh; /* 原来是 87vh */
    /* --- 修改结束 --- */
    text-align: center;
    background-image: url('bac.jpg');
    overflow: hidden;
    background-size: cover;
    font-size: 25px;
    font-family: '华文行楷';
    transition: opacity 7s;
}

/* === 糖果机样式 (保持不变) === */
.candy-machine {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 100px;
    height: 150px;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.machine-top {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.4);
    border: 3px solid #d63031;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
.candy-container { position: relative; width: 100%; height: 100%; }
.candy { position: absolute; width: 15px; height: 15px; background-color: var(--candy-color, #ff7979); border-radius: 50%; box-shadow: inset -2px -2px 3px rgba(0,0,0,0.2); }
.candy:nth-child(1) { top: 25%; left: 30%; }
.candy:nth-child(2) { top: 50%; left: 60%; }
.candy:nth-child(3) { top: 65%; left: 25%; }
.candy:nth-child(4) { top: 30%; left: 65%; }
.candy:nth-child(5) { top: 60%; left: 50%; }
.machine-middle { width: 50px; height: 35px; background: #d63031; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position: relative; display: flex; justify-content: center; padding-top: 5px; z-index: 5; }
.button { width: 25px; height: 25px; background: #ff4757; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; border: 2px solid #b32a2a; }
.button:active { transform: scale(0.9); }
.machine-base { width: 60px; height: 35px; background: #d63031; border-top: 3px solid #b2bec3; display: flex; justify-content: center; position: relative; }
.dispenser-tray { width: 45px; height: 15px; background: #636e72; position: absolute; bottom: 5px; border-radius: 3px 3px 0 0; box-shadow: inset 0 2px 3px rgba(0,0,0,0.4); }
@keyframes dispense-animation { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(2px, 90px); opacity: 1; } }
.dispensing { z-index: 10; animation: dispense-animation 1.2s ease-in-out forwards; }