/* ============================================================
   💕 全屏浪漫告白样式（confess.css）
   由 confess.js 注入的告白层使用
   ============================================================ */

/* ===== 全屏遮罩层（默认隐藏）===== */
#confessOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;  /* 默认隐藏，由 JS 控制显示 */
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #c4b5fd, #ff9a9e);
    background-size: 400% 400%;
    animation: confessGradient 12s ease infinite;
}

/* 只有在添加 .show 类时才显示 */
#confessOverlay.show {
    display: flex;  /* 显示遮罩层 */
}

@keyframes confessGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== 背景漂浮爱心 ===== */
.confess-bg-heart {
    position: absolute;
    bottom: -40px;
    font-size: 24px;
    opacity: 0;
    pointer-events: none;
    animation: confessFloatUp linear forwards;
}
@keyframes confessFloatUp {
    0%   { opacity: 0; transform: translateY(0) scale(0.6) rotate(0deg); }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-105vh) scale(1.2) rotate(30deg); }
}

/* ===== 告白卡片 ===== */
.confess-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 38px 30px 34px;
    border-radius: 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.96);  /* 提高不透明度 */
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(180, 80, 130, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.7);
    /* 默认就显示，不需要 .show 状态 */
}
/* 增强卡片阴影效果 */
#confessOverlay .confess-card {
    box-shadow: 0 20px 60px rgba(180, 80, 130, 0.4), 0 0 40px rgba(255, 154, 158, 0.3);
}
/* 卡片滚动条美化 */
.confess-card::-webkit-scrollbar { width: 6px; }
.confess-card::-webkit-scrollbar-thumb { background: rgba(244,143,177,0.5); border-radius: 3px; }

/* ===== 顶部爱心 ===== */
.confess-emoji {
    font-size: 64px;
    animation: confessHeartbeat 1.2s ease-in-out infinite;
}
@keyframes confessHeartbeat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.18); }
    50%      { transform: scale(0.95); }
    75%      { transform: scale(1.1); }
}

/* ===== 标题 ===== */
.confess-title {
    margin: 16px 0 22px;
    font-size: 23px;
    font-weight: bold;
    line-height: 1.5;
    color: #c2185b;
    letter-spacing: 1px;
}

/* ===== 表白正文 ===== */
.confess-text {
    text-align: left;
    font-size: 15.5px;
    line-height: 1.8;  /* 从 2 改为 1.8，减小段落间距 */
    color: #8e4a6e;
}
.confess-text p {
    margin: 0 0 10px;  /* 从 14px 改为 10px，减小段间距 */
    opacity: 0;
    transform: translateY(12px);
    animation: confessFadeIn 0.7s ease forwards;
}
@keyframes confessFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== 提问 ===== */
.confess-question {
    margin: 26px 0 24px;
    font-size: 21px;
    font-weight: bold;
    color: #d81b60;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(216, 27, 96, 0.15);
}

/* ===== 按钮区 ===== */
.confess-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 56px;
}
.confess-yes {
    padding: 15px 46px;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #ff6b9d, #c44bd8);
    box-shadow: 0 8px 26px rgba(216, 27, 96, 0.4);
    transition: box-shadow 0.25s ease;
    animation: confessGlow 1.8s ease-in-out infinite;
}
@keyframes confessGlow {
    0%, 100% { box-shadow: 0 8px 26px rgba(216, 27, 96, 0.4); }
    50%      { box-shadow: 0 8px 42px rgba(216, 27, 96, 0.75); }
}
.confess-yes:hover { box-shadow: 0 12px 42px rgba(216, 27, 96, 0.7); }

.confess-think {
    padding: 13px 30px;
    border: 1.5px solid #f48fb1;
    border-radius: 50px;
    font-size: 15px;
    color: #c26a8f;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

/* ===== 调皮提示 ===== */
.confess-tease {
    margin-top: 16px;
    font-size: 14px;
    color: #e91e63;
    min-height: 20px;
    transition: opacity 0.3s;
}

/* ===== 答应后的结果 ===== */
.confess-result {
    display: none;
    margin-top: 8px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.8;
    color: #d81b60;
    animation: confessFadeIn 0.8s ease forwards;
}
.confess-result.show { display: block; }
.confess-result .big-heart {
    display: block;
    font-size: 70px;
    margin-bottom: 12px;
    animation: confessHeartbeat 1s ease-in-out infinite;
}

/* ===== 点击/答应 爱心雨 ===== */
.confess-rain-heart {
    position: fixed;
    top: -40px;
    z-index: 100000;
    pointer-events: none;
    animation: confessRainFall linear forwards;
}
@keyframes confessRainFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(110vh) rotate(360deg); }
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .confess-card { padding: 30px 22px 28px; border-radius: 22px; }
    .confess-emoji { font-size: 52px; }
    .confess-title { font-size: 20px; }
    .confess-text { font-size: 15px; }
    .confess-question { font-size: 19px; }
    .confess-yes { padding: 14px 40px; font-size: 17px; }
}