/* =============================================================
 *  mobile.css  —  竖屏手机统一适配
 *  目标：在窄屏（≤ 768px）和竖屏（portrait）下，让每个页面
 *  自动从桌面"绝对定位 + 百分比 + 双列"布局，退化为
 *  单列、自适应宽度、可在每屏内部上下滚动的形式。
 *
 *  仅在 max-width: 768px 时生效，绝不影响桌面/平板横屏体验。
 * ============================================================= */

@media (max-width: 768px) {

  /* ---------- 全局 ---------- */
  html, body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  /* ---------- index.html 里的 iframe ---------- */
  #iframepage {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    border: 0;
  }

  /* ============================================================
   *  login.html
   * ============================================================ */
  .wrapper { width: 100%; height: 100vh; min-height: 100vh; }
  .container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 80px 20px 40px;
    height: auto;
  }
  .container h1 { font-size: 30px; }
  form input,
  form button {
    width: 80%;
    max-width: 320px;
    font-size: 16px;
  }
  form input:focus { width: 86%; }
  /* 登录页背景图片缩小，避免溢出 */
  .bg-bubbles li img {
    max-width: 80px !important;
    max-height: 80px !important;
  }

  /* ============================================================
   *  BirthdayCake.html
   *  - SVG 蛋糕原生尺寸 200x500，手机上直接居中显示即可，
   *    任何 transform: scale 都会把蛋糕和蜡烛的相对位置错开。
   *  - "喜欢 / 不喜欢"按钮原本绝对定位在 left:25% / right:25%，
   *    竖屏下改成上下叠放并居中。
   * ============================================================ */
  body.bg { position: relative; min-height: 100vh; overflow-x: hidden; }

  /* 不做任何缩放，仅把蛋糕水平居中。蜡烛的 margin-left:49.5% 配合
     页面 100% 宽度仍然落在蛋糕中线附近，二者保持对齐。 */
  #cake {
    display: block !important;
    margin: -10em auto 0 !important;
  }
  /* 顶部祝福图：仅做水平居中，让它显示在蛋糕上方而不与蜡烛冲突 */
  .happy {
    left: 50% !important;
    top: 8% !important;
    transform: translateX(-50%);
    width: 70%;
    text-align: center;
  }
  .happy img { width: 100%; height: auto; }

  /* 按钮统一居中并自适应宽度 */
  .button-style1,
  .button-style2 {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    animation: none !important;
    -webkit-animation: none !important;
  }
  .button-style1 { top: 72% !important; }
  .button-style2 { top: 84% !important; }
  .link1, .link2 {
    width: 60vw;
    max-width: 280px;
    height: 54px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bt1, .bt2 { position: static; top: auto; }

  /* ============================================================
   *  Memories.html  (fullPage 多屏)
   *  - 每屏对话框原本贴在右侧 24%，左侧 20% 处是时间轴竖线
   *  - 竖屏下：隐藏时间轴竖线和小圆点，对话框全宽并允许内部滚动
   * ============================================================ */
  .timeline,
  .timepoint,
  .timepoint11,
  .timepoint21,
  .timepoint31,
  .timepoint71,
  .timepoint91,
  .ly-triangle11, .ly-triangle12,
  .ly-triangle21, .ly-triangle22, .ly-triangle23,
  .ly-triangle31, .ly-triangle32,
  .ly-triangle71, .ly-triangle72,
  .ly-triangle82,
  .ly-triangle91, .ly-triangle92 {
    display: none !important;
  }

  /* 所有第一屏的两栏文字改单列 */
  .ly-txt01, .ly-txt02 {
    position: relative !important;
    width: 90% !important;
    left: 5% !important;
    right: auto !important;
    top: auto !important;
    margin: 0 auto 12px !important;
  }
  .ly-stxt01, .ly-stxt02, .ly-stxt03, .ly-stxt04, .ly-stxt05,
  .ly-stxt06, .ly-stxt07, .ly-stxt08, .ly-stxt09, .ly-stxt10 {
    font-size: 18px !important;
    margin-top: 0 !important;
    line-height: 1.6;
    left: 0 !important;
    right: 0 !important;
  }
  /* 把 ly-box01 的开场动画退化掉，避免在窄屏被压成一个小圆点 */
  .ly-box01 {
    width: 92% !important;
    height: auto !important;
    min-height: 80vh !important;
    left: 4% !important;
    right: 4% !important;
    top: 4% !important;
    bottom: auto !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
    background-color: rgba(255,255,255,0.6) !important;
    animation: none !important;
    -webkit-animation: none !important;
    padding: 16px 12px;
    overflow-y: auto;
  }

  /* 第 2~5 屏的对话框：全宽，允许纵向滚动 */
  .ly-box12, .ly-box23, .ly-box32, .ly-box82,
  .active .ly-box12, .active .ly-box23, .active .ly-box32, .active .ly-box82 {
    width: 92% !important;
    height: 86% !important;
    left: 4% !important;
    right: 4% !important;
    top: 7% !important;
    bottom: auto !important;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    -webkit-transform: none !important;
  }
  /* 顶部 "HappyBirthday" 图片 */
  .ly-txt13, .ly-txt25, .ly-txt33 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 60% !important;
    height: auto !important;
    margin: 8px auto 6px !important;
  }
  .ly-txt13 img, .ly-txt25 img, .ly-txt33 img {
    width: 100% !important;
    height: auto !important;
  }
  /* 文本块：全宽 + 自适应高度 + 居中 */
  .ly-txt14, .ly-txt34, .ly-txt84, .ly-txt26,
  .active .ly-txt14, .active .ly-txt34, .active .ly-txt84, .active .ly-txt26 {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 92% !important;
    height: auto !important;
    margin: 8px auto !important;
    padding: 4px 8px;
    font-size: 14px !important;
    line-height: 1.7 !important;
    overflow: visible !important;
    transition: none !important;
  }
  /* 图片块全宽 */
  .ly-imgbox11, .ly-imgbox23, .ly-imgbox31,
  .active .ly-imgbox11, .active .ly-imgbox23, .active .ly-imgbox31 {
    position: relative !important;
    width: 92% !important;
    height: auto !important;
    margin: 8px auto !important;
    bottom: auto !important;
    border-radius: 8px;
  }
  .ly-imgbox11 img, .ly-imgbox23 img, .ly-imgbox31 img,
  .ly-img11, .ly-img23, .ly-img31 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  /* 让 visited 状态不再固化窄屏下的 80% 居中盒子尺寸 */
  .section.visited .ly-box01 {
    width: 92% !important;
    height: auto !important;
    min-height: 80vh !important;
    left: 4% !important;
    bottom: auto !important;
    top: 4% !important;
  }

  /* 把背景气泡缩小，避免在手机上充当主视觉 */
  .bg-bubbles li {
    width: 30px !important;
    height: 30px !important;
  }
  .bg-bubbles li:nth-child(n+6) { display: none; }
  .bg-bubbles li img { max-width: 80px !important; max-height: 80px !important; }

  /* fullPage 左侧的小圆点导航：手机上挪到右下，避免挡内容 */
  #fp-nav.left { left: auto !important; right: 8px !important; top: auto !important; bottom: 16px !important; margin: 0 !important; }
  #fp-nav ul li, .fp-slidesNav ul li { width: 10px; height: 10px; margin: 5px; }

  /* 音乐按钮缩小一点，避免太抢眼 */
  #bgm-toggle {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    top: 10px !important;
    right: 10px !important;
  }

  /* ============================================================
   *  EasterEgg.html
   *  Canvas 已经按 innerWidth/innerHeight 自适应；只调祝福语层
   * ============================================================ */
  .wish-line {
    font-size: 22px !important;
    white-space: normal !important;
    max-width: 86vw;
    line-height: 1.5;
    padding: 0 8px;
  }
}

/* 极窄屏（≤ 380px）再做一轮收紧 */
@media (max-width: 380px) {
  .container h1 { font-size: 26px; }
  .link1, .link2 { height: 48px; font-size: 16px; }
  .ly-stxt01, .ly-stxt02, .ly-stxt03, .ly-stxt04, .ly-stxt05,
  .ly-stxt06, .ly-stxt07, .ly-stxt08, .ly-stxt09, .ly-stxt10 {
    font-size: 16px !important;
  }
  .ly-txt14, .ly-txt34, .ly-txt84, .ly-txt26 {
    font-size: 13px !important;
  }
  .wish-line { font-size: 18px !important; }
}