/* ═══════════════════════════════════════════════════════════════════
   collection-fitting.css — 收藏 · 装配坊（收藏界面重做 2026-07-02）
   ★ 混搭布局（2026-08-13）：20:9 背景 assets/collection-bg-20-9.png
   挂屏幕级 #coll-bg-img（fixed 全屏拉伸，面板已绘入背景图）；
   等比容器 .coll-bg-layer（1312:800）居中 letterbox，背景透明
   让 20:9 背景透出，承载全部 UI 元素（返回/筛选/卡池/三预览/饰品条/确认钮）
   等比容器变量：--coll-s（容器宽 ÷ 1512）
   ★ 蒙版放大：resizeCollBgLayer 里 SCALE=1.05（同卡组编辑器）——
   元素全锚在蒙版内，放大蒙版即整体放大
   ═══════════════════════════════════════════════════════════════════ */

.coll-bg-layer {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 0;
  /* ★ 混搭：背景透明——20:9 背景挂在屏幕级 #coll-bg-img，透过此层显示 */
  background: transparent;
}
.coll-bg-layer > img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}
.coll-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  font-family: 'KaiTi','楷体','STKaiti',serif;
}

/* ★ 2026-08-29 动态背景层（方案同主界面 .main-bg-layer > video）：
   视频叠在 #coll-bg-img 静态兜底层之上、.coll-bg-layer 内容层之下（同层按 DOM 序绘制）；
   文件=正放循环+循环点 1s 交叉淡化（无缝）；0.7× 慢放/起播兜底在 collection-fitting.js onEnter；
   装备 BgCollection 自定义背景时 JS 隐藏本层（静态 var 层接管） */
#coll-bg-video {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;   /* 背景层不拦任何点击 */
}
#coll-bg-video video {
  width: 100%; height: 100%;
  display: block;
  opacity: 0.92;
  object-fit: cover;      /* 21:9（1470×630）素材在 20:9 视口两侧各裁 ~2.3%，同 main-bg */
}

/* （返回按钮已改视口固定锚定——见 screens.css #coll-return-btn，同卡组界面设计） */

/* ── 顶部卡牌筛选条（2.9%..96.6%, 14.5%..20%）── */
#coll-card-filters {
  position: absolute;
  left: 3.2%; top: 14.8%;
  width: 93%; height: 4.9%;
  display: flex; align-items: center;
  gap: calc(10px * var(--coll-s));
  padding: 0 calc(12px * var(--coll-s));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
#coll-card-filters::-webkit-scrollbar { display: none; }

