/* ==========================================
   微信H5生日惊喜 V3.5 (无音乐版) 样式表
   ========================================== */

/* ==========================================
   使用系统内置字体，无需下载任何外部字体文件
   微信/手机浏览器秒开，零阻塞
   iOS: PingFang SC (苹方)
   Android: Noto Sans SC / 系统默认
   Windows: Microsoft YaHei (微软雅黑)
   ========================================== */

/* 全局基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body, html, input, textarea, select, button {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'STKaiti', 'KaiTi', sans-serif;
}

body {
    background: radial-gradient(circle at 50% 100%, #301736 0%, #150d26 50%, #06020f 100%);
    color: #f8f9fa;
    user-select: none;
}

/* 背景星光 Canvas */
#star-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 全屏烟花 Canvas */
#fireworks-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    pointer-events: none;
    display: none;
}

/* 烛光背景滤镜（摇曳暗影） */
#candle-glow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 183, 3, 0.16) 0%, rgba(255, 183, 3, 0) 80%);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 1s ease;
}

#candle-glow-overlay.active {
    opacity: 1;
    animation: candleFlickerBg 2.5s infinite alternate ease-in-out;
}

@keyframes candleFlickerBg {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* 霓虹发光字效 */
.text-glow {
    text-shadow: 0 0 8px rgba(255, 117, 143, 0.7), 0 0 20px rgba(255, 117, 143, 0.35);
}

.text-glow-light {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* 艺术字标题与核心交互控件样式 */
.lock-title,
.title-love,
.cards-title,
.scene-title,
.paper-title,
.btn-primary,
.btn-secondary,
.success-card h3,
.wish-wrapper h2 {
    font-family: 'STKaiti', 'KaiTi', '楷体', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', cursive, sans-serif !important;
}

/* 场景容器基础 */
.scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.97) translateY(10px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.scene.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    z-index: 10;
}

/* 微光毛玻璃卡片 */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    padding: 35px 24px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 
                0 0 20px rgba(255, 112, 150, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    transition: padding 0.5s ease, max-height 0.5s ease;
}

/* 发光按钮 */
.btn-primary {
    background: linear-gradient(135deg, #ff758f 0%, #ff85a1 50%, #f72585 100%);
    border: none;
    outline: none;
    color: white;
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(247, 37, 133, 0.4), 
                inset 0 0 10px rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 80%;
    max-width: 220px;
}

.btn-primary:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(247, 37, 133, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffccd5;
    padding: 10px 22px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

.btn-secondary:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

.pulse {
    animation: breathing 2s infinite ease-in-out;
}

@keyframes breathing {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(247, 37, 133, 0.4); }
    50% { transform: scale(1.04); box-shadow: 0 6px 28px rgba(247, 37, 133, 0.6); }
}

/* --- 场景一：首页水晶球解锁 --- */
#crystal-lock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 10;
}

.lock-title {
    font-size: 24px;
    font-weight: 700;
    color: #ff85a1;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.lock-desc {
    font-size: 12px;
    color: #b0a9be;
    margin-bottom: 30px;
    text-align: center;
}

/* 水晶球容器与霓虹光晕 */
#crystal-ball-wrapper {
    position: relative;
    width: 160px;
    height: 200px;
    margin-bottom: 25px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#crystal-ball-wrapper:active {
    transform: scale(0.92);
}

.crystal-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.crystal-sphere {
    filter: drop-shadow(0 0 10px rgba(255, 117, 143, 0.3));
    transition: fill 0.3s ease;
}

/* 底部极光强光圈 */
.crystal-sphere-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-left: -60px;
    margin-top: -70px;
    background: radial-gradient(circle, rgba(255, 117, 143, 0.4) 0%, rgba(247, 37, 133, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(8px);
    animation: sphereGlowPulse 2s infinite alternate ease-in-out;
    pointer-events: none;
}

@keyframes sphereGlowPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.15); opacity: 1; }
}

/* 内置爱心跳动 */
.heart-pulse {
    animation: heartThump 1.2s infinite alternate cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: 80px 80px;
}

