/* ============================================================
   duo.css —— 双人同台页。
   只写这页自己的布局，配色一律取 base.css 的变量。
   舞台是 WebGL canvas，backing store 必须跟容器同比例（js/duo.js 的 fit），
   所以这里的高度是「量出来的依据」，改动要连带看 fit()。
   ============================================================ */

.duo-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 8px;
}

.duo-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 52vh;
  /* 默认背景跟单人页同一张（温室画室，用户 2026-09-24 定）：
     模型 canvas 是透明的，直接叠在图上，两页换着看不跳场景 */
  background: url('../img/bg/l2d-bg.webp') center / cover no-repeat, #0e100f;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;      /* canvas 会被 CSS 放大到超出，必须裁掉 */
  touch-action: none;
}

.duo-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* 手指拖动角色/平移画面要吃掉 touchstart，不关掉浏览器的
     滚动与双击缩放手势会和指针事件打架（手机上表现为拖不动、拖一下页面跳一下） */
  touch-action: none;
}

.duo-load {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  background: rgba(10, 11, 10, .82);
  color: var(--ink-dim);
  font-size: 13.5px;
  text-align: center;
}

.duo-load[hidden] { display: none; }

/* 舞台上已经有人了（加第二位的场景）：别再整块压暗。
   之前 B 下载那几十秒里，唯一那位被半透遮罩盖着不动，看上去和「加载失败」没差别 ——
   所以这里只留两条不拦手的提示条，人可以照常拖。 */
.duo-load.is-part {
  background: none;
  place-content: start center;
  padding: 34px 10px 0;
  pointer-events: none;
}
.duo-load.is-part span {
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 11, 10, .72);
  color: var(--ink-dim);
}
.duo-retry { pointer-events: auto; margin-left: 8px; }

.duo-stat {
  position: absolute;
  left: 10px;
  bottom: 8px;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 11, 10, .7);
  color: var(--ink-mute);
  font: 12px/1.7 var(--sans);
  font-variant-numeric: tabular-nums;
}

.duo-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.duo-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.duo-slot-tag {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--gold);
  font: 600 13px/1 var(--serif);
}

.duo-slot select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 9px;
  background: var(--bg-raise);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  font-size: 14px;
}

/* 当前被操作的那一位：面板行高亮，和舞台上「点谁拖谁」的选中态是同一个 target */
.duo-slot.is-sel .duo-slot-tag {
  color: var(--bg-sink);
  background: var(--gold);
  border-color: var(--gold);
}

.duo-row-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- 面板：桌面铺开 / 手机底部抽屉 ---------- */
.duo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.duo-targets { display: flex; gap: 6px; }

.duo-ddbar { display: none; gap: 6px; margin-left: auto; }

/* 手机上舞台盖满整屏，导航被压在下面，所以条里要留一个回家的入口 */
.duo-back { display: none; color: var(--ink-dim); font-size: 13px; text-decoration: none; }
.duo-back:active { color: var(--gold); }

.duo-grp {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.duo-ctl-target {
  align-self: center;
  color: var(--ink-mute);
  font-size: 12.5px;
}

/* ---------- 表情 / 动作（都作用于当前目标那一位） ---------- */
.duo-sec {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.duo-sec[hidden] { display: none; }

.duo-sec-t {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-mute);
  font: 400 12.5px/1.6 var(--serif);
  letter-spacing: .08em;
}

.duo-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.duo-btns button {
  padding: 5px 9px;
  background: var(--bg-raise);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.duo-btns button i {
  margin-left: 5px;
  color: var(--ink-mute);
  font-size: 11px;
  font-style: normal;
}

.duo-btns button[aria-pressed="true"] {
  color: var(--bg-sink);
  background: var(--gold);
  border-color: var(--gold);
}

/* 循环中的动作：金色描边 + 角标，和「正在播」区分开 */
.duo-btns button.is-loop::after {
  content: "↻";
  margin-left: 4px;
}

.duo-mgrp { margin-bottom: 10px; }

.duo-mgrp-t {
  display: inline-block;
  margin: 0 0 5px;
  color: var(--ink-mute);
  font: 400 12px/1.5 var(--serif);
  font-style: normal;
}

.duo-rand { border-style: dashed !important; }

/* ---------- 背景预设（和单人页同一套颜色 / 同一张默认图） ---------- */
.duo-bgs { display: flex; flex-wrap: wrap; gap: 6px; }

.duo-bg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 6px;
  background: var(--bg-raise);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.duo-bg::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--swatch, transparent);
  box-shadow: inset 0 0 0 1px rgba(228, 224, 214, .28);
}

