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

body {
    font-family: 'STKaiti', 'KaiTi', 'SimSun', 'Georgia', serif;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    background: #000;
}

body.login-scene {
    background: #fdfaf5;
}

.scene {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 1s ease, visibility 1s;
}

.scene.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.scene:not(.active) {
    display: none !important;
}

/* ========== 场景1：深邃宇宙背景 ========== */
#scene1 {
    perspective: 2000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grass-background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, #1a0a2e 0%, transparent 70%),
        radial-gradient(ellipse 100% 80% at 20% 100%, #0d0620 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 60%, #0a1535 0%, transparent 60%),
        linear-gradient(160deg, #060412 0%, #0a0520 30%, #0c0a28 55%, #080415 80%, #030210 100%);
}

/* 星云层 */
.grass-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 25% at 25% 35%, rgba(120,60,200,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 30% 20% at 75% 55%, rgba(60,100,200,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 20% 15% at 50% 20%, rgba(200,100,150,0.08) 0%, transparent 70%),
        radial-gradient(circle 1.5px at 8% 12%, rgba(255,255,255,0.95) 0%, transparent 100%),
        radial-gradient(circle 1px at 15% 28%, rgba(255,240,200,0.8) 0%, transparent 100%),
        radial-gradient(circle 2px at 22% 8%, rgba(255,255,255,1) 0%, transparent 100%),
        radial-gradient(circle 1px at 32% 42%, rgba(200,220,255,0.7) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 42% 18%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(circle 2.5px at 48% 6%, rgba(255,250,230,1) 0%, transparent 100%),
        radial-gradient(circle 1px at 55% 32%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 62% 14%, rgba(220,240,255,0.85) 0%, transparent 100%),
        radial-gradient(circle 1px at 70% 48%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(circle 2px at 78% 22%, rgba(255,245,210,0.9) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 85% 38%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(circle 1px at 92% 10%, rgba(210,230,255,0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 5% 62%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 18% 70%, rgba(255,240,200,0.7) 0%, transparent 100%),
        radial-gradient(circle 1px at 35% 78%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(circle 2px at 58% 68%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(circle 1px at 72% 82%, rgba(200,210,255,0.6) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 88% 72%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(circle 3px at 30% 55%, rgba(255,250,240,0.4) 0%, transparent 100%);
    pointer-events: none;
    animation: starTwinkle 5s ease-in-out infinite;
}

/* 第二层星星（错开闪烁） */
.grass-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 1px at 12% 45%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 27% 22%, rgba(255,230,180,0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 40% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(circle 2px at 52% 85%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(circle 1px at 65% 38%, rgba(220,230,255,0.6) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 80% 55%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 90% 88%, rgba(255,240,200,0.5) 0%, transparent 100%),
        radial-gradient(circle 1px at 3% 80%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 95% 30%, rgba(210,225,255,0.7) 0%, transparent 100%);
    pointer-events: none;
    animation: starTwinkle2 7s ease-in-out infinite 2.5s;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.5; }
    70% { opacity: 0.85; }
}

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

/* 浮动金色尘埃粒子 */
.dust-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: dustFloat linear infinite;
}

/* ===== 书本容器 - 加入自然飘动 ===== */
.book-3d {
    position: relative;
    width: min(62vw, 260px);
    height: min(82vw, 360px);
    transform-style: preserve-3d;
    transform: rotateX(12deg) rotateY(-10deg) rotateZ(-2deg);
    cursor: pointer;
    z-index: 10;
    animation: bookFloat 6s ease-in-out infinite;
    filter:
        drop-shadow(0 40px 70px rgba(80,20,120,0.6))
        drop-shadow(0 0 30px rgba(160,100,220,0.15));
}

.book-3d:hover {
    animation-play-state: paused;
    transform: rotateX(8deg) rotateY(-5deg) rotateZ(-1deg) translateY(-12px) scale(1.03) !important;
    filter:
        drop-shadow(0 55px 90px rgba(80,20,120,0.7))
        drop-shadow(0 0 50px rgba(180,120,255,0.25));
    transition: transform 0.8s cubic-bezier(0.23,1,0.32,1), filter 0.8s ease;
}

.book-3d.opening {
    animation: bookOpen 0.8s ease forwards !important;
    cursor: default;
}

@keyframes bookFloat {
    0%   { transform: rotateX(12deg) rotateY(-10deg) rotateZ(-2deg) translateY(0px); }
    20%  { transform: rotateX(10deg) rotateY(-7deg)  rotateZ(-1.5deg) translateY(-8px); }
    45%  { transform: rotateX(14deg) rotateY(-12deg) rotateZ(-2.5deg) translateY(-4px); }
    65%  { transform: rotateX(11deg) rotateY(-8deg)  rotateZ(-1.8deg) translateY(-12px); }
    85%  { transform: rotateX(13deg) rotateY(-11deg) rotateZ(-2.2deg) translateY(-6px); }
    100% { transform: rotateX(12deg) rotateY(-10deg) rotateZ(-2deg) translateY(0px); }
}

@keyframes bookOpen {
    0%   { transform: rotateX(12deg) rotateY(-10deg) rotateZ(-2deg) scale(1); }
    50%  { transform: rotateX(5deg) rotateY(-3deg) rotateZ(-0.5deg) scale(1.1); }
    100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.15); }
}

/* 书本底部阴影 */
.book-3d::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 5%;
    right: 5%;
    height: 50px;
    background: radial-gradient(ellipse, rgba(60,10,100,0.7) 0%, rgba(40,0,80,0.35) 40%, transparent 75%);
    filter: blur(25px);
    z-index: -1;
    animation: shadowPulse 6s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { opacity: 0.8; transform: scaleX(1); }
    50% { opacity: 0.5; transform: scaleX(0.88); }
}

/* ===== 封面 - 童话绘本质感 ===== */
.book-cover {
    position: absolute;
    inset: 0;
    border-radius: 4px 14px 14px 4px;
    transform-origin: 0% 50%;
    transform: translateZ(26px);
    transition: transform 1.2s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;

    /* 深紫罗兰绒面底色 */
    background:
        radial-gradient(ellipse 120% 80% at 30% 20%, rgba(255,220,240,0.06) 0%, transparent 55%),
        linear-gradient(155deg,
            #4a1e6e 0%,
            #3d1a5e 15%,
            #2d1248 30%,
            #1e0d35 50%,
            #2a1248 70%,
            #3a1860 85%,
            #4d2070 100%
        );

    /* 精致装帧边框 */
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12),
        inset 0 0 0 6px rgba(180,140,60,0.18),
        inset 0 0 0 7px rgba(255,220,100,0.08),
        inset 2px 2px 20px rgba(0,0,0,0.4),
        inset -1px -1px 8px rgba(255,255,255,0.06);
}

/* 翻页状态 */
.book-3d.page-flip .book-cover {
    transform: translateZ(5px) rotateY(-170deg);
}

/* 纸张纹理层 - 细腻织物感 */
.book-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        repeating-linear-gradient(0deg,
            transparent 0px, transparent 3px,
            rgba(255,255,255,0.018) 3px, rgba(255,255,255,0.018) 4px
        ),
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 3px,
            rgba(0,0,0,0.025) 3px, rgba(0,0,0,0.025) 4px
        ),
        repeating-linear-gradient(45deg,
            transparent 0px, transparent 6px,
            rgba(255,255,255,0.012) 6px, rgba(255,255,255,0.012) 7px
        ),
        repeating-linear-gradient(-45deg,
            transparent 0px, transparent 6px,
            rgba(0,0,0,0.015) 6px, rgba(0,0,0,0.015) 7px
        );
    pointer-events: none;
}

/* 镜面高光 - 左上到右下斜线光泽 */
.book-cover::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 70%;
    background:
        radial-gradient(ellipse at 35% 35%,
            rgba(255,245,255,0.18) 0%,
            rgba(220,190,255,0.1) 30%,
            rgba(180,140,220,0.05) 55%,
            transparent 75%
        );
    pointer-events: none;
    filter: blur(6px);
    transform: rotate(-10deg);
}

