/* Google Fonts - CDN loaded for mobile performance */

  @fo@font-face {
  font-family: 'Ma Shan Zheng';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mashanzheng.woff2') format('woff2');
} @fo@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/zcoolkuaile.woff2') format('woff2');
} @fo@font-face {
  font-family: 'Long Cang';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/longcang.woff2') format('woff2');
} :root {
    --sky-top: #0d0b2e;
    --sky-mid: #1a1040;
    --sky-low: #2a1a4a;
    --horizon: #3d2266;
    --star-warm: #ffe8c0;
    --star-cool: #d0d8ff;
    --star-pink: #ffc0d0;
    --text-glow: rgba(255, 230, 200, 0.92);
    --text-soft: rgba(255, 220, 240, 0.85);
    --accent-pink: #f7a8c4;
    --accent-lavender: #c9b1ff;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { overflow: hidden; }

  body {
    font-family: 'Long Cang', 'Ma Shan Zheng', cursive;
    overflow: hidden;
    height: 100vh; width: 100vw;
    background: var(--sky-top);
  }

  /* ===== 3D花朵开场遮罩 ===== */
  #flowerOverlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #0a0a0f;
    transition: opacity 1.8s ease-out, visibility 1.8s ease-out;
  }
  #flowerOverlay.bye {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  #flowerCanvas { display: block; width: 100%; height: 100%; }
  #flowerHint {
    position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
    font-family: 'Ma Shan Zheng', cursive; font-size: 20px; letter-spacing: 6px;
    color: rgba(240,230,211,0.6); text-shadow: 0 0 20px rgba(255,182,193,0.4);
    animation: hintPulse 2.5s ease-in-out infinite; white-space: nowrap;
  }
  @keyframes hintPulse { 0%,100%{opacity:0.4;transform:translateX(-50%) translateY(0)} 50%{opacity:1;transform:translateX(-50%) translateY(-4px)} }
  #flowerOverlay.bye #flowerHint { display: none; }

  /* ===== 夜空 ===== */
  .sky-bg {
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse at 20% 80%, rgba(80,40,120,.4) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 20%, rgba(40,30,100,.5) 0%, transparent 45%),
      radial-gradient(ellipse at 50% 100%, rgba(100,50,120,.3) 0%, transparent 40%),
      radial-gradient(ellipse at 60% 40%, rgba(60,40,110,.25) 0%, transparent 50%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 40%, var(--sky-low) 70%, var(--horizon) 100%);
    z-index: 0;
  }

  .nebula { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .15; z-index: 1; animation: nebDrift 20s ease-in-out infinite alternate; }
  .neb1 { width:500px;height:500px;background:radial-gradient(circle,rgba(200,150,255,.6),transparent 70%);top:-10%;left:-10%;animation-duration:25s; }
  .neb2 { width:400px;height:400px;background:radial-gradient(circle,rgba(255,160,200,.5),transparent 70%);bottom:-5%;right:-5%;animation-duration:18s;animation-delay:-8s; }
  .neb3 { width:350px;height:350px;background:radial-gradient(circle,rgba(180,200,255,.4),transparent 70%);top:30%;right:10%;animation-duration:22s;animation-delay:-12s; }
  @keyframes nebDrift { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(30px,-20px) scale(1.1)} }

  #starfield { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
  .star { position: absolute; border-radius: 50%; animation: twinkle var(--dur) ease-in-out infinite; animation-delay: var(--del); }
  .star-warm { background:var(--star-warm);box-shadow:0 0 4px 1px rgba(255,232,192,.6),0 0 12px 3px rgba(255,200,150,.2); }
  .star-cool { background:var(--star-cool);box-shadow:0 0 4px 1px rgba(208,216,255,.6),0 0 12px 3px rgba(180,190,255,.2); }
  .star-pink { background:var(--star-pink);box-shadow:0 0 4px 1px rgba(255,192,208,.6),0 0 12px 3px rgba(255,160,190,.2); }
  @keyframes twinkle { 0%,100%{opacity:var(--omin);transform:scale(.7)} 50%{opacity:var(--omax);transform:scale(1.3)} }

  #meteorCanvas { position: fixed; inset: 0; z-index: 3; pointer-events: none; }

  /* ===== 页面 ===== */
  .pages-wrapper { height:100vh; overflow:hidden; position:relative; z-index:5; }
  .page {
    width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;
    position:absolute; inset:0; opacity:0; transform:translateY(30px);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }
  .page.active { opacity:1; transform:translateY(0); pointer-events:auto; }
  .page.exit-up { opacity:0; transform:translateY(-30px); }

  /* 花朵消散后内容渐显 */
  .page-content {
    opacity: 0; transform: scale(0.92);
    transition: opacity 1.8s ease-out, transform 1.8s ease-out;
  }
  .page.active .page-content.show { opacity:1; transform:scale(1); }

  .page-inner { width:90%; max-width:480px; display:flex; align-items:center; gap:20px; position:relative; }
  .page:nth-child(odd) .page-inner { flex-direction:row; }
  .page:nth-child(even) .page-inner { flex-direction:row-reverse; }

  .photo-wrap { flex-shrink:0; position:relative; }
  .photo-frame {
    width:220px; height:290px; border-radius:18px; overflow:hidden; position:relative;
    box-shadow:0 6px 30px rgba(120,80,160,.35),0 0 60px rgba(200,160,255,.1);
  }
  .photo-frame img { width:100%;height:100%;object-fit:cover;filter:brightness(1.05) saturate(.9) contrast(.95);transition:transform .6s ease; }
  .photo-frame:hover img { transform:scale(1.04); }
  .photo-frame::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,220,255,.08) 0%,transparent 50%),linear-gradient(315deg,rgba(200,180,255,.06) 0%,transparent 50%);
    pointer-events:none;
  }
  .photo-glow {
    position:absolute; inset:-4px; border-radius:22px;
    background:linear-gradient(135deg,rgba(200,160,255,.3),rgba(255,180,210,.3),rgba(200,200,255,.3));
    z-index:-1; filter:blur(8px); opacity:.6;
  }

  .text-side { flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; position:relative; }
  .page-title {
    font-family:'Ma Shan Zheng',cursive; font-size:28px; line-height:1.6; letter-spacing:2px;
    color:var(--text-glow); text-shadow:0 0 20px rgba(255,200,180,.4),0 0 40px rgba(200,160,255,.2);
  }
  .page-subtitle {
    font-family:'ZCOOL KuaiLe',cursive; font-size:14px; letter-spacing:4px;
    color:var(--text-soft); text-shadow:0 0 12px rgba(255,180,220,.3); opacity:.85;
  }
  .deco-line { width:36px;height:1.5px;background:linear-gradient(90deg,var(--accent-pink),var(--accent-lavender));border-radius:1px;opacity:.5; }

  .anime-char { position:absolute; pointer-events:none; z-index:6; filter:drop-shadow(0 2px 8px rgba(255,200,220,0.4)); }
  .anime-char img { width:100%;height:100%;object-fit:contain; }

  .char-bounce { animation: charBounce 2s ease-in-out infinite; }
  @keyframes charBounce { 0%,100%{transform:translateY(0) scaleY(1)} 30%{transform:translateY(-12px) scaleY(1.05)} 50%{transform:translateY(-15px) scaleY(1)} 70%{transform:translateY(-8px) scaleY(0.98)} }
  .char-wiggle { animation: charWiggle 2.5s ease-in-out infinite; }
  @keyframes charWiggle { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(8deg)} 75%{transform:rotate(-6deg)} }
  .char-wave { animation: charWave 1.5s ease-in-out infinite; }
  @keyframes charWave { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(15deg)} 75%{transform:rotate(-10deg)} }
  .char-float { animation: charFloat 3s ease-in-out infinite; }
  @keyframes charFloat { 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-8px) translateX(5px)} }
  .char-heartbeat { animation: charHeartbeat 1.2s ease-in-out infinite; }
  @keyframes charHeartbeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.15)} 30%{transform:scale(1)} 45%{transform:scale(1.1)} }

  .page[data-index="0"] .ac1 { top:-48px; left:-28px; width:75px; height:75px; }
  .page[data-index="0"] .ac2 { bottom:-38px; right:-18px; width:68px; height:68px; }
  .page[data-index="1"] .ac1 { top:-42px; right:-22px; width:72px; height:72px; }
  .page[data-index="1"] .ac2 { bottom:-32px; left:-14px; width:65px; height:65px; }
  .page[data-index="2"] .ac1 { top:-44px; left:-18px; width:70px; height:70px; }
  .page[data-index="2"] .ac2 { bottom:-40px; right:-22px; width:66px; height:66px; }
  .page[data-index="3"] .ac1 { top:-40px; right:-28px; width:74px; height:74px; }
  .page[data-index="3"] .ac2 { bottom:-42px; left:-24px; width:64px; height:64px; }

  .nav-dots { position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:16px; }
  .nav-dot { width:7px;height:7px;border-radius:50%;background:rgba(255,220,240,.3);border:none;cursor:pointer;transition:all .4s ease;padding:0;outline:none; }
  .nav-dot.active { background:var(--accent-pink);box-shadow:0 0 10px rgba(247,168,196,.6),0 0 20px rgba(200,160,255,.3);transform:scale(1.4); }
  .nav-dot:hover { background:rgba(255,220,240,.6); }

  .scroll-hint { position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:5px;transition:opacity .5s ease; }
  .scroll-hint.hidden { opacity:0;pointer-events:none; }
  .scroll-hint-text { font-family:'ZCOOL KuaiLe',cursive;font-size:12px;letter-spacing:4px;color:rgba(255,220,240,.5); }
  .scroll-hint-arrow { width:16px;height:16px;border-right:1.5px solid rgba(255,220,240,.4);border-bottom:1.5px solid rgba(255,220,240,.4);transform:rotate(45deg);animation:bounceDown 1.8s ease-in-out infinite; }
  @keyframes bounceDown { 0%,100%{transform:rotate(45deg) translateY(0);opacity:.3} 50%{transform:rotate(45deg) translateY(5px);opacity:.7} }
  .page-number { position:absolute;bottom:28px;left:24px;font-family:'ZCOOL KuaiLe',cursive;font-size:13px;letter-spacing:3px;color:rgba(200,180,255,.35); }

  .settings-toggle { position:fixed;top:18px;right:18px;z-index:20;width:34px;height:34px;border-radius:50%;background:rgba(30,20,60,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(200,160,255,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,220,240,.7);transition:all .3s ease; }
  
  .settings-toggle:hover { background:rgba(40,25,80,.8);box-shadow:0 0 15px rgba(200,160,255,.3); }
  .settings-panel { position:fixed;top:60px;right:18px;z-index:20;background:rgba(20,12,50,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;padding:16px 18px;border:1px solid rgba(200,160,255,.15);box-shadow:0 4px 30px rgba(100,60,150,.3);opacity:0;transform:translateY(-10px);pointer-events:none;transition:all .3s ease;min-width:190px; }
  
  .settings-panel.open { opacity:1;transform:translateY(0);pointer-events:auto; }
  .settings-panel label { display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-family:'ZCOOL KuaiLe',cursive;font-size:12px;color:rgba(255,220,240,.65);letter-spacing:1px; }
  .settings-panel label:last-child { margin-bottom:0; }
  .settings-panel input[type="range"] { -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;background:rgba(200,160,255,.15);outline:none; }
  .settings-panel input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent-pink);cursor:pointer;box-shadow:0 0 8px rgba(247,168,196,.5); }
  .settings-value { font-size:11px;color:var(--accent-lavender);float:right; }

  /* ====== Mobile Adaptation ====== */
  @media(max-width:767px){
    /* Page layout: vertical stack */
    .page-inner {
      flex-direction: column;
      max-width: 100%;
      gap: 16px;
      padding: 0 12px;
    }
    /* Photo frame: smaller for mobile */
    .photo-wrap { align-self: center; }
    .photo-frame {
      width: 200px; height: 266px;
    }
    /* Text side center-aligned */
    .text-side {
      align-items: center;
      text-align: center;
    }
    .page-title {
      font-size: 22px;
      letter-spacing: 1px;
    }
    .page-subtitle {
      font-size: 13px;
      letter-spacing: 2px;
    }
    .deco-line {
      align-self: center;
    }
    /* Anime chars: smaller, repositioned */
    .anime-char { transform: scale(0.55); }
    .page[data-index="0"] .ac1 { top:-20px; right:-10px; }
    .page[data-index="0"] .ac2 { bottom:-18px; left:-8px; }
    .page[data-index="1"] .ac1 { top:-18px; right:-8px; }
    .page[data-index="1"] .ac2 { bottom:-16px; left:-6px; }
    .page[data-index="2"] .ac1 { top:-16px; right:-8px; }
    .page[data-index="2"] .ac2 { bottom:-16px; left:-6px; }
    .page[data-index="3"] .ac1 { top:-18px; right:-10px; }
    .page[data-index="3"] .ac2 { bottom:-18px; left:-8px; }
    /* Nav dots: larger touch targets, move to bottom */
    .nav-dots {
      right: auto; left: 50%; top: auto; bottom: 16px;
      transform: translateX(-50%);
      flex-direction: row;
      gap: 14px;
      background: rgba(20,12,50,0.5);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      padding: 8px 16px;
      border-radius: 20px;
      border: 1px solid rgba(200,160,255,0.15);
    }
    .nav-dot {
      width: 10px; height: 10px;
    }
    .nav-dot.active { transform: scale(1.3); }
    /* Scroll hint: position above bottom nav */
    .scroll-hint { bottom: 64px; }
    .scroll-hint-text { font-size: 11px; letter-spacing: 3px; }
    /* Page number */
    .page-number { bottom: 64px; left: 16px; font-size: 11px; }
    /* Settings toggle & panel */
    .settings-toggle { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 13px; }
    .settings-panel { top: 50px; right: 12px; min-width: 170px; padding: 12px 14px; }
    /* Flower hint: smaller text */
    #flowerHint {
      font-size: 16px;
      letter-spacing: 4px;
      bottom: 18%;
    }
  }

  /* Extra small screens */
  @media(max-width:380px){
    .photo-frame { width: 170px; height: 226px; }
    .page-title { font-size: 20px; }
    .page-subtitle { font-size: 12px; }
    .page-inner { gap: 12px; padding: 0 8px; }
    .anime-char { transform: scale(0.45); }
    #flowerHint { font-size: 14px; letter-spacing: 3px; }
  }

  /* Tablet / Desktop */
  @media(min-width:768px){
    .photo-frame{width:280px;height:370px} .page-title{font-size:34px} .page-subtitle{font-size:16px}
    .page-inner{max-width:600px;gap:30px}
    .page[data-index="0"] .ac1{width:95px;height:95px;} .page[data-index="0"] .ac2{width:86px;height:86px;}
    .page[data-index="1"] .ac1{width:90px;height:90px;} .page[data-index="1"] .ac2{width:82px;height:82px;}
    .page[data-index="2"] .ac1{width:88px;height:88px;} .page[data-index="2"] .ac2{width:84px;height:84px;}
    .page[data-index="3"] .ac1{width:92px;height:92px;} .page[data-index="3"] .ac2{width:80px;height:80px;}
  }