/* ============================================================
   单词过关王 · 全局自适应层（手机 / iPad / 安卓平板 / 桌面浏览器）
   ------------------------------------------------------------
   各页面自身 CSS 都遵循同一套基准（设计稿 375px，1rem = 10px）：
     html { font-size: calc(min(100vw, 540px) / 37.5) }
     #app { max-width: 540px }
   手机上按屏宽等比缩放，表现正常；但 iPad / 平板 / 桌面会停在 540px，
   中间一条窄界面、两侧大片空白。

   本文件只处理大屏（宽 ≥ 600px 且高 ≥ 600px；min-height 条件用于把横屏
   手机排除在平板逻辑之外），并把两个概念拆开，各自取上限：
     --scale  rem（字号/间距）缩放基准 —— 约 2 倍封顶，避免大屏字越放越大
     --shell  主体列宽 —— 尽量铺满屏幕，把两侧空白压到最小
   两者解耦后，卡片/列表按 % 的部分会自然摊开填满宽度，而字号仍保持平板
   舒适区间，不会变成"放大的手机截图"。

   少数页面必须保持设计稿比例，用 <html> 上的类名单独约束：
     .ratio-lock  首页：顶部 Lottie 天空按 540:448 调校，列宽必须等于缩放
                  基准，否则动画左右两侧会露白
     .fit-screen  全屏交互页（加油背单词、闪卡学习）：body overflow:hidden +
                  #app 锁满屏高，列宽直接铺满屏幕，缩放基准改由视口高度收口
                  （canvas 按父容器尺寸重建、面板用 % 定位，所以可以拉宽；
                  画布内元素的大小由 js/study.js 里的 FS 倍数跟随屏幕缩放）

   引入要求：必须放在各页面自身 CSS 之后（同优先级靠后者生效）。
   ============================================================ */

@media (min-width: 600px) and (min-height: 600px) {

  /* 竖屏：平板 / iPad / 桌面 */
  :root {
    --scale: min(100vw, 760px);
    --shell: min(100vw, 980px);
  }

  /* 横屏：竖向空间有限，缩放基准按视口高度收口；
     列宽不再受高度限制（普通页可滚动，宽度只影响横向观感） */
  @media (orientation: landscape) {
    :root {
      --scale: min(100vw, 760px, 62vh);
      --shell: min(100vw, 1260px);
    }
  }

  /* 首页：保持 375 设计稿比例（缩放基准 = 列宽） */
  html.ratio-lock {
    --scale: min(100vw, 880px);
    --shell: var(--scale);
  }

  /* 全屏页（加油背单词、闪卡学习）：body overflow:hidden + #app 锁满屏高。
     这两页的内部面板靠 % 定位、canvas 按父容器尺寸重建，所以列宽直接铺满屏幕
     （不再留深色/纯色边条），只把 rem 缩放基准按视口高度收口，
     保证面板、按钮、文字在一屏内放得下。 */
  html.fit-screen {
    --scale: min(100vw, 700px, 66vh);
    --shell: min(100vw, 1400px);
  }

  /* 拼写面板原本顶部对齐（手机上屏幕短看不出），大屏上会堆在上半部、
     下半屏空一大片，改成与其他面板一致垂直居中 */
  html.fit-screen .spell-panel {
    justify-content: center;
  }

  /* 整套 rem 基准 */
  html {
    font-size: calc(var(--scale) / 37.5);
  }

  /* 主体 + 各类贴底固定层必须同一个宽度，否则会错位 */
  #app,
  .tabbar,
  .sheet,
  .cal-sheet,
  .wd-sheet {
    max-width: var(--shell);
  }

  /* 底部通栏按钮：原本按视口宽算（calc(100% - 3.2rem)），需跟随主体 */
  .btn-add,
  .btn-save {
    width: calc(min(100vw, var(--shell)) - 3.2rem);
  }

  /* 仍有少量留白时（首页/全屏页必须保持比例），让主体列与背景有清晰分界 */
  #app {
    box-shadow: 0 0 3rem rgba(28, 39, 64, 0.07);
  }

  /* iPad / Safari 工具栏收起时不再遮挡底部内容 */
  @supports (min-height: 100dvh) {
    #app {
      min-height: 100dvh;
    }
  }

  /* 全屏页不能比可见区域高，否则底部面板会被 Safari 工具栏吃掉 */
  @supports (height: 100dvh) {
    html.fit-screen #app {
      height: 100dvh;
    }
  }
}