@keyframes heartThump {
    0% { transform: scale(0.92); fill: #ff4d6d; }
    100% { transform: scale(1.08); fill: #ff758f; filter: drop-shadow(0 0 5px #ff4d6d); }
}

/* 水晶球内漂浮星点 */
.sphere-contents circle {
    animation: orbFloat 2.5s infinite alternate ease-in-out;
}

.sphere-contents .orb-1 { animation-delay: 0.2s; }
.sphere-contents .orb-2 { animation-delay: 0.7s; }
.sphere-contents .orb-3 { animation-delay: 1.2s; }
.sphere-contents .orb-4 { animation-delay: 0.4s; }
.sphere-contents .orb-5 { animation-delay: 1.5s; }

@keyframes orbFloat {
    0% { opacity: 0.3; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(-3px); }
}

.lock-tip-text {
    font-size: 12px;
    color: #ff85a1;
    background: rgba(255, 117, 143, 0.12);
    border: 1px solid rgba(255, 117, 143, 0.3);
    padding: 6px 16px;
    border-radius: 15px;
}

.question-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: #e0dbe8;
    margin-bottom: 22px;
    padding: 0 5px;
    text-align: center;
}

/* 提示文案隐藏/展开 */
.hide-tip {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.6;
    color: #c9c9c9;
    padding: 0 5px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.show-tip {
    opacity: 1;
    max-height: 120px;
    margin-bottom: 22px;
}

.input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

#name-input {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    font-size: 16px;
    color: #ffffff;
    outline: none;
    text-align: center;
    transition: all 0.3s ease;
}

#name-input:focus {
    border-color: #ff758f;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(255, 117, 143, 0.2);
}

/* 名字输入错误样式 */
#name-input.error-state {
    border-color: #ff4d6d;
    background: rgba(255, 77, 109, 0.12);
    box-shadow: 0 0 15px rgba(255, 77, 109, 0.25);
}

#name-input.error-state::placeholder {
    color: #ff4d6d;
}

.shake {
    animation: shakeEffect 0.5s ease-in-out;
}

@keyframes shakeEffect {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* --- 场景二：祝福语便利贴堆叠照片墙 --- */
.cards-header {
    position: absolute;
    top: 40px;
    width: 100%;
    padding: 0 24px;
    text-align: center;
    z-index: 10;
}

.cards-title {
    font-size: 24px;
    color: #ff85a1;
    margin-bottom: 6px;
}

.cards-desc {
    font-size: 12px;
    color: #b0a9be;
}

#cards-stack-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

/* 融合 AI 唯美插画图照片卡，调整白色偏光，使背景画更明晰 */
.polaroid-note {
    position: absolute;
    width: 156px;
    min-height: 156px;
    border: 5px solid #ffffff;
    border-bottom: 18px solid #ffffff; /* 照片下边缘白边 */
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.32);
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* 文字对比度终极美化：全黑粗体字 + 高对比白色立体描边 */
    color: #000000;
    font-family: 'STKaiti', 'KaiTi', '楷体', 'STSong', 'SimSun', serif;
    font-weight: 800; /* 超粗体，确保极佳的可辨识性 */
    font-size: 15.5px;
    line-height: 1.45;
    text-align: center;
    text-shadow: -1.5px -1.5px 0 #ffffff, 
                 1.5px -1.5px 0 #ffffff, 
                 -1.5px 1.5px 0 #ffffff, 
                 1.5px 1.5px 0 #ffffff, 
                 0 2px 4px rgba(0, 0, 0, 0.45); /* 描边加投影，确保万无一失的可读性 */
    
    transform: scale(0);
    opacity: 0;
    pointer-events: auto;
    
    /* 发散飞出动画：从屏幕中央飞射到其 absolute 指定位置 */
    animation: noteFlyScatter 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

.polaroid-note::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    width: 50px;
    height: 18px;
    background: rgba(255, 220, 220, 0.55);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border-left: 1px dashed rgba(0,0,0,0.1);
    border-right: 1px dashed rgba(0,0,0,0.1);
    z-index: 2;
}

/* 从屏幕中央朝四周飞出扩散的 deal-card 物理动效 */
@keyframes noteFlyScatter {
    0% {
        /* 计算卡片与屏幕中点的绝对坐标偏转值，并在起点处缩放隐藏 */
        transform: translate(calc(50vw - var(--left-pos, 0px) - 78px), calc(50vh - var(--top-pos, 0px) - 78px)) scale(0) rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(var(--rot, 0deg));
        opacity: 0.98;
    }
}

#cards-success-action {
    position: absolute;
    bottom: 55px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 999; /* 永远处于卡片墙上方，确保不被阻挡点击 */
}

/* --- 场景三：生日蛋糕与吹蜡烛 --- */
.cake-box {
    width: 240px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    z-index: 10;
}

.cake-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.3));
}

.cake-svg text,
.jar-svg text {
    font-family: 'STKaiti', 'KaiTi', '楷体', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', cursive, sans-serif !important;
    font-weight: normal;
}

