/* ===========================================================
   手机端适配（底部固定导航 + 触屏体验）
   -----------------------------------------------------------
   为什么单独一个文件：这些规则只影响手机，放主样式里会和
   已经在调整设备像素比的样式稿互相压盖。要单独关掉这里的
   某一段，改这里就行，不动 style.css。

   为什么不直接改 style.css:269 那个 display:none：
   那边是「桌面样式在窄屏降级」，这里是「给窄屏补一套导航」，
   两件事分开写，回滚也方便 —— 删掉本文件、去掉 11 个页面
   里的 <link> 就完全恢复原样。

   断点用 900px，和 style.css 里隐藏 .nav-links 的断点对齐，
   正好是「桌面导航消失」和「手机导航出现」的交接点。
   =========================================================== */

/* ---------- 底部导航容器 ---------- */
.mnav{
  display:none;                 /* 桌面不出现 */
}

@media (max-width:900px){

  /* 底部导航常驻，独立于 .nav 的 sticky 流 */
  .mnav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(10,13,19,.94);
    border-top:1px solid var(--line);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 -12px 30px -20px #000;
  }
  .mnav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:48px;            /* 拇指友好 */
    border-radius:12px;
    color:var(--muted);
    font-size:11px;line-height:1.2;
    transition:color .18s,background .18s;
    -webkit-tap-highlight-color:transparent;
  }
  .mnav .mnav-i{font-size:19px;line-height:1;font-style:normal}
  .mnav a.on{color:var(--text);background:rgba(124,92,255,.14)}
  .mnav a.on .mnav-i{filter:drop-shadow(0 0 8px rgba(124,92,255,.85))}
  .mnav a:active{background:rgba(255,255,255,.06)}

  /* 给页面底部留出导航高度，否则最后一段内容永远被盖住。
     70px ≈ 48 触控区 + 上下内边距，安全区另加 */
  body{
    padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));
  }

  /* 心愿单浮动按钮上移，别和底部导航叠在一起 */
  .wish-fab{
    bottom:calc(82px + env(safe-area-inset-bottom,0px));
    right:16px;
  }
  /* 面板在手机上变成底部抽屉，从导航上方弹出 */
  .wish-panel{
    left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom,0px));
    width:auto;
    max-height:calc(100vh - 190px);
    max-height:calc(100dvh - 190px);
  }
  /* 成交播报挪到左下，让开右下角的心愿单按钮。
     加 body 前缀提高优先级：style.css 里 .announce 的 left/bottom 是固定定位，
     这里必须在窄屏上覆盖掉它。transform 不动 —— .announce 用它做滑入动效。 */
  body .announce{
    left:12px;
    right:auto;
    bottom:calc(82px + env(safe-area-inset-bottom,0px));
    max-width:calc(100vw - 116px);
  }
  body .announce .a-text{font-size:12.5px}

  /* ---------- 触屏手感 ---------- */

  /* 卡片上的 ♡ 从 28px 放大到 44px，好点；视觉圆仍靠 border-radius */
  .wish-btn{
    width:44px;height:44px;
    top:6px;left:6px;
    font-size:19px;
  }

  /* 输入框字号 ≥16px，否则 iOS 聚焦时会自动放大整个页面，
     而且放大后不会自己缩回来 */
  input,select,textarea{
    font-size:16px;
  }

  /* 手机上不存在 hover，把「浮起」类动效关掉，避免点完卡在半透明状态 */
  .card:hover,.mod-card:hover,.deal-card:hover,.acc-row:hover{
    transform:none;
  }
  .btn-primary:hover{transform:none}

  /* 卡片内边距在窄屏收一点，一屏多放半张卡 */
  .wrap{padding:0 16px}
  .hero{padding-top:36px}
}

/* 极窄屏（iPhone SE 一类，320-360px）再压一档 */
@media (max-width:360px){
  .mnav a{font-size:10px}
  .mnav .mnav-i{font-size:17px}
  .logo-text{font-size:14px}
  .logo-text em{display:none}      /* 英文小字在这个宽度没必要占位 */
}

/* 横屏矮屏：底部导航会吃掉一半可视高度，改成只留图标 */
@media (max-width:900px) and (max-height:430px) and (orientation:landscape){
  .mnav a{min-height:40px;font-size:0;gap:0}
  .mnav .mnav-i{font-size:17px}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
}

/* ===========================================================
   首页皮套区：模型缺失时不要留 300px 空白（全宽度生效）
   -----------------------------------------------------------
   .vtuber-stage 写死 height:300px + opacity:0，而 uploads/vtuber/
   model/ 目录里没有模型文件，所以它一直占着 300px 的透明空白 ——
   手机和桌面都是。状态由 vtuber.js 写在 data-state 上：
     no-model / missing-lib / error → 收成 0 高，Hero 直接顶上
     loading / ready               → 保留正常高度
   用 :not() 而不是给每个状态写一遍，以后加状态不会漏。

   把模型放进 uploads/vtuber/model/ 后，这里会自动恢复显示，
   不需要删规则。
   =========================================================== */
.vtuber-stage:not([data-state="ready"]):not([data-state="loading"]){
  height:0;
  margin:0;
  overflow:hidden;
}