/* =====================================================================
   移动端适配
   桌面（>900px）：索引侧栏 + iPhone + Watch 三栏并排
   移动（≤900px）：固定顶栏（页面索引 / iPhone⇄Watch / 语言）+
                   单台设备按视口等比缩放 + 侧栏变抽屉
   设备内部一律按 402×874 / 208×248 的固定 pt 布局，外壳整体 scale，
   所以缩放不会破坏任何页面排版。
   ===================================================================== */
.mbar, .drbd { display: none }
.side .drx { display: none }

/* 触摸手势：表冠拖动、手表左右滑动不要被页面滚动吃掉 */
.wcrown { touch-action: none }
.wscreen { touch-action: pan-y }
.scroll { -webkit-overflow-scrolling: touch }

/* 手表底带（wcase::after 向下溢出 46px）会压住标题，给它让位 */
.dw-watch .devcap { margin-top: 112px }

/* 横屏提示：只在矮横屏出现 */
.rot { display: none }
html[lang^="zh"] .rot .en { display: none }
html:not([lang^="zh"]) .rot .zh { display: none }

@media (max-width: 1024px) {
  html, body { overscroll-behavior: none; overflow-x: hidden }
  body { background: radial-gradient(120% 62% at 50% 0%, #F8FAFD, #E7EBF1 58%, #DAE0E8) }

  /* ---------------- 顶栏 ---------------- */
  .mbar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 0; right: 0; top: 0; z-index: 70;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
    background: rgba(246, 249, 252, .86);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-bottom: .5px solid rgba(0, 0, 0, .07);
    font-family: var(--fs);
  }
  .mbtn {
    width: 36px; height: 36px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; color: #2B313B;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 0 0 .5px rgba(0, 0, 0, .06);
    transition: transform .12s;
  }
  .mbtn:active { transform: scale(.93) }
  .mbtn svg { width: 19px; height: 19px }
  .mseg {
    flex: 1 1 auto; max-width: 240px; height: 34px; display: flex; padding: 2px;
    border-radius: 12px; background: rgba(120, 130, 145, .14);
  }
  .mseg button {
    flex: 1; height: 100%; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: #4B5360; letter-spacing: -.1px; transition: background .2s, color .2s, box-shadow .2s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .mseg button.on { background: #fff; color: #0B1220; box-shadow: 0 1px 3px rgba(16, 24, 40, .14) }
  .mseg button svg { width: 14px; height: 14px; opacity: .5 }
  .mseg button.on svg { opacity: 1 }
  .mlang {
    display: flex; height: 28px; padding: 2px; border-radius: 9px; flex: 0 0 auto;
    background: rgba(120, 130, 145, .14);
  }
  .mlang button {
    min-width: 30px; padding: 0 8px; border-radius: 7px;
    font-size: 11.5px; font-weight: 700; color: #5A6270;
  }
  .mlang button.on { background: #fff; color: #0B1220; box-shadow: 0 1px 2px rgba(16, 24, 40, .12) }

  /* ---------------- 舞台：一次只显示一台设备 ---------------- */
  .stage {
    flex-direction: column; align-items: center; justify-content: center;
    flex-wrap: nowrap; gap: 0;
    padding: calc(var(--mbh, 52px) + 8px) 0 calc(env(safe-area-inset-bottom, 0px) + 10px);
    min-height: 100vh; min-height: 100dvh;
  }
  .devwrap { transform-origin: top center; margin: 0 auto; transition: transform .26s cubic-bezier(.2, .9, .2, 1) }
  body[data-dev="phone"] .dw-watch,
  body[data-dev="watch"] .dw-phone { display: none }
  .dw-phone { padding-top: 8px }
  .dw-watch { padding: 112px 18px 0 }
  .dw-watch .watch { margin-top: 0 }
  .devcap { margin-top: 11px }
  .whint { max-width: min(90vw, 330px); margin-top: 9px }

  /* ---------------- 侧栏 → 抽屉 ---------------- */
  .drbd {
    display: block; position: fixed; inset: 0; z-index: 75;
    background: rgba(14, 20, 30, .34); opacity: 0; pointer-events: none; transition: opacity .3s;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  body.dr-open .drbd { opacity: 1; pointer-events: auto }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 80;
    width: min(86vw, 330px); max-height: none;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px calc(env(safe-area-inset-bottom, 0px) + 22px);
    background: rgba(244, 247, 251, .96);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 24px 0 50px -22px rgba(16, 24, 40, .38);
    transform: translateX(-103%); transition: transform .34s cubic-bezier(.22, .9, .24, 1);
    -webkit-overflow-scrolling: touch;
  }
  body.dr-open .side { transform: none }
  .side .drx {
    display: flex; position: absolute; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 13px);
    width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center;
    background: rgba(120, 130, 145, .16); color: #4B5360;
  }
  .side .drx svg { width: 15px; height: 15px }

  /* 手指友好的点击区 */
  .side .it { padding: 9px 10px; font-size: 13px }
  .side .it em { font-size: 9.5px; padding: 2px 6px }
  .side .flag { padding: 9px 10px; font-size: 12px }
  .side .lang { height: 34px; margin-bottom: 14px }
  .side .lang button { height: 30px; font-size: 13px }
  .side .grp { margin: 16px 0 6px }
  .side h1 { font-size: 22px }
  .side .sub { font-size: 12px }
}

/* 横屏（矮视口）：压缩留白，尽量把设备放大 */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 560px) {
  .stage { padding-top: calc(var(--mbh, 52px) + 4px) 0 calc(env(safe-area-inset-bottom, 0px) + 4px) }
  .dw-phone { padding-top: 4px }
  .dw-watch { padding: 100px 18px 0 }
  .devcap, .whint { display: none }
  .rot {
    display: block; position: fixed; z-index: 65;
    right: calc(env(safe-area-inset-right, 0px) + 12px); top: calc(var(--mbh, 52px) + 12px);
    padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #4B5360;
    background: rgba(255, 255, 255, .82); font-family: var(--fs);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1), inset 0 0 0 .5px rgba(0, 0, 0, .06);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    pointer-events: none; max-width: 44vw; line-height: 1.35;
  }
}