/* 精致皮质纹理 */
.leather-texture {
    position: absolute;
    inset: 0;
    border-radius: 4px 14px 14px 4px;
    background-image:
        radial-gradient(ellipse 200% 120% at 50% 50%,
            rgba(255,255,255,0.015) 0%,
            transparent 60%
        );
    pointer-events: none;
}

/* 书脊金线装饰 */
.book-spine-decoration {
    position: absolute;
    left: 8%;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255,210,100,0.2) 10%,
        rgba(255,220,120,0.5) 30%,
        rgba(255,230,140,0.6) 50%,
        rgba(255,220,120,0.5) 70%,
        rgba(255,210,100,0.2) 90%,
        transparent 100%
    );
    box-shadow: 0 0 4px rgba(255,215,100,0.3);
}

/* 封面装饰边框（内嵌金色细框） */
.cover-border {
    position: absolute;
    top: 8%;
    left: 12%;
    right: 6%;
    bottom: 8%;
    border: 1px solid rgba(255,210,100,0.22);
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 3px rgba(255,210,100,0.06),
        0 0 8px rgba(255,210,100,0.08);
    pointer-events: none;
}

/* 封面四角花纹 */
.cover-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
}
.cover-corner::before,
.cover-corner::after {
    content: '';
    position: absolute;
    background: rgba(255,210,100,0.35);
}
.cover-corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.cover-corner::after  { width: 1px; height: 100%; top: 0; left: 0; }

