/* ============================================================
   AIGG Runtime — "Living Table" 横竖屏方向适配层(mobile.css)
   ------------------------------------------------------------
   设计稿 28 页每页都预留了 <link href="../styles/mobile.css"> 插槽,
   这里是它的实现:手机横屏(640×360 / 844×390)与手机竖屏(360×640 /
   390×844)四档画幅的全套布局适配。
   加载顺序约定(与设计稿一致):ds.css → 页内 <style> → mobile.css。
   作用域防线:
     · 家族页段(§1–§6)一律以 body[data-fam] 前缀门控 —— 该标记由
       shared/ui.js 在 AIGG.mount 时按家族写入,保证规则绝不外溢到
       lobby / 旧运行时等同名类页面;
     · spec 运行时段(§7)以 body.aigg-physical-ui / body.aigg-runtime-ui
       门控,并按 living-theme.css:146 的特异性策略使用 !important。
   断点语言(与设计稿 Mobile Preview 的预览器一致):
     手机横屏 = (orientation: landscape) and (max-height: 560px)
     手机竖屏 = (orientation: portrait)  and (max-width: 480px)
   设计原则:UI 只做"框",横屏时框从上下边移到四角,把矮屏的垂直
   空间全部让给舞台;所有 fixed chrome 继续带 env(safe-area-inset-*)。
   ============================================================ */

/* ============================================================
   1) 全向通用:刘海机横屏安全区(竖屏规则页内已带)
   ============================================================ */
body[data-fam] .topbar {
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
}

/* ============================================================
   2) 手机竖屏(≤480px 宽)细节抛光
   页内 ≤600px 断点已做主适配,这里只补设计稿验收口径的细节。
   ============================================================ */
@media (orientation: portrait) and (max-width: 480px) {
  /* 主持气泡限三行,长旁白不再把气泡顶出屏 */
  body[data-fam] .host-dock { max-width: calc(100% - 24px); }
  body[data-fam] .host-bubble { font-size: 12.5px; }
  body[data-fam] .host-bubble span {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* 实体动作提示在窄屏更紧凑 */
  body[data-fam] .phys-prompt { min-width: 96px; padding: 11px 11px 9px; }
  body[data-fam] .phys-prompt .pp-icon { width: 46px; height: 46px; }
  /* 顶栏右侧控件防溢出 */
  body[data-fam] .topbar .game-title { display: none; }
  /* 设置面板不超屏 */
  body[data-fam] #aiggTweaks { max-height: calc(100dvh - 84px); overflow-y: auto; width: min(260px, calc(100vw - 28px)); }
}

/* ============================================================
   3) 手机横屏 — ds.css 公共 chrome 重排
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  /* —— 顶栏:压扁一档,中段留给并入的页面药丸(§4) —— */
  body[data-fam] .topbar { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; gap: 8px; }
  body[data-fam] .topbar .brand-mark { padding: 6px 11px 6px 7px; }
  body[data-fam] .topbar .game-title { display: none; }
  body[data-fam] .topbar .icon-btn { width: 36px; height: 36px; }
  body[data-fam] .view-switch a { padding: 6px 12px; }

  /* —— 主持坞:左下紧凑形态(头像 44px + 两行气泡) —— */
  body[data-fam] .host-dock {
    left: calc(10px + env(safe-area-inset-left));
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: min(320px, 36vw);
    gap: 9px;
  }
  body[data-fam] .host-avatar { width: 44px; height: 44px; }
  body[data-fam] .host-bubble { padding: 8px 12px; font-size: 12px; line-height: 1.4; }
  body[data-fam] .host-bubble .host-name { font-size: 9.5px; margin-bottom: 2px; }
  body[data-fam] .host-bubble span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* —— 实体动作提示:右下横排药丸(图标 + 文案一行) —— */
  body[data-fam] .phys-prompt {
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    flex-direction: row; align-items: center; gap: 9px;
    min-width: 0; max-width: min(280px, 34vw);
    padding: 8px 14px 8px 9px;
  }
  body[data-fam] .phys-prompt .pp-kicker { display: none; }
  body[data-fam] .phys-prompt .pp-icon { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; }
  body[data-fam] .phys-prompt .pp-icon svg { width: 20px; height: 20px; }
  body[data-fam] .phys-prompt .pp-label { font-size: 12.5px; text-align: left; white-space: nowrap; }
  body[data-fam] .phys-prompt .pp-sub { display: none; }

  /* —— toast 靠近顶部但不压顶栏中段药丸 —— */
  body[data-fam] .toast { top: 54px; }

  /* —— 设置面板限高可滚 —— */
  body[data-fam] #aiggTweaks { top: 52px; max-height: calc(100dvh - 64px); overflow-y: auto; }

  /* —— 视图说明小字:横屏一律隐藏(设计稿口径) —— */
  body[data-fam] .twonote { display: none; }
}

