:root {
    --primary-red: #ff4d4d;
    --deep-red: #c40000;
    --gold: #ffd700;
    --soft-white: #fffafa;
    --dark-brown: #4c3030;
    --shadow: 0 10px 30px rgba(0,0,0,0.1);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    /* 调暗背景渐变，并固定背景防止拉伸导致的颜色不一 */
    background: linear-gradient(135deg, #fceef0 0%, #f9dadd 100%) fixed; 
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    overflow: hidden;
    width: 100%;
}

/* 装饰层 (移至内容背面) */
#snow-container, #decoration-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* 位于 body 之上，主内容之下 */
}

.snowflake {
    position: absolute;
    color: white;
    user-select: none;
    pointer-events: none;
}

.floating-emoji {
    position: absolute;
    opacity: 0.95; /* 确保在背面也足够清晰 */
    user-select: none;
    animation: floatAround 6s ease-in-out infinite;
    z-index: 5;
}

/* 遮罩层 (位于装饰层和主内容之间) */
#modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 245, 245, 0.3); /* 改为半透明背景，不使用毛玻璃滤镜 */
    /* 移除 backdrop-filter 以确保背面的 Emoji 100% 清晰 */
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

#modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* 主内容区域 (礼物) */
.main-content {
    position: relative;
    z-index: 50; /* 位于背景之上，遮罩之下 */
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gift-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin-top: 120px; /* 整体再往下移 */
    text-align: center;
}

#gift-content.hidden {
    display: none;
}

/* 恶搞同步震动容器 */
.shake-animation {
    animation: prankShake 0.4s infinite;
}

.gift-wrapper {
    position: relative;
    padding: 15px;
    background: white;
    border-radius: 25px;
    border: 6px solid var(--soft-white);
    width: 100%;
}

#gift-img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

.prank-subtitle {
    margin-top: 30px;
    font-size: 24px;
    color: var(--deep-red);
    font-weight: 900;
    background: white;
    padding: 15px 30px;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: inline-block;
}

.reopen-hint {
    margin-top: 30px;
    color: #888;
    font-size: 14px;
}

/* 弹窗内容容器 (最高层) */
#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* 穿透点击 */
    z-index: 200;
}

.modal {
    background: white;
    padding: 30px 25px; /* 缩小高度 */
    border-radius: 45px;
    text-align: center;
    max-width: 320px;
    width: 85%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto; /* 恢复点击 */
    
    /* 增强入场动效 */
    transform: translateY(150px) rotate(-10deg) scale(0.3);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1.2);
    box-shadow: 0 40px 100px rgba(255, 77, 77, 0.2);
    border: 8px solid var(--soft-white);
}

#modal-backdrop.active + .main-content + #modal-container .modal {
    transform: translateY(0) rotate(0) scale(1);
    opacity: 1;
}

.santa-no-circle {
    width: 120px;
    height: 120px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: advancedFloat 3s ease-in-out infinite;
}

.santa-icon {
    width: 100%;
    height: 100%;
}

.kawaii-title {
    color: var(--deep-red);
    font-size: 24px;
    margin: 10px 0;
    font-weight: 900;
}

.modal-text {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 25px;
    padding: 0 10px;
}

.candy-btn {
    background: linear-gradient(45deg, #ff4d4d, #ff7675);
    color: white;
    border: none;
    padding: 14px 35px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(255, 77, 77, 0.35);
    transition: all 0.3s ease;
}

.candy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(255, 77, 77, 0.45);
}

/* 动画定义 */
@keyframes prankShake {
    0% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(-6px, 5px) rotate(-1.5deg); }
    50% { transform: translate(6px, -5px) rotate(1.5deg); }
    75% { transform: translate(-6px, -5px) rotate(-1.5deg); }
    100% { transform: translate(6px, 5px) rotate(1.5deg); }
}

@keyframes floatAround {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, 30px); }
}

@keyframes advancedFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.05); }
}

@keyframes snow {
    0% { transform: translateY(-10vh); }
    100% { transform: translateY(110vh); }
}

/* 弹窗装饰 */
.deco-gift, .deco-tree { position: absolute; font-size: 24px; pointer-events: none; }
.deco-pos-1 { top: 15px; left: 15px; transform: rotate(-15deg); }
.deco-pos-2 { bottom: 10px; left: 10px; transform: rotate(-15deg); z-index: -1; } /* 移至底层并靠边，防止遮挡按钮 */
.deco-pos-3 { top: 30px; right: 20px; transform: rotate(15deg); font-size: 20px; }

@media (max-width: 480px) {
    #gift-content { margin-top: 100px; }
    .prank-subtitle { font-size: 20px; padding: 12px 25px; }
}

/* --- 右下角透明小球 --- */
#float-balls {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: none; /* 初始隐藏 */
    flex-direction: column;
    gap: 15px;
    z-index: 10000;
}

#float-balls.show {
    display: flex;
}

.float-ball {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
}

.float-ball span {
    color: #000000; /* 修改为黑色 */
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.float-ball:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* 小球出现动画 */
@keyframes ball-appear {
    0% {
        opacity: 0;
        transform: scale(0) translateX(50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

#float-balls.show .float-ball {
    animation: ball-appear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#float-balls.show .float-ball:nth-child(2) {
    animation-delay: 0.15s;
}

@media (max-width: 640px) {
    #float-balls {
        right: 20px;
        bottom: 20px;
        gap: 10px;
    }
    .float-ball {
        width: 40px;
        height: 40px;
    }
}