.cover-corner.tl { top: 8%; left: 12%; }
.cover-corner.tr { top: 8%; right: 6%; transform: scaleX(-1); }
.cover-corner.bl { bottom: 8%; left: 12%; transform: scaleY(-1); }
.cover-corner.br { bottom: 8%; right: 6%; transform: scale(-1); }

/* 封面内容 */
.cover-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8vw 6vw;
    z-index: 2;
}

/* 封面中央装饰图案 - 星月图腾 */
.cover-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 55%;
    opacity: 0.06;
    pointer-events: none;
}

.cover-title {
    text-align: center;
    position: relative;
    z-index: 3;
}

/* 烫金浮雕标题 */
.title-line1 {
    display: block;
    font-size: min(8.5vw, 36px);
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: min(2.5vw, 12px);
    white-space: nowrap;
    background: linear-gradient(170deg,
        #fff8e8 0%,
        #ffeaaa 15%,
        #f5c842 35%,
        #d4a030 50%,
        #b8852a 65%,
        #e8c870 80%,
        #fff8e8 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 1px 3px rgba(0,0,0,0.6))
        drop-shadow(0 -1px 1px rgba(255,245,200,0.5))
        drop-shadow(0 0 12px rgba(220,170,60,0.35));
    position: relative;
}

/* 烫金字光晕层 */
.title-line1::before {
    content: '千雪和猫呜';
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg,
        rgba(255,255,220,0.9) 0%,
        rgba(255,220,100,0.6) 50%,
        transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(3px);
    opacity: 0.35;
    z-index: -1;
    animation: goldShimmer 3s ease-in-out infinite;
}

@keyframes goldShimmer {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.5; }
}

.title-line2 {
    display: block;
    font-size: min(4.5vw, 18px);
    font-weight: 500;
    letter-spacing: 5px;
    white-space: nowrap;
    color: rgba(230,210,180,0.85);
    text-shadow:
        0 1px 3px rgba(0,0,0,0.5),
        0 0 10px rgba(220,190,140,0.3);
}

/* 轻触提示 - 精致动效 */
.tap-hint {
    margin-top: min(10vw, 40px);
    font-size: min(3.5vw, 14px);
    color: rgba(240,220,180,0.7);
    letter-spacing: 3px;
    animation: hintFloat 3s ease-in-out infinite;
    position: relative;
    z-index: 3;
}

.tap-hint::before,
.tap-hint::after {
    content: '✦';
    position: absolute;
    font-size: 0.75em;
    color: rgba(255,215,100,0.6);
    animation: starSpin 4s linear infinite;
}

.tap-hint::before { left: -1.8em; animation-delay: 0s; }
.tap-hint::after  { right: -1.8em; animation-delay: 2s; }