/* ============================================================
   4) 手机横屏 — 共享页面 chrome 惯例
   设计稿铁律:顶部第二排药丸 top:calc(58~64px+safe) 居中、右上
   chip right:14px、底部主按钮 bottom:calc(18~20px+safe) 居中。
   横屏统一调度:居中药丸并入顶栏空档(top:8px+safe,顶栏中段是
   spacer,左品牌右切换,中段空闲),右上 chip 降半层(top:50px+safe),
   底部按钮贴底(bottom:8px+safe,主持坞/动作提示已收进左右角)。
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  body[data-fam] .turnpill, body[data-fam] .goalpill, body[data-fam] .titlepill,
  body[data-fam] .phase, body[data-fam] .players, body[data-fam] .metrics,
  body[data-fam] .topbarinfo, body[data-fam] .hud, body[data-fam] .stats,
  body[data-fam] .meter, body[data-fam] .cyclechip, body[data-fam] .progress,
  body[data-fam] .themes, body[data-fam] .prog, body[data-fam] .prompt {
    top: calc(8px + env(safe-area-inset-top));
  }
  /* 并入后整体收一号,640px 宽(最窄横屏)也放得下 */
  body[data-fam] .turnpill .side { padding: 5px 11px 5px 7px; }
  body[data-fam] .turnpill .side b { font-size: 12px; }
  body[data-fam] .players .pcard, body[data-fam] .metrics .m, body[data-fam] .stats .chip { padding: 5px 10px; font-size: 11.5px; }

  /* 右上 chip → 顶栏右下方半层(右上角顶栏被切换药丸/齿轮占用) */
  body[data-fam] .statchip, body[data-fam] .daychip, body[data-fam] .roundchip,
  body[data-fam] .chapterchip, body[data-fam] .arbadge {
    top: calc(50px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
  }

  /* 底部主按钮组贴底 */
  body[data-fam] .bottomctrl, body[data-fam] .actbar, body[data-fam] .ctrl, body[data-fam] .calmctrl {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body[data-fam] .bottomctrl .btn, body[data-fam] .actbar .btn, body[data-fam] .ctrl .btn { padding: 10px 18px; font-size: 13.5px; }

  /* 全屏模态 / 滑出面板:限高可滚,绝不截断不可达 */
  body[data-fam] .startgate > *, body[data-fam] .seal > *, body[data-fam] .win > *,
  body[data-fam] .result > *, body[data-fam] .settle .panel, body[data-fam] .rolecard .card {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  /* 角色卡是 3/4.2 竖卡:横屏改以高度驱动,保持卡比例 */
  body[data-fam] .rolecard .card { height: min(420px, calc(100dvh - 32px)); width: auto; }
}

/* ============================================================
   5) 手机横屏 — 2D 舞台留白公式
   设计稿桌面分支 .stage 上下 padding 共 230~244px,在 360 高横屏
   会吃光棋盘空间;统一收到 上≈48 / 下≈56(有底部按钮) 的"框"。
   棋盘 wrapper 的 min(…vh…) 项在矮屏自动以高度为准,无需逐页改宽度。
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  body[data-fam] .stage {
    padding-top: calc(48px + env(safe-area-inset-top));
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
}

/* ============================================================
   6) 手机横屏 — 每家族特化
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {

  /* —— go(围棋/通用棋盘机):盘以高度为准,窄盘变体同理 —— */
  body[data-fam="go"] .boardwrap { width: min(74vh, 86vw, 560px); }
  body[data-fam="go"] .boardwrap.tall { width: min(58vh, 70vw, 460px); }

  /* —— harbor(地产王):购地面板右侧窄化,买卡不再盖住棋盘 —— */
  body[data-fam="harbor"] .boardwrap { width: min(72vh, 86vw, 560px); }
  body[data-fam="harbor"] .buy {
    width: min(360px, 44vw);
    left: auto; right: calc(12px + env(safe-area-inset-right));
    transform: translateY(160%);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  body[data-fam="harbor"] .buy.show { transform: translateY(0); }
  body[data-fam="harbor"] .rollbtn { bottom: calc(8px + env(safe-area-inset-bottom)); }
  /* harbor-3d 第二层地块名 chip:贴到并入带正下方 */
  body[data-fam="harbor"] .tileinfo { top: calc(50px + env(safe-area-inset-top)); }

  /* —— beat(节奏):分数走左上角,音轨吃满高度 —— */
  body[data-fam="beat"] .hud-top {
    left: calc(126px + env(safe-area-inset-left)); right: auto;   /* 品牌药丸(~110px)右侧 */
    transform: none; text-align: left;
    top: calc(8px + env(safe-area-inset-top));
    width: auto;
  }
  body[data-fam="beat"] .hud-top .score { font-size: clamp(22px, 7vh, 34px); }
  body[data-fam="beat"] .stage {
    padding-top: calc(44px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body[data-fam="beat"] .track { max-height: none; }

  /* —— wolf(剧本杀):围坐圈以高度为准 —— */
  body[data-fam="wolf"] .circle { width: min(64vh, 86vw, 480px); }
  /* 身份按钮 → 左上空位(品牌下方),底部留给 rail/actbar/主持坞 */
  body[data-fam="wolf"] .rolebtn {
    bottom: auto; top: calc(50px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
  }
  /* wolf-3d 发言席:行动条上方一条,横向滚动不换行,避开左右角 */
  body[data-fam="wolf"] .rail {
    bottom: calc(54px + env(safe-area-inset-bottom));
    left: calc(90px + env(safe-area-inset-left));
    right: calc(90px + env(safe-area-inset-right));
    max-height: 64px; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start;
  }

  /* —— park(乐园经营):事件/继续/手牌卡贴底窄化、限高可滚 —— */
  body[data-fam="park"] .map { width: min(62vh, 86vw, 480px); }
  body[data-fam="park"] .event, body[data-fam="park"] .continue, body[data-fam="park"] .deck {
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(440px, 56vw);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }

  /* —— escape(密室):三环盘以高度为准;线索列与提示钮归位 —— */
  body[data-fam="escape"] .room { width: min(62vh, 86vw, 460px); }
  body[data-fam="escape"] .clues { top: calc(50px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); }
  body[data-fam="escape"] .hintbtn { bottom: calc(62px + env(safe-area-inset-bottom)); right: calc(10px + env(safe-area-inset-right)); }
  /* escape 大类下的 puzzle(纸笔逻辑):谜盘以高度为准 */
  body[data-fam="escape"] .pwrap { width: min(68vh, 86vw, 520px); }

  /* —— kitchen(厨房):订单从顶部第二层改挂左列纵排,灶台贴底 —— */
  body[data-fam="kitchen"] .kitchen { width: min(56vh, 70vw, 460px); }
  body[data-fam="kitchen"] .orders {
    top: calc(50px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    right: auto; bottom: calc(64px + env(safe-area-inset-bottom));
    width: 150px;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; overflow-x: hidden;
    padding: 0 2px;
  }
  body[data-fam="kitchen"] .orders .ticket { flex: 0 0 auto; width: 100%; }
  body[data-fam="kitchen"] .stations {
    bottom: calc(8px + env(safe-area-inset-bottom));
    /* 让出左角主持坞与右角动作提示 */
    left: calc(240px + env(safe-area-inset-left));
    right: calc(150px + env(safe-area-inset-right));
  }
  body[data-fam="kitchen"] .stations .st { padding: 6px 10px; }
  body[data-fam="kitchen"] .stations .st .se { font-size: 20px; }
  body[data-fam="kitchen"] .stage { padding-left: calc(168px + env(safe-area-inset-left)); }

  /* —— party(派对):词卡按横屏宽收窄,计分带并入顶栏 —— */
  body[data-fam="party"] .wordcard { width: min(46vw, 420px); padding: 22px 24px; }
  body[data-fam="party"] .actions { height: min(26vh, 96px); }
  body[data-fam="party"] .stage { padding-bottom: min(26vh, 96px); }

  /* —— rpg(武侠叙事):故事卡居中贴底、避开左右角、限高可滚 —— */
  body[data-fam="rpg"] .story {
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(560px, calc(100% - 320px));
    max-height: calc(100dvh - 70px); overflow-y: auto;
  }
  body[data-fam="rpg"] .scroll { max-height: 100%; }

  /* —— wellness(冥想):呼吸环以高度为准(320px 硬编码会顶破 360 高) —— */
  body[data-fam="wellness"] .orbwrap { width: min(62vh, 320px); height: min(62vh, 320px); }
  body[data-fam="wellness"] .orbwrap svg { width: 100%; height: 100%; }
  body[data-fam="wellness"] .ring { width: min(62vh, 320px); height: min(62vh, 320px); }

  /* —— couples(双人):答题卡居中贴底、避开左右角、限高可滚 —— */
  body[data-fam="couples"] .qcard {
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(520px, calc(100% - 320px));
    max-height: calc(100dvh - 70px); overflow-y: auto;
  }
  body[data-fam="couples"] .orbs { top: calc(52px + env(safe-area-inset-top)); }

  /* —— create / learn(创作/学习):作答台居中贴底、避开左右角 —— */
  body[data-fam="create"] .composer, body[data-fam="learn"] .composer {
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(540px, calc(100% - 320px));
    max-height: calc(100dvh - 70px); overflow-y: auto;
  }
  body[data-fam="create"] .stage, body[data-fam="learn"] .stage {
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }
  /* 3D 中央 HUD(诗行/课卡):横屏限高可滚 */
  body[data-fam="create"] .poem, body[data-fam="learn"] .lesson { max-height: calc(100dvh - 150px); overflow-y: auto; }

  /* —— ar(镜像剧场):控制条贴底已由 §4 覆盖,提示语别压怪兽 —— */
  body[data-fam="ar"] .hint { top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* —— hunt(寻宝,类名全库唯一,通用门控即可) —— */
  body[data-fam] .gridwrap { width: min(70vh, 86vw, 540px); }
  body[data-fam] .inv { bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   7) 超矮横屏(≤392px 高,如 844×390 / 640×360):再紧一档
   ============================================================ */
@media (orientation: landscape) and (max-height: 392px) {
  body[data-fam] .host-bubble span { -webkit-line-clamp: 1; }
  body[data-fam] .stage { padding-top: calc(46px + env(safe-area-inset-top)); }
  body[data-fam] .turnpill .think { display: none; }
}

/* ============================================================
   8) 手机横屏 — spec 运行时(index.html 3D / index-2d.html 2D)
   这一段压在 living-theme.css 的 !important 之上,因此同样使用
   body 前缀 + !important(参照 living-theme.css:146 的特异性策略)。
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  /* —— 2D 运行时:舞台底部 120px 死区收敛(living-theme.css:233 在矮屏致命) —— */
  body.aigg-2d-runtime-ui .r2-stage { padding: 10px 14px 12px !important; }
  /* 顶栏单行收紧 */
  body.aigg-2d-runtime-ui .r2-top { padding: calc(4px + env(safe-area-inset-top)) 10px 4px !important; }
  /* 旁白气泡:横屏限两行,不挤压舞台 */
  body.aigg-2d-runtime-ui .r2-narrator {
    max-height: 64px !important; overflow: hidden !important;
    margin: 0 0 10px !important; padding: 8px 14px 8px 56px !important;
    font-size: 13px !important;
  }
  body.aigg-2d-runtime-ui .r2-narrator .lt-host-av { width: 36px; height: 36px; left: 9px; }
  /* 行动条贴底 */
  body.aigg-2d-runtime-ui .r2-actbar { border-radius: 12px !important; }
  /* 侧栏:横屏宽度富余,恢复右列(胜过 living-theme.css:373 的强制单列) */
  body.aigg-2d-runtime-ui .r2-main { grid-template-columns: minmax(0, 1fr) minmax(200px, 28%) !important; }
  body.aigg-2d-runtime-ui .r2-side { max-height: none !important; border-left: 1px solid var(--line) !important; }

  /* —— 3D 运行时:顶部 chrome 收一号 —— */
  body.aigg-runtime-ui .stage-overlay { padding: 10px 12px !important; }
  body.aigg-runtime-ui .scene-chrome { flex-wrap: nowrap !important; gap: 6px !important; }
  body.aigg-runtime-ui .scene-name { max-width: 30vw !important; }
  body.aigg-runtime-ui .scenario-hud { max-height: 52% !important; overflow-y: auto !important; }
  body.aigg-runtime-ui .display-settings-panel { max-height: calc(100dvh - 76px) !important; overflow-y: auto !important; }

  /* —— living-shell 注入件 —— */
  /* 3D 主持坞:回到左下角紧凑形态(≤820px 宽度规则会把它钉到顶部,横屏顶部已满) */
  body.aigg-runtime-ui .lt-host-dock {
    top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    left: calc(10px + env(safe-area-inset-left)) !important;
    padding: 6px !important; min-height: 0 !important;
  }
  body.aigg-runtime-ui .lt-host-dock .lt-host-av { position: relative !important; left: 0 !important; top: 0 !important; transform: none !important; width: 40px !important; height: 40px !important; }
  body.aigg-runtime-ui .lt-host-dock .lt-host-name { display: none !important; }
  body.aigg-physical-ui .lt-tweaks, body.aigg-runtime-ui .lt-tweaks { top: 52px !important; max-height: calc(100dvh - 64px) !important; overflow-y: auto !important; }
}