/* 筛选 chip（卡牌/饰品条共用） */
.coll-chip {
  display: inline-block; flex: 0 0 auto;
  font-family: inherit;
  font-size: calc(17px * var(--coll-s));
  color: rgba(255,255,255,.62);
  background: rgba(10,8,5,.55);
  border: calc(1px * var(--coll-s)) solid rgba(201,160,80,.3);
  border-radius: calc(4px * var(--coll-s));
  padding: calc(3px * var(--coll-s)) calc(10px * var(--coll-s));
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.coll-chip:hover { color: #fff; border-color: rgba(255,215,0,.5); }
.coll-chip.active {
  color: #ffd700;
  border-color: #c9a050;
  background: rgba(60,46,26,.7);
}
.coll-chip.sep { border: none; background: none; cursor: default; color: rgba(255,255,255,.25); padding: 0 calc(2px * var(--coll-s)); }

/* ── 左大蒙板：全卡池网格（2.9%..63.6%, 21.2%..89.6%）── */
#coll-card-grid {
  position: absolute;
  left: 3.2%; top: 21.8%;
  width: 60%; height: 67.2%;
  overflow-y: auto; overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(14px * var(--coll-s));
  padding: calc(12px * var(--coll-s));
  align-content: start;
  scrollbar-width: thin; scrollbar-color: rgba(201,160,80,.4) transparent;
}

/* 卡池单元——平铺 5 列，卡背比例 744:1039
   合成卡模式（.coll-composited）：透明底+FullCard 实卡填满，对标卡组编辑牌库 */
.coll-card {
  position: relative;
  aspect-ratio: 0.716;
  border-radius: calc(6px * var(--coll-s));
  border: calc(2px * var(--coll-s)) solid rgba(201,160,80,.35);
  background: linear-gradient(170deg, #241d12 0%, #171209 100%);
  background-size: cover; background-position: center top;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.coll-card:hover { transform: translateY(calc(-3px * var(--coll-s))); border-color: rgba(255,215,0,.6); }
.coll-card.selected {
  border-color: #ffd700;
  box-shadow: 0 0 calc(12px * var(--coll-s)) rgba(255,215,0,.55);
}
/* 未拥有：灰显 */
.coll-card.not-owned { filter: grayscale(.9) brightness(.55); }
.coll-card.not-owned:hover { filter: grayscale(.6) brightness(.75); }

/* 合成卡模式：容器透明化，FullCard 自身提供完整卡面 */
.coll-card.coll-composited {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  overflow: visible;
}
.coll-card.coll-composited:hover { border-color: transparent; }

/* ── 以下为回退模式（无 FullCard 时）的文字/卡图样式 ── */
.coll-card .cc-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: calc(18px * var(--coll-s));
  color: #f5e8c8;
  text-align: center;
  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  padding: calc(14px * var(--coll-s)) calc(4px * var(--coll-s)) calc(4px * var(--coll-s));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.coll-card .cc-noart {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-size: calc(28px * var(--coll-s));
  color: rgba(245,232,200,.4);
  letter-spacing: calc(3px * var(--coll-s));
  pointer-events: none;
}
/* ── 角标（合成卡与回退模式共用，z-index 在 FullCard 之上）── */
/* 持有数角标 */
.coll-card .cc-count {
  position: absolute; top: calc(4px * var(--coll-s)); right: calc(6px * var(--coll-s));
  font-size: calc(18px * var(--coll-s));
  color: #ffd700;
  background: rgba(0,0,0,.7);
  border-radius: calc(4px * var(--coll-s));
  padding: 0 calc(6px * var(--coll-s));
  pointer-events: none;
  z-index: 3;
}
/* 已装配卡框指示 */
.coll-card .cc-frame-mark {
  position: absolute; top: calc(4px * var(--coll-s)); left: calc(6px * var(--coll-s));
  font-size: calc(18px * var(--coll-s));
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 calc(4px * var(--coll-s)) rgba(255,215,0,.8));
}
/* 待确认变更角标 */
.coll-card .cc-pending {
  position: absolute; top: calc(26px * var(--coll-s)); left: calc(6px * var(--coll-s));
  font-size: calc(16px * var(--coll-s));
  color: #7ec8e3;
  pointer-events: none;
  z-index: 3;
}
/* 卡框 overlay 缩略——绝对定位铺满容器（卡池回退模式 / 卡背预览 / 右侧换装预览共用）。
   ★ .fit-fullcard 必须包含：否则 overlay 随流式布局掉到卡下方，换装效果图错位 */
.coll-card .cc-frame-overlay,
.fit-card .fc-frame-overlay,
.fit-fullcard .fc-frame-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* ── 右上左：选中卡展示（64.4%..80.6%, 21.2%..55.9%）── */
#coll-sel-panel {
  position: absolute;
  left: 64.7%; top: 21.8%;
  width: 15.6%; height: 33.5%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(8px * var(--coll-s));
}
/* ★ 选中卡/卡框换装预览与卡背预览顶部对齐：补齐卡背下移的 30 设计像素 */
#coll-sel-panel .fit-fullcard,
#coll-preview-panel .fit-fullcard {
  margin-top: calc(30px * var(--coll-s));
}
/* ── 右上右：换装/卡背预览（80.8%..96.6%, 21.2%..55.9%）── */
#coll-preview-panel {
  position: absolute;
  left: 81.1%; top: 21.8%;
  width: 15.6%; height: 33.5%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(8px * var(--coll-s));
}