@keyframes starSpin {
    0%   { opacity: 0.3; transform: rotate(0deg) scale(0.8); }
    50%  { opacity: 1;   transform: rotate(180deg) scale(1.2); }
    100% { opacity: 0.3; transform: rotate(360deg) scale(0.8); }
}

@keyframes hintFloat {
    0%, 100% { opacity: 0.6; transform: translateY(0); }
    50%       { opacity: 1;   transform: translateY(-6px); }
}

/* ===== 书脊 ===== */
.book-spine {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 100%;
    background: linear-gradient(to right,
        #2a0d42 0%,
        #3d1860 20%,
        #4a2070 50%,
        #3d1860 80%,
        #2a0d42 100%
    );
    transform: rotateY(-90deg) translateZ(0);
    transform-origin: left;
    border-radius: 4px 0 0 4px;
    box-shadow:
        inset -3px 0 10px rgba(0,0,0,0.6),
        inset 1px 0 4px rgba(255,255,255,0.08);
}

/* 书脊金色细线 */
.book-spine::before {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 45%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(255,210,100,0.4) 20%,
        rgba(255,215,100,0.6) 50%,
        rgba(255,210,100,0.4) 80%,
        transparent
    );
}

/* ===== 书页厚度 ===== */
.book-pages {
    position: absolute;
    right: 0;
    top: 5px;
    width: 26px;
    height: calc(100% - 10px);
    background: repeating-linear-gradient(
        to bottom,
        #fefaf2 0px,
        #f9f4e8 1px,
        #f2ece0 2px,
        #faf5ec 3px,
        #fefaf2 4px
    );
    transform: rotateY(90deg) translateZ(0);
    transform-origin: right;
    border-radius: 0 4px 4px 0;
    box-shadow:
        inset 3px 0 8px rgba(0,0,0,0.1),
        -1px 0 4px rgba(0,0,0,0.15);
}

/* 右下角书页翘起 */
.book-pages::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: 5%;
    width: 24px;
    height: 18%;
    background: linear-gradient(135deg, #fefaf2 0%, #f5f0e5 60%, #ebe4d8 100%);
    transform: rotateZ(-3deg) translateX(1px);
    border-radius: 0 0 4px 0;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.18);
}

/* ========== 场景2 ========== */
#scene2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfaf5;
}

.page-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fdfaf5 0%, #f9f3ea 50%, #f5ece0 100%);
}

.page-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.8;
}

.full-page {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
}

/* ===== 照片爱心墙 ===== */
.photo-heart-wall {
    position: relative;
    width: min(90vw, 650px);
    height: min(80vh, 600px);
    flex-shrink: 0;
    margin-bottom: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-wall-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.photo-item {
    position: absolute;
    width: min(14vw, 80px);
    height: min(14vw, 80px);
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    animation: photoFadeIn 0.6s ease both;
}

.photo-item.active {
    transform: translate(-50%, -50%) scale(1.1) !important;
    z-index: 100;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    border-width: 4px;
}

.heart-center-dot {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
    width: 36px;
    height: 36px;
    background: radial-gradient(circle, rgba(255,80,100,0.95) 0%, rgba(220,60,80,0.85) 100%);
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 20px rgba(255,80,100,0.5), 0 0 0 0 rgba(255,80,100,0.6);
    cursor: pointer;
    z-index: 50;
    animation: heartDotPulse 2s ease-in-out infinite;
}

@keyframes heartDotPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 4px 20px rgba(255,80,100,0.5), 0 0 0 0 rgba(255,80,100,0.6);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        box-shadow: 0 6px 25px rgba(255,80,100,0.65), 0 0 0 8px rgba(255,80,100,0);
    }
}

