/* ============================================================
   j81-portrait.css — 竖屏自适应层（v298 2026-10-27）
   ------------------------------------------------------------
   原理：横屏维持 #j81-canvas 1920×1080 整体等比缩放不变。
        竖屏时 j81-scale.js 把 transform 置 none、画布撑满视口，
        本文件用 @media (orientation: portrait) 把各屏内部
        从「1920 设计稿绝对定位」改为「纵向流式布局」。
        断点用 orientation（旋转即切换，不刷新、进度不丢）。
   适配最小宽度 360px。
   ============================================================ */

@media (orientation: portrait) {

  /* ---------- 0) 画布与全局 ---------- */
  html, body { overflow: hidden; }
  .j81-app { min-height: 0 !important; height: 100%; }
  #j81-canvas {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    overflow: hidden;
  }
  /* 全屏节：竖屏允许内部纵向滚动（内容超过一屏时） */
  #j81-canvas > section,
  #j81-canvas > div[id^="j81-"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 点击热区：竖屏按钮最小 44×44 */
  #j81-canvas button {
    min-height: 44px;
    min-width: 44px;
  }
  /* 玉章按钮：原设计高 70px、宽=高×2.48 且全 !important，
     三枚并排 520px 远超竖屏——缩到 46px 高、允许换行。
     提高选择器优先级压过横屏的 nowrap 钉规 */
  #j81-canvas button.jade-badge-btn {
    --jade-h: 46px !important;
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  /* 竖屏徽章底框兜底（仅卷轴系面板内）：这些面板的徽章图在窄宽下
     渲染缺席，按钮会变成"裸文字"——补可见边框底。首页 CTA 徽章
     渲染正常，不在此列，保持原样 */
  #j81-stage .jade-badge-btn,
  #lv1-verdict-panel .jade-badge-btn,
  #j81-scroll-panel .jade-badge-btn,
  #j81-gate-panel .jade-badge-btn {
    border: 1px solid rgba(255, 214, 110, .65) !important;
    border-radius: 9px !important;
    background: rgba(38, 26, 6, .82) !important;
    box-sizing: border-box !important;
  }
  #j81-canvas .jade-badge-btn > .jade-badge-label,
  #j81-canvas .jade-badge-btn > span { white-space: normal !important; }
  /* 2026-10-27 纠偏问题2：玉牌底框 ::before 原用 100cqh/100cqw 容器查询
     尺寸——旧内核 WebView/部分手机浏览器不支持 container query 时伪元素
     塌成 0×0，按钮只剩金字（秘秘真机实测）。
     竖屏下改用 --jade-h 直接换算（按钮高==--jade-h、宽==--jade-h×2.48，
     数学等价），彻底摆脱容器查询依赖。横屏不动。 */
  #j81-canvas .jade-badge-btn::before {
    width: calc(var(--jade-h) * 1.05) !important;
    height: calc(var(--jade-h) * (var(--badge-ar) - 0.24) * 1.05) !important;
  }
  /* 输入框 ≥16px，防 iOS 聚焦自动放大 */
  #j81-canvas input, #j81-canvas textarea {
    font-size: 16px !important;
  }
  /* 通用大面板：竖屏宽度 100%、内部可滚动 */
  .j81-panel {
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
  }

  /* ---------- 1) 开屏 ---------- */
  #j81-opening .j81-op-stage { padding: 24px 16px; }
  #j81-opening .j81-op-line {
    font-size: clamp(26px, 8.6vw, 56px) !important;
    white-space: normal !important;
  }
  /* 纠偏：index.html 内联 <style> 在同名选择器上后加载覆盖外链 CSS，
     这里必须 !important 才能压过（360px 下原 115px 横内边距把内容盒挤到
     130px，logo 又被 margin:auto 顶到右侧溢出裁切） */
  #j81-op-logo { padding: 0 12px !important; }
  #j81-op-logo .j81-logo { max-width: 82vw !important; max-height: 22vh !important; }

  /* ---------- 2) 首页 ---------- */
  .j81-home-brand {
    left: 0 !important; right: 0 !important;
    top: 14px !important; width: auto !important;
    text-align: center;
    transform: none !important;   /* 原 translateX(-50%) 会把整行推出半屏 */
  }
  .j81-home-tag {
    font-size: 14px !important;
    line-height: 1.9 !important;
    max-width: 92vw !important;
    letter-spacing: 0.02em !important;
  }
  #j81-saints-stage {
    position: absolute !important;
    inset: auto !important;
    left: 0 !important; right: 0 !important;
    top: 108px !important;
    height: 46vh !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 2px 6px;
    padding: 0 6px;
    pointer-events: none;
  }
  #j81-saints-stage .saint {
    position: relative !important;
    left: auto !important; bottom: auto !important;
    width: 28vw !important;
    max-width: 168px;
    transform: none !important;
    animation: none !important;
    pointer-events: auto;
  }
  #j81-saints-stage .saint .saint-img {
    max-height: 19vh;
  }
  #j81-saints-stage .saint .saint-cloud {
    --cloud-bottom: -26% !important;
    width: 96% !important;
  }
  /* 气泡同步缩小（原为 104-120px 宽、字 50-67px，竖屏人物缩一半） */
  #j81-saints-stage .saint .saint-bubble {
    width: 54px !important;
    height: calc(54px * 348 / 384) !important;
    padding: 0 4px 12px !important;
  }
  #j81-saints-stage .saint .saint-bubble span {
    font-size: 26px !important;
  }
  .j81-home-cta {
    left: 0 !important; right: 0 !important;
    bottom: 64px !important;
    width: auto !important;
    transform: none !important;   /* 原 translateX(-50%) 同理 */
    display: flex;
    justify-content: center;
    gap: 14px;
  }
  .j81-home-cta .jade-badge-btn {
    min-width: 148px;
    min-height: 54px;
    font-size: 17px !important;   /* 纠偏：原被 13px 全局钉压死，主按钮太小的可读性问题 */
  }
  /* 底部“镜主档案”小字行 */
  #j81-home > div:last-of-type {
    left: 0 !important; right: 0 !important;
    bottom: 12px !important;
    width: auto !important;
    text-align: center;
  }
  #j81-demo-edit { font-size: 14px !important; min-height: 40px; }

  /* ---------- 3) 档案六题（j81-demo） ---------- */
  #j81-demo { display: flex; flex-direction: column; justify-content: center; }
  #j81-demo-stage {
    max-width: 92vw !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px;
    box-sizing: border-box !important;
  }
  .j81-demo-mirror {
    font-size: clamp(20px, 5.6vw, 30px) !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .j81-demo-opts {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
  }
  .j81-demo-opt {
    min-width: 108px;
    min-height: 52px;
    font-size: 19px;
  }
  #j81-demo-dots { margin-top: 22px; }
  #j81-demo-nav { margin-top: 14px; }
  .j81-demo-foot { font-size: 12px !important; padding: 0 16px; }

  /* ---------- 4) 五问 / 判词（lv1-verdict-modal） ---------- */
  .j81-lv1-panel {
    bottom: 8px !important;
    height: auto !important;
    overflow-y: auto;
    padding: 18px 16px 20px !important;
    box-sizing: border-box;
  }
  .j81-lv1-panel h1 { font-size: 30px !important; }
  .j81-lv1-panel .j81-intro { font-size: 14px !important; }
  .lv1-q-scene { font-size: 16px !important; }
  .lv1-q-stem {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
  .lv1-opts { gap: 10px !important; }
  .lv1-opt { padding: 12px 12px !important; }
  .lv1-opt .letter { font-size: 19px !important; flex-basis: 26px !important; }
  .lv1-opt .txt { font-size: 16px !important; }
  .lv1-opt .j81-pick { padding: 8px 10px !important; font-size: 13px !important; }
  .lv1-gauges { gap: 10px !important; }
  /* 判词结果：三句局部（境/镜/道）原设计是竖排三列（卷轴风），
     竖屏改为横排块式，避免列高超屏截断。
     用 #lv1-verdict-panel 前缀提优先级——这些样式由 JS 运行期注入，
     注入点在我们的样式表之后，同优先级下后注入者胜。 */
  #lv1-verdict-panel .lv1-three { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  #lv1-verdict-panel .lv1-shot { writing-mode: horizontal-tb !important; height: auto !important; padding: 12px 14px !important; }
  #lv1-verdict-panel .lv1-shot-tag { position: static !important; width: auto !important; height: auto !important; margin-bottom: 4px; }
  #lv1-verdict-panel .lv1-shot-sub { font-size: 12px !important; display: block; margin: 2px 0 4px; }
  #lv1-verdict-panel .lv1-shot-text { font-size: 15px !important; line-height: 1.7 !important; writing-mode: horizontal-tb !important; }
  .lv1-core-text { font-size: 19px !important; line-height: 1.7 !important; }
  .lv1-foot { font-size: 13px !important; }
  .j81-lv1-panel .j81-actions {
    position: static !important;
    display: flex !important;
    width: auto !important;
    margin-top: 18px;
    gap: 12px;
  }
  .j81-lv1-panel .j81-actions .jade-badge-btn {
    flex: 1;
    min-height: 54px;
    font-size: 18px;
  }

  /* ---------- 5) 闯关页（j81-stage） ---------- */
  /* 注：面板/内容/人物的最终几何由 app_r185.js applyPortraitReflow()
     以 inline !important 收尾（横屏钉链也是 inline !important，
     CSS 改不动）；这里的规则做字体/间距/兜底。 */
  #j81-stage { overflow-y: auto; }
  #j81-stage-panel { box-sizing: border-box; }
  #j81-stage .gs-rod { display: none !important; }
  /* 人物缩到右上角 */
  #j81-stage-char { z-index: 6; }
  #j81-stage .j81-stage-cloud { width: 86% !important; }
  #j81-stage-title {
    font-size: 24px !important;
    padding-right: 118px;
    box-sizing: border-box;
  }
  #j81-stage-body {
    min-height: 24vh;
    font-size: 16px !important;
    line-height: 1.8 !important;
    padding: 12px 10px;
    /* 竖屏卷轴框被拉高后，框体中缝装饰会从文字底下透出来——
       给正文垫一层深色底，既压住装饰又保证可读性 */
    background: rgba(3, 7, 15, .78);
    border-radius: 8px;
  }
  /* 竖屏人物缩为右上角小图，云朵藏不住（钉链按设计稿坐标回写），直接隐藏 */
  #j81-stage-cloud { display: none !important; }
  /* 过招选项与输入区 */
  .j81-trial-box { width: 100% !important; }
  .j81-trial-box button, #j81-stage-choices button {
    min-height: 52px;
    font-size: 16px;
  }
  #j81-stage input, #j81-stage textarea {
    box-sizing: border-box;
    min-height: 48px;
  }
  #j81-stage .j81-actions {
    gap: 10px;
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }
  #j81-stage .j81-actions .jade-badge-btn {
    flex: 1 1 28%;
    min-width: 96px;
    min-height: 54px;
    font-size: 14px !important;
    padding: 4px 6px !important;
  }

  /* 零面积/隐藏按钮的徽章伪元素回收（app_r185 竖屏重排打 j81-pf-deadbtn 标记） */
  #j81-stage .j81-pf-deadbtn::before,
  #j81-stage .j81-pf-deadbtn::after {
    display: none !important;
  }

  /* 内容列可滚动：过招轮选项+输入框+按钮超过一屏时下滑可达（不白屏不截断） */
  #j81-stage-panel .j81-scroll-copy,
  #j81-scroll-panel .j81-scroll-copy,
  #j81-gate-panel .j81-scroll-copy {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- 6) 选关面板 ---------- */
  #j81-jump { top: auto !important; left: auto !important; }
  #j81-jump-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: 84px !important;
    top: 8% !important;
    width: auto !important;
    max-height: none !important;
  }
  #j81-jump-panel button { min-height: 44px; }

  /* ---------- 7) 弹层通用：认证 / 画像 / 道场等 j81-gate 系 ---------- */
  .j81-auth-modal .j81-panel,
  .j81-portrait .j81-panel {
    left: 8px !important; right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto;
  }

  /* ---------- 8) 行程图（j81-board-view） ---------- */
  #j81-board-view { overflow: auto !important; }

  /* ---------- 9) 定盘 L3 页（选关后进关前的确认页） ---------- */
  #j81-l3 .gs-rod { display: none !important; }
  #j81-l3-char { z-index: 6; }
  #j81-l3-cloud { display: none !important; }
  #j81-l3-title {
    font-size: 28px !important;
    padding-right: 118px;
    box-sizing: border-box;
  }
  #j81-l3-kicker, #j81-l3-meta {
    font-size: 13px !important;
    align-self: flex-start !important;
    text-align: left !important;
  }
  #j81-l3-desc {
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding: 12px 10px;
    background: rgba(3, 7, 15, .78);
    border-radius: 8px;
    align-self: stretch !important;
  }
  #j81-l3-bubble {
    font-size: 12px !important;
    max-width: 110px;
  }
  #j81-l3 .j81-scroll-actions .jade-badge-btn,
  #j81-l3 .j81-home-cta .jade-badge-btn {
    min-height: 52px;
    font-size: 15px !important;
  }
}