/* 展示大卡（选中卡/换装预览共用） */
.fit-card {
  position: relative;
  width: calc(150px * var(--coll-s));
  height: calc(208px * var(--coll-s));
  /* ★ 卡背预览去文字后整体上移，向下补 30 设计像素恢复视觉位置 */
  margin-top: calc(30px * var(--coll-s));
  border-radius: calc(8px * var(--coll-s));
  border: calc(2px * var(--coll-s)) solid rgba(201,160,80,.5);
  background: linear-gradient(170deg, #241d12 0%, #171209 100%);
  background-size: cover; background-position: center top;
  overflow: hidden;
  flex: 0 0 auto;
}
.fit-card .fc-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: calc(16px * var(--coll-s));
  color: #f5e8c8; text-align: center;
  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  padding: calc(12px * var(--coll-s)) calc(2px * var(--coll-s)) calc(4px * var(--coll-s));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fit-card .fc-noart {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-size: calc(26px * var(--coll-s));
  color: rgba(245,232,200,.4);
  letter-spacing: calc(3px * var(--coll-s));
}
/* 面板标题/说明/按钮 */
.fit-label {
  font-size: calc(15px * var(--coll-s));
  color: rgba(255,255,255,.55);
  letter-spacing: calc(2px * var(--coll-s));
  margin-bottom: calc(6px * var(--coll-s));
  text-align: center;
}
.fit-meta {
  font-size: calc(14px * var(--coll-s));
  color: rgba(245,232,200,.8);
  margin-top: calc(6px * var(--coll-s));
  text-align: center;
  /* ★ 卡图放大 1.2 后垂直空间吃紧（标题已取消），行高 1.5→1.25 回收高度，按钮回到画框内 */
  line-height: 1.25;
}
.fit-btn {
  display: inline-block;
  font-family: inherit;
  font-size: calc(17px * var(--coll-s));
  font-weight: bold;
  color: #f5e8c8;
  background: linear-gradient(180deg, rgba(60,46,26,.9), rgba(34,26,14,.9));
  border: calc(1.5px * var(--coll-s)) solid #c9a050;
  border-radius: calc(5px * var(--coll-s));
  padding: calc(4px * var(--coll-s)) calc(14px * var(--coll-s));
  /* ★ 同 fit-meta 注释：上间距 8→4 回收高度 */
  margin-top: calc(4px * var(--coll-s));
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, box-shadow .2s;
}
.fit-btn:hover { color: #ffd700; box-shadow: 0 0 calc(10px * var(--coll-s)) rgba(255,215,0,.4); }
.fit-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.fit-btn.danger { border-color: rgba(255,110,90,.6); }
.fit-btn.danger:hover { color: #ff8a70; box-shadow: 0 0 calc(10px * var(--coll-s)) rgba(255,110,90,.35); }

/* ── 右下：背景预览（64.4%..96.6%, 56.9%..89.6%）── */
#coll-bg-preview {
  position: absolute;
  left: 64.7%; top: 57.5%;
  width: 32%; height: 31.5%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(6px * var(--coll-s));
}
#coll-bg-preview .bg-thumb {
  /* ★ 高度吃满剩余空间（去掉固定宽高比）——标签+图+说明+按钮整体恰好撑满画框，
     任何窗口尺寸下缩略图都钉在框内，不再顶出上边框线 */
  flex: 1 1 auto;
  min-height: 0;
  width: 92%;
  border-radius: calc(6px * var(--coll-s));
  border: calc(2px * var(--coll-s)) solid rgba(201,160,80,.5);
  background-size: cover; background-position: center;
}

/* ── 底部饰品筛选条（2.9%..63.9%, 90.4%..96%）── */
#coll-cos-bar {
  position: absolute;
  left: 3.2%; top: 90.7%;
  width: 60.2%; height: 4.9%;
  display: flex; align-items: center;
  gap: calc(8px * var(--coll-s));
  padding: 0 calc(12px * var(--coll-s));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
#coll-cos-bar::-webkit-scrollbar { display: none; }

/* 饰品缩略 */
.cos-thumb {
  position: relative; flex: 0 0 auto;
  height: 82%;
  aspect-ratio: 1;
  border-radius: calc(4px * var(--coll-s));
  border: calc(1.5px * var(--coll-s)) solid rgba(201,160,80,.4);
  background-size: cover; background-position: center;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cos-thumb:hover { border-color: rgba(255,215,0,.7); }
.cos-thumb.active { border-color: #ffd700; box-shadow: 0 0 calc(8px * var(--coll-s)) rgba(255,215,0,.5); }
.cos-thumb.depleted { filter: grayscale(.8) brightness(.5); }
.cos-thumb .ct-count {
  position: absolute; right: calc(-2px * var(--coll-s)); bottom: calc(-2px * var(--coll-s));
  font-size: calc(11px * var(--coll-s));
  color: #ffd700;
  background: rgba(0,0,0,.8);
  border-radius: calc(3px * var(--coll-s));
  padding: 0 calc(3px * var(--coll-s));
  pointer-events: none;
}

/* ── 重置 / 确认（右下两墨绿格）── */
.coll-green-btn {
  position: absolute;
  height: 4.4%;
  font-family: inherit;
  font-size: calc(22px * var(--coll-s));
  font-weight: bold;
  letter-spacing: calc(6px * var(--coll-s));
  color: #d8e8d8;
  background: none; border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, text-shadow .2s;
}
.coll-green-btn:hover { color: #ffd700; text-shadow: 0 0 calc(8px * var(--coll-s)) rgba(255,215,0,.4); }
.coll-green-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
#coll-btn-reset   { left: 70.4%; top: 90.9%; width: 9.2%; }
#coll-btn-confirm { left: 83.9%; top: 90.9%; width: 9.4%; }
/* 待确认数量气泡 */
#coll-pending-badge {
  position: absolute; left: 64.7%; top: 91.5%;
  font-size: calc(15px * var(--coll-s));
  color: #7ec8e3;
  pointer-events: none;
  white-space: nowrap;
}

/* ── 对局内卡框 overlay（render.js appendFrameOverlay 注入，全局生效）── */
.battle-frame-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
}

/* ── 主网格·饰品模式：背景饰品用宽单元 ── */
.coll-card.coll-cos-bg { aspect-ratio: 1.6; grid-column: span 2; background-size: cover; }

/* ── 右侧面板合成卡容器（FullCard + 可选装配框 overlay）──
   ★ width 67.5% = 56.25% × 1.2（2026-08-13 用户要求：标题文字取消 + 卡图放大 1.2）——
   百分比随容器等比缩放，卡面永远钉在画框内 */
.fit-fullcard { position: relative; flex: none; width: 67.5%; }
.fit-fullcard:hover { filter: brightness(1.1); }