/* 胶卷展开模式 */
.filmstrip-mode {
    position: fixed;
    inset: 0;
    background: rgba(20,20,25,0.98);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.filmstrip-mode.active {
    opacity: 1;
    visibility: visible;
}

.filmstrip-row {
    position: absolute;
    height: 25%;
    width: 100%;
    overflow: hidden;
    display: flex;
    gap: 12px;
    align-items: center;
}

.filmstrip-row:nth-child(1) { top: 0; }
.filmstrip-row:nth-child(2) { top: 25%; }
.filmstrip-row:nth-child(3) { top: 50%; }
.filmstrip-row:nth-child(4) { top: 75%; }

.filmstrip-track {
    display: flex;
    gap: 12px;
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.filmstrip-row:nth-child(odd) .filmstrip-track {
    animation-name: scrollLeft;
    animation-duration: 25s;
}

.filmstrip-row:nth-child(even) .filmstrip-track {
    animation-name: scrollRight;
    animation-duration: 25s;
}

.filmstrip-track.paused {
    animation-play-state: paused !important;
}

@keyframes scrollLeft {
    from { transform: translateX(0); }
    to { transform: translateX(var(--scroll-distance, -50%)); }
}

@keyframes scrollRight {
    from { transform: translateX(var(--scroll-distance, -50%)); }
    to { transform: translateX(0); }
}

.filmstrip-photo {
    flex-shrink: 0;
    height: calc(100% - 16px);
    aspect-ratio: 1;
    border: 2px solid rgba(255,255,255,0.75);
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.filmstrip-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.filmstrip-photo:hover {
    transform: scale(1.05);
    border-color: #ff6090;
}

@media (max-width: 768px) {
    .filmstrip-photo {
        height: calc(100% - 12px);
        width: auto;
        max-width: 30vw;
    }

    .filmstrip-row:nth-child(odd) .filmstrip-track { animation-duration: 15s; }
    .filmstrip-row:nth-child(even) .filmstrip-track { animation-duration: 15s; }
}

.filmstrip-preview {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.filmstrip-preview.active { opacity: 1; visibility: visible; }

.filmstrip-preview img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: 0 10px 60px rgba(0,0,0,0.7);
}

.exit-btn {
    position: fixed;
    top: min(6vw, 30px);
    right: min(6vw, 30px);
    padding: min(2.5vw, 12px) min(5vw, 24px);
    background: rgba(220,80,100,0.9);
    color: #fff;
    font-size: min(4vw, 18px);
    font-weight: 600;
    letter-spacing: 2px;
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 24px;
    cursor: pointer;
    z-index: 250;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(220,80,100,0.4);
}

.exit-btn:hover {
    background: rgba(240,100,120,1);
    transform: scale(1.05);
}

/* 音乐控制 */
.music-toggle {
    position: fixed;
    bottom: min(6vw, 30px);
    right: min(6vw, 30px);
    width: min(14vw, 56px);
    height: min(14vw, 56px);
    background: rgba(255,255,255,0.9);
    border: 2px solid rgba(216,128,144,0.4);
    border-radius: 50%;
    cursor: pointer;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.music-toggle:hover {
    background: rgba(255,245,250,1);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(216,128,144,0.3);
}

.music-toggle.muted { background: rgba(200,200,200,0.7); }
.music-icon { font-size: min(7vw, 28px); }

.music-hint {
    position: fixed;
    bottom: min(6vw, 30px);
    right: min(20vw, 100px);
    padding: min(2vw, 10px) min(4vw, 18px);
    background: rgba(255,80,100,0.9);
    color: #fff;
    font-size: min(3.5vw, 14px);
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 20px;
    z-index: 499;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    animation: hintBlink 1.5s ease-in-out infinite;
    box-shadow: 0 4px 16px rgba(255,80,100,0.4);
}

.music-hint.show { opacity: 1; visibility: visible; }

@keyframes hintBlink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-item:hover {
    transform: scale(1.15) !important;
    z-index: 100;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

@keyframes photoFadeIn {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== 姓名输入区 ===== */
.name-input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(3vh, 20px);
    width: 100%;
    max-width: 500px;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(3vw, 20px);
    width: 100%;
}

.name-input {
    flex: 1;
    max-width: 180px;
    padding: min(2.5vh, 14px) min(3vw, 16px);
    border: 2px solid rgba(200,130,100,0.3);
    border-radius: 12px;
    background: rgba(255,255,255,0.6);
    font-size: min(4.5vw, 20px);
    font-weight: 600;
    color: #6b4030;
    text-align: center;
    outline: none;
    font-family: inherit;
    transition: all 0.3s ease;
}

.name-input:focus {
    border-color: #d88090;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(216,128,144,0.15);
    transform: scale(1.05);
}

.name-input.valid {
    border-color: #d88090;
    background: #fff;
    color: #d86080;
}

.input-heart {
    font-size: min(6vw, 28px);
    color: rgba(200,130,144,0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.input-heart.active {
    color: #ff6090;
    transform: scale(1.3);
    filter: drop-shadow(0 2px 8px rgba(255,96,144,0.6));
    animation: heartPulse 1.2s ease-in-out infinite;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1.3); }
    50% { transform: scale(1.5); }
}

.confirm-btn {
    padding: min(2.5vh, 14px) min(10vw, 50px);
    background: linear-gradient(135deg, #d88090 0%, #c87080 100%);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: min(4.5vw, 20px);
    font-weight: 700;
    letter-spacing: 5px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 20px rgba(200,112,128,0.4);
    transition: all 0.3s ease;
}

.confirm-btn:hover {
    background: linear-gradient(135deg, #e88898 0%, #d88090 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(200,112,128,0.5);
}

.confirm-btn:active {
    transform: translateY(0) scale(0.97);
}

.error-message {
    font-size: min(3.5vw, 15px);
    color: #d87080;
    text-align: center;
    min-height: min(4vh, 20px);
    letter-spacing: 1px;
}

/* ===== 成功特效 ===== */
.success-effect {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: rgba(253,250,245,0.95);
}

.success-effect.hidden { display: none; }

.success-effect.show {
    animation: successFadeIn 0.8s ease both;
}

@keyframes successFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.glow-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,180,200,0.4) 0%, transparent 70%);
    animation: glowExpand 2s ease-in-out infinite;
}

@keyframes glowExpand {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.success-heart {
    font-size: min(40vw, 180px);
    color: #ff6090;
    filter: drop-shadow(0 10px 40px rgba(255,96,144,0.6));
    animation: heartBounceIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes heartBounceIn {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.success-text {
    text-align: center;
    margin-top: 5vh;
    animation: textSlideUp 0.8s ease 0.5s both;
}

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

.names {
    font-size: min(8vw, 38px);
    font-weight: 900;
    background: linear-gradient(135deg, #ff6b9d 0%, #ffa07a 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 5px;
    margin-bottom: 2vh;
}

.subtitle {
    font-size: min(4vw, 18px);
    color: rgba(150,100,80,0.7);
    letter-spacing: 6px;
    font-style: italic;
}

/* ===== 粒子容器 ===== */
.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

/* ===== 桌面端适配 ===== */
@media (min-width: 768px) {
    .book-3d { width: 250px; height: 355px; }
    .title-line1 { font-size: 30px; }
    .title-line2 { font-size: 16px; }
    .tap-hint { font-size: 12px; }
    .photo-item { width: 75px; height: 75px; }
    .name-input { font-size: 18px; padding: 12px 16px; }
    .input-heart { font-size: 26px; }
    .confirm-btn { font-size: 18px; padding: 12px 40px; }
    .error-message { font-size: 14px; }
}

/* ===== 摇晃动画 ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* ===== 浮尘粒子动画 ===== */
@keyframes dustFloat {
    0%   { transform: translateY(100vh) translateX(0) scale(1); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-10vh) translateX(var(--dx, 30px)) scale(0.5); opacity: 0; }
}

/* ===== 光线发散曝光效果 ===== */
.exposure-overlay {
    position: fixed;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 500;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,1) 0%,
            rgba(255,248,220,0.95) 15%,
            rgba(255,235,160,0.7) 35%,
            rgba(220,180,255,0.4) 55%,
            transparent 72%
        ),
        conic-gradient(
            from 0deg at 50% 50%,
            rgba(255,255,255,0.95) 0deg,
            rgba(255,250,200,0.3) 4deg,
            transparent 8deg,
            transparent 22deg,
            rgba(255,245,190,0.8) 26deg,
            rgba(255,245,190,0.2) 30deg,
            transparent 34deg,
            transparent 48deg,
            rgba(255,255,255,0.9) 52deg,
            rgba(255,250,200,0.25) 56deg,
            transparent 60deg,
            transparent 73deg,
            rgba(255,245,190,0.75) 77deg,
            rgba(255,245,190,0.15) 81deg,
            transparent 85deg,
            transparent 100deg,
            rgba(255,255,255,0.9) 104deg,
            rgba(255,250,200,0.2) 108deg,
            transparent 112deg,
            transparent 125deg,
            rgba(255,245,190,0.8) 129deg,
            rgba(255,245,190,0.2) 133deg,
            transparent 137deg,
            transparent 153deg,
            rgba(255,255,255,0.95) 157deg,
            rgba(255,250,200,0.3) 161deg,
            transparent 165deg,
            transparent 178deg,
            rgba(255,245,190,0.8) 182deg,
            rgba(255,245,190,0.2) 186deg,
            transparent 190deg,
            transparent 205deg,
            rgba(255,255,255,0.85) 209deg,
            rgba(255,250,200,0.2) 213deg,
            transparent 217deg,
            transparent 230deg,
            rgba(255,245,190,0.8) 234deg,
            rgba(255,245,190,0.15) 238deg,
            transparent 242deg,
            transparent 258deg,
            rgba(255,255,255,0.9) 262deg,
            rgba(255,250,200,0.25) 266deg,
            transparent 270deg,
            transparent 283deg,
            rgba(255,245,190,0.8) 287deg,
            rgba(255,245,190,0.2) 291deg,
            transparent 295deg,
            transparent 308deg,
            rgba(255,255,255,0.9) 312deg,
            rgba(255,250,200,0.3) 316deg,
            transparent 320deg,
            transparent 334deg,
            rgba(255,245,190,0.85) 338deg,
            rgba(255,245,190,0.2) 342deg,
            transparent 346deg,
            rgba(255,255,255,0.95) 360deg
        );
    transition: transform 1.8s cubic-bezier(0.04, 0, 0.3, 1);
}

.exposure-overlay.expand {
    transform: translate(-50%, -50%) scale(400);
}

.exposure-overlay.white-flash {
    background: rgba(255,255,255,0.98) !important;
    transition: transform 1.8s cubic-bezier(0.04,0,0.3,1), background 0.5s ease !important;
}

.exposure-overlay.fade-out {
    opacity: 0 !important;
    transition: opacity 0.9s ease !important;
}

body > .site-record-footer {
    position: relative;
    z-index: 5;
    margin-top: 0;
    margin-bottom: 18px;
    padding-top: 14px;
    border-top-color: rgba(255, 220, 140, 0.18);
    color: rgba(230, 210, 180, 0.72);
    background: #000;
}

body.login-scene > .site-record-footer {
    border-top-color: rgba(255, 182, 193, 0.28);
    color: rgba(105, 72, 86, 0.72);
    background: linear-gradient(180deg, #fdfaf5 0%, #f7efe4 100%);
}

@media (max-width: 768px) {
    body {
        position: static;
        height: auto;
    }

    body.login-scene {
        min-height: 100svh;
    }

    #scene2.active {
        height: 100svh;
        min-height: 100svh;
        align-items: flex-start;
        overflow: visible;
    }

    #scene2.active .full-page {
        height: auto;
        min-height: 100svh;
        justify-content: flex-start !important;
        padding: clamp(60px, calc(5vh + 30px), 74px) 5vw clamp(4px, 1vh, 8px);
        transform: none;
    }

    #scene2.active .photo-heart-wall {
        width: min(82vw, 390px);
        height: clamp(210px, 38svh, 310px);
        margin-bottom: clamp(12px, 2.2vh, 18px);
    }

    #scene2.active .name-input-section {
        gap: clamp(10px, 1.8vh, 14px);
        margin-top: clamp(44px, calc(2.5vh + 30px), 50px);
    }

    #scene2.active .heart-center-dot {
        top: calc(100% + 38px);
    }

    body > .site-record-footer {
        margin-top: 0;
    }
}