/*
 * 横屏兜底提示。
 * 小程序正常情况下由 pageOrientation=landscape 自动旋转；
 * 对不支持脚本锁屏的普通移动浏览器，隐藏业务画布并给出完整提示，
 * 避免竖屏时出现内容裁剪或只显示半个页面。
 */
@media (orientation: portrait) and (max-width: 1024px) {
  /* 小程序由原生页面方向控制；即使方向切换有短暂延迟，也不要把 WebView
   * 内容隐藏成白屏。普通 H5 才显示“请横屏使用”兜底提示。 */
  html:not(.is-wxapp-webview).is-portrait-orientation body > * {
    visibility: hidden !important;
  }

  html:not(.is-wxapp-webview).is-portrait-orientation body::before {
    content: "请将手机横屏使用";
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: grid;
    place-items: center;
    padding: 136px 32px 32px;
    box-sizing: border-box;
    background:
      radial-gradient(circle at 50% 35%, rgba(226, 193, 143, 0.2), transparent 32%),
      #fffaf3;
    color: #5a422a;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
  }

  html:not(.is-wxapp-webview).is-portrait-orientation body::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2147483647;
    width: 54px;
    height: 92px;
    box-sizing: border-box;
    border: 3px solid #b5864c;
    border-radius: 13px;
    box-shadow:
      0 0 0 16px rgba(181, 134, 76, 0.08),
      0 10px 28px rgba(91, 62, 31, 0.12);
    transform: translate(-50%, -92px) rotate(90deg);
  }
}