.flame {
    animation: flameWobble 1.6s infinite ease-in-out alternate;
    transform-origin: center bottom;
}

.flame-inner {
    animation: flameWobble 1.2s infinite ease-in-out alternate-reverse;
    transform-origin: center bottom;
}

.flame-halo {
    animation: haloPulse 1.8s infinite ease-in-out alternate;
    transform-origin: center center;
}

@keyframes flameWobble {
    0% { transform: scaleX(1) scaleY(1) rotate(-1.5deg); }
    50% { transform: scaleX(0.9) scaleY(1.1) rotate(2deg); }
    100% { transform: scaleX(1.1) scaleY(0.9) rotate(-1deg); }
}

@keyframes haloPulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0.9; }
}

.cake-instruction-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    z-index: 10;
}

.instruction-text {
    font-size: 14.5px;
    color: #ffccd5;
    font-weight: 500;
    line-height: 1.6;
}

.mic-badge {
    background: rgba(189, 236, 182, 0.15);
    border: 1px solid rgba(189, 236, 182, 0.4);
    color: #bdecb6;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mic-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #bdecb6;
    box-shadow: 0 0 6px #bdecb6;
}

.animate-pulse-light {
    animation: micPulse 1.4s infinite ease-in-out;
}

@keyframes micPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.25); }
}

.熄灭黑屏 {
    background: #06030d !important;
    transition: background 0.4s ease;
}

/* --- 场景四：心愿溶解与星愿瓶 --- */
#vortex-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
}

.wish-wrapper {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.wish-container {
    position: relative;
    width: 300px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.wish-paper {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    transition: transform 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.8s ease;
    z-index: 12;
}

.wish-paper.dissolving {
    transform: scale(0.3) rotate(30deg) translateY(-80px);
    opacity: 0;
}

.paper-title {
    font-size: 19px;
    color: #ff85a1;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.paper-desc {
    font-size: 11px;
    color: #b0a9be;
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.4;
}

#wish-textarea {
    width: 100%;
    height: 90px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 10px;
    font-size: 14px;
    color: #ffffff;
    outline: none;
    resize: none;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

#wish-textarea:focus {
    border-color: #ff758f;
    background: rgba(0, 0, 0, 0.25);
}

/* 星愿瓶 */
#wishing-jar-container {
    position: absolute;
    width: 160px;
    height: 220px;
    z-index: 10;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.8s ease;
}

.jar-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
}

.jar-glass {
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
}

.jar-glow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 35px;
    background: radial-gradient(ellipse, rgba(255, 117, 143, 0.45) 0%, rgba(255, 117, 143, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 1s ease;
}

#wishing-jar-container.glow {
    animation: jarGlowPulse 3s infinite ease-in-out alternate;
}

#wishing-jar-container.glow .jar-glow {
    opacity: 1;
}

#wishing-jar-container.glow .jar-glass {
    stroke: rgba(255, 117, 143, 0.85);
    fill: rgba(255, 117, 143, 0.12);
    filter: drop-shadow(0 0 15px rgba(255, 117, 143, 0.6));
}

@keyframes jarGlowPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 117, 143, 0.4)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(255, 117, 143, 0.85)); }
}

.jar-stars circle {
    animation: sparkBlink 2s infinite ease-in-out alternate;
}

.jar-stars .spark-1 { animation-delay: 0.2s; }
.jar-stars .spark-2 { animation-delay: 0.8s; }
.jar-stars .spark-3 { animation-delay: 0.5s; }
.jar-stars .spark-4 { animation-delay: 1.2s; }
.jar-stars .spark-5 { animation-delay: 0.4s; }
.jar-stars .spark-6 { animation-delay: 1.5s; }

@keyframes sparkBlink {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* 最终极简卡片 */
.success-card {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    margin-top: 15px;
    z-index: 15;
}

.success-card.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.success-icon {
    font-size: 48px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.success-card h3 {
    font-size: 20px;
    color: #ff85a1;
    margin-bottom: 15px;
}

.final-blessing-text {
    text-align: center;
    font-size: 13.5px;
    line-height: 2;
    color: #d8d3e2;
    padding: 0 10px;
    margin-bottom: 20px;
}

.final-blessing-text p {
    margin-bottom: 10px;
}

.final-blessing-text .highlight-line {
    color: #ff85a1;
    font-weight: 500;
    text-shadow: 0 0 8px rgba(255, 117, 143, 0.4);
    font-size: 14px;
}

.hidden {
    display: none !important;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}