/* =====================================================================
   phone_frame.css —— 电脑 / 平板上的「手机界面模拟」（b07497 新增）
   ---------------------------------------------------------------------
   做两件事（只管“显示在哪儿、多宽”，不碰任何功能逻辑）：
     ① 宽屏时把正文收成一条 420px 宽、居中的“手机屏”，两侧留深色底；
     ② 铺满整个窗口的浮层（新手教程、各种遮罩弹窗、底部导航、挂件）
        从“占满整个窗口”改成“只占手机那一条”，并跟着居中。
   ★手机上（窗口 < 520px，含微信里打开）本文件所有规则都不生效 ——
     手机上的画面一个像素都不会变。
   ★不想要“手机模拟”效果：删掉 index.html 里引用本文件的那一行即可。
   ===================================================================== */
@media screen and (min-width: 560px) {

  /* 手机列之外的底色（比正文更深一点，衬出“屏幕”的边界） */
  html { background: #07070d; }

  /* ① 正文列 = 手机宽度，居中 */
  body {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 0 0 1px #242438, 0 0 46px rgba(0, 0, 0, .75);
  }

  /* ② 铺满整屏的浮层/导航 → 收进手机那一条并居中
        （left:50% + 负一半宽 = 居中；用 margin 而不是 transform，
          避免和页面里已有的 transform 动画打架） */
  .tab-bar,
  .result-overlay,
  #tg-overlay,
  #pd-drill-banner,
  [style*="position:fixed"][style*="inset:0"]:not(canvas),
  [style*="position:fixed"][style*="inset: 0"]:not(canvas),
  [style*="position:fixed"][style*="top:0;left:0;right:0"],
  [style*="position:fixed"][style*="left:0;top:0;right:0"],
  [style*="position:fixed"][style*="top: 0; left: 0; right: 0"] {
    left: 50% !important;
    right: auto !important;
    width: 420px !important;
    max-width: 420px !important;
    margin-left: -210px !important;
  }

  /* ③ 贴着左右两边的小挂件（阿胡小人、录音挂件、右下角状态角标）
        → 挪进手机列里面，不要飘到手机外面去。
        #pet-float 只在“没被拖动过”时生效，用户拖过一次就不再干扰。 */
  #pet-float:not([style*="left"]) { right: calc(50% - 210px + 18px) !important; }
  [style*="position:fixed;left:12px"] { margin-left: calc(50% - 210px) !important; }
  [style*="position:fixed;right:14px"],
  [style*="position: fixed; right: 14px"] { right: calc(50% - 210px + 14px) !important; }
  [style*="position:fixed;right:10px"],
  [style*="position: fixed; right: 10px"] { right: calc(50% - 210px + 10px) !important; }
}