:root {
    --pink: #ff758c;
    --dark-pink: #ff4b6b;
    --env-color: #ffffff;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background: #fce4ec;
    display: flex; justify-content: center; align-items: center;
    font-family: 'STHeiti', 'Microsoft YaHei', sans-serif;
    overflow: hidden;
}

#scene {
    position: relative;
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
}

/* 信封样式 */
.envelope-wrapper {
    position: relative;
    width: 320px; height: 200px;
    z-index: 100;
    transition: all 0.8s ease;
    cursor: pointer;
}

.envelope {
    position: relative;
    width: 100%; height: 100%;
    background: var(--env-color);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.flap {
    position: absolute; top: 0; left: 0;
    width: 0; height: 0;
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    border-top: 110px solid #f3f3f3;
    transform-origin: top;
    transition: transform 0.5s ease;
    z-index: 3;
}

.pocket {
    position: absolute; bottom: 0; width: 0; height: 0;
    border-left: 160px solid #f9f9f9;
    border-right: 160px solid #f9f9f9;
    border-top: 100px solid transparent;
    border-bottom: 100px solid #eee;
    border-radius: 0 0 10px 10px;
    z-index: 2;
}

.hint {
    position: absolute; bottom: -50px; width: 100%; text-align: center;
    color: var(--dark-pink); font-size: 0.9rem; animation: blink 1.5s infinite;
}

/* 信件卡片样式 */
.card {
    position: absolute;
    width: 350px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    display: none;
    text-align: center;
}

/* 状态切换类 */
.open-flap .flap { transform: rotateX(180deg); }
.fade-out { opacity: 0; transform: scale(0.5); pointer-events: none; }
.card-show { display: block; opacity: 1; transform: scale(1); z-index: 200; }

h2 { color: var(--dark-pink); margin: 0 0 20px 0; font-size: 1.5rem; }
.text { color: #444; line-height: 1.8; font-size: 1.05rem; text-align: left; }

.btn-group { margin-top: 30px; display: flex; justify-content: space-around; position: relative; height: 50px;}
button { padding: 12px 30px; border-radius: 25px; border: none; cursor: pointer; font-weight: bold; transition: 0.3s; }
#yes-btn { background: var(--pink); color: white; box-shadow: 0 5px 15px rgba(255,117,140,0.3); }
#no-btn { background: #eee; color: #999; position: absolute; left: 55%; }

@keyframes blink { 50% { opacity: 0.2; } }
.heart-rain { position: absolute; color: var(--pink); pointer-events: none; z-index: 999; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity: 0; } }