.duo-bg[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

.duo-mini[hidden] { display: none; }

/* 手机端竖屏：舞台盖满整屏（连导航一起，和单人页 .fc-view 同款），面板收进贴在
   舞台底部的抽屉。之前那版「舞台 46vh + 面板常驻流里」人物只有 363px，用户说太小 ——
   现在 390×844 下人物 ~790px。抽屉从底部往上长、最多 52vh：盖住的是腿和裙摆，
   脸始终看得见；导航被盖住了，所以条里留一个「← 单人页」回家。 */
@media (max-width: 879px) {
  .duo-body {
    position: fixed;
    inset: 0;
    max-width: none;             /* .wrap 的 720px 列宽在手机上没意义 */                    /* 连导航一起盖住：单人页 .fc-view 就是这个做法 */
    z-index: 90;                 /* .site-head / main / .site-foot 都是 z-index:1，不给层级会被它们压在舞台上 */
    background: var(--bg);       /* 不透明，别用半透明遮罩 */
    margin: 0;                   /* 基础规则里的 margin 在 fixed + inset:0 下会把盒子缩掉 26px */
    height: auto; min-height: 0;
    display: block;
  }
  .duo-back { display: inline-flex; align-items: center; }
  .duo-stage { height: 100%; min-height: 0; border-left: 0; border-right: 0; border-radius: 0; }
  .duo-stat { top: 8px; bottom: auto; }
  .duo-load { border-radius: 0; }

  .duo-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column-reverse;   /* DOM 里条在前、分组在后 → 视觉上条贴底、抽屉朝上 */
    gap: 0;
    pointer-events: none;             /* 别让整个面板层拦住舞台上的拖动 */
  }
  .duo-bar {
    pointer-events: auto;
    background: rgba(10, 11, 10, .9);
    border-top: 1px solid var(--line);
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  }
  .duo-ddbar { display: flex; }
  .duo-ddbar button {
    padding: 6px 11px;
    background: var(--bg-raise);
    color: var(--ink-dim);
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  .duo-ddbar button[aria-expanded="true"] {
    color: var(--bg-sink);
    background: var(--gold);
    border-color: var(--gold);
  }
  .duo-grp {
    display: none;
    pointer-events: auto;
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 6px;
    padding: 12px 10px;
    background: rgba(14, 16, 15, .96);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .duo-grp.is-open { display: flex; }
  /* 空分组（这套皮肤没表情/没动作）不弹空抽屉 —— 同特异性，靠源序赢 */
  .duo-grp[hidden],
  .duo-sec[hidden] { display: none; }
  .duo-motions { max-height: none; }
}


.duo-mini {
  flex: 0 0 auto;
  padding: 6px 10px;
  background: var(--bg-raise);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.duo-mini[aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
}

.duo-hint {
  margin: 0;
  color: var(--ink-mute);
  font-size: 13px;
  min-height: 1.7em;
}

.duo-knobs {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  background: var(--bg-raise);
}

.duo-knobs summary {
  color: var(--ink-dim);
  font-size: 13.5px;
  cursor: pointer;
}

.duo-knobs label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--ink-dim);
  font-size: 13px;
}

.duo-knobs label b {
  flex: 0 0 48px;
  color: var(--ink);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.duo-knobs input[type=range] { flex: 1 1 auto; accent-color: var(--gold); }
.duo-knobs select { flex: 1 1 auto; background: var(--bg-sink); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }

.duo-note {
  color: var(--ink-mute);
  font-size: 13px;
}

@media (min-width: 880px) {
  /* align-items 必须是 flex-start：默认 stretch 会让舞台高度被面板撑起来 ——
     表情 + 动作两排按钮能有 1300px 高，画布跟着变 1358，人物就被按竖向填满算放大 2.2 倍，
     头顶脚底全出画（实测踩过一次）。面板改成自己滚。 */
  .duo-body { flex-direction: row; align-items: flex-start; }
  .duo-stage { flex: 1 1 auto; min-height: 0; height: 72vh; }
  .duo-panel { flex: 0 0 320px; max-height: 72vh; overflow-y: auto; padding-right: 6px; }
}