/* ═══════════════════════════════════════════════════════════════════
   pack-shop.css — 卡包坊（商城主屏）专属样式
   背景：20:9 风景 assets/pack-bg-20-9.png 挂屏幕级（#pack-bg-img，混搭模式）
   原 1312×800 商城图（面板框烤入）已弃用——元素先裸浮风景上，等新蒙板素材
   蒙板框实测坐标（旧图，供新蒙板对齐参考）：小框 x 2.4%~16.8% / 大框 x 17.4%~97.9%，y 均 16%~90.3%
   开包流程对标炉石：选包 → 确认 → 光爆 → 5 张卡背弧形摊开 → 逐张翻面
   等比容器变量：--pack-s（容器宽 ÷ 1512，与主界面同基准）
   稀有度配色：N=灰 / R=蓝 / SR=紫 / UR=橙（对标 HS 普通/稀有/史诗/传说）
   ═══════════════════════════════════════════════════════════════════ */

/* ── 等比容器（复刻 main-bg-layer 机制，宽高由 JS resizePackBgLayer 设定）── */
.pack-bg-layer {
  position: fixed;
  /* ★ 宽度 +80 保持左缘不动需 left +40px；再左移 50 + 右移 10 → left: 50% + 40 - 50 + 10 = 50%（配套 JS EXTEND_X=80） */
  left: 50%;
  /* ★ 整体下移 10px（2026-08-13 用户要求）——容器级偏移，蒙版+内容同步移动 */
  top: calc(50% + 10px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 0;
  /* ★ 混搭：背景透明——20:9 背景挂屏幕级 #pack-bg-img，透过此层显示 */
  background: transparent;
}
.pack-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* ★ 2026-08-29 动态背景层（方案同主界面/收藏/冒险/大厅）：
   视频叠在静态兜底层 #pack-bg-img 之上、.pack-bg-layer 蒙板之下（同层按 DOM 序绘制）；
   文件=正放循环+循环点 1s 交叉淡化（无缝）；0.7× 慢放/起播兜底在 pack-shop.js onEnter；
   装备 BgShop 自定义背景时 JS 隐藏本层（静态 var 层接管） */
#shop-bg-video {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;   /* 背景层不拦任何点击 */
}
#shop-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 */
}

/* （旧 .pack-return-text 已删除——返回按钮改视口固定锚定 #pack-return-btn，同卡组界面设计） */

/* ── 左侧小蒙板框：类型切换 tab ── */
#pack-tabs {
  position: absolute;
  left: 2.44%; top: 16%;
  width: 14.35%; height: 74.25%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(40px * var(--pack-s));
  gap: calc(26px * var(--pack-s));
}
.pack-tab {
  display: inline-block; width: auto; max-width: none; min-width: 0;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(32px * var(--pack-s));
  font-weight: bold;
  letter-spacing: calc(6px * var(--pack-s));
  color: rgba(255,255,255,.6);
  background: none; border: none;
  border-left: calc(3px * var(--pack-s)) solid transparent;
  padding: calc(8px * var(--pack-s)) calc(14px * var(--pack-s));
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s, text-shadow .2s;
}
.pack-tab:hover { color: rgba(255,255,255,.9); }
.pack-tab.active {
  color: #ffd700;
  border-left-color: #c9a050;
  text-shadow: 0 0 calc(10px * var(--pack-s)) rgba(255,215,0,.4);
}

/* ── 大蒙板框内容面板（三面板共用定位）── */
.pack-panel {
  position: absolute;
  left: 17.4%; top: 16%;
  width: 80.5%; height: 74.25%;
}

/* ── 选包架：左起网格，自动换行（面板内坐标）── */
#pack-rack {
  position: absolute; left: 0; top: 8%;
  width: 100%;
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
  gap: calc(58px * var(--pack-s));
  padding-left: calc(36px * var(--pack-s));
}

/* 单个卡包立轴——card-back.png 水墨立轴 + 档位色封边 */
.pack-item {
  position: relative;
  width: calc(180px * var(--pack-s));
  cursor: pointer;
  transition: transform .28s ease, filter .28s ease;
  filter: drop-shadow(0 calc(10px * var(--pack-s)) calc(22px * var(--pack-s)) rgba(0,0,0,.65));
}
.pack-item:hover { transform: translateY(calc(-12px * var(--pack-s))) scale(1.04); }

.pack-art {
  display: block;
  width: 100%;
  border-radius: calc(8px * var(--pack-s));
  border: calc(3px * var(--pack-s)) solid var(--tier-color, #8a7a50);
  box-shadow: 0 0 calc(18px * var(--pack-s)) var(--tier-glow, rgba(201,160,80,.35));
}
.pack-item:hover .pack-art {
  box-shadow: 0 0 calc(34px * var(--pack-s)) var(--tier-glow, rgba(201,160,80,.6));
}

/* 竖排题签（包名封条，仿古籍书签） */
.pack-slip {
  position: absolute; top: calc(12px * var(--pack-s)); right: calc(12px * var(--pack-s));
  writing-mode: vertical-rl;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(26px * var(--pack-s));
  font-weight: bold;
  letter-spacing: calc(5px * var(--pack-s));
  color: #f5e8c8;
  background: linear-gradient(180deg, rgba(30,24,16,.92), rgba(48,36,20,.92));
  border: calc(1.5px * var(--pack-s)) solid var(--tier-color, #8a7a50);
  padding: calc(10px * var(--pack-s)) calc(4px * var(--pack-s));
  border-radius: calc(4px * var(--pack-s));
  pointer-events: none;
}

/* 包底信息：主题语 + 价格 + 内容说明 */
.pack-caption {
  margin-top: calc(12px * var(--pack-s));
  text-align: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  pointer-events: none;
}
.pack-caption .pack-motto {
  font-size: calc(18px * var(--pack-s));
  color: rgba(245,232,200,.6);
  letter-spacing: calc(4px * var(--pack-s));
}
.pack-caption .pack-price-tag {
  margin-top: calc(5px * var(--pack-s));
  font-size: calc(22px * var(--pack-s));
  font-weight: bold;
  color: var(--price-color, #ffd700);
  text-shadow: 0 calc(1px * var(--pack-s)) calc(4px * var(--pack-s)) rgba(0,0,0,.7);
}
.pack-caption .pack-detail {
  margin-top: calc(4px * var(--pack-s));
  font-size: calc(14px * var(--pack-s));
  color: rgba(255,255,255,.5);
  letter-spacing: calc(1px * var(--pack-s));
}

/* UR 保底进度（选包架下方，对标 MD 保底进度公示） */
#pack-pity-info {
  position: absolute; left: 0; bottom: 4%;
  width: 100%;
  text-align: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(18px * var(--pack-s));
  color: rgba(255,180,80,.75);
  letter-spacing: calc(2px * var(--pack-s));
  pointer-events: none;
}

/* ── 开包舞台（确认 / 光爆 / 翻牌共用容器，覆盖整个面板）── */
#pack-stage {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
}
#pack-stage.active { display: block; }

/* 确认态：选中的包放大居中（面板内坐标） */
.stage-pack {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: calc(250px * var(--pack-s));
  transition: transform .3s ease;
}
.stage-pack .pack-art { cursor: default; }
/* 开启瞬间的震动 */
.stage-pack.shaking { animation: pack-shake .55s ease-in-out infinite; }
@keyframes pack-shake {
  0%,100% { transform: translate(-50%, -50%) rotate(0deg); }
  20%     { transform: translate(-50.6%, -50.4%) rotate(-2.2deg); }
  45%     { transform: translate(-49.4%, -49.6%) rotate(2.2deg); }
  70%     { transform: translate(-50.4%, -50.6%) rotate(-1.4deg); }
}

/* 光爆 */
.pack-burst {
  position: absolute; left: 50%; top: 38%;
  width: calc(60px * var(--pack-s)); height: calc(60px * var(--pack-s));
  margin-left: calc(-30px * var(--pack-s)); margin-top: calc(-30px * var(--pack-s));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,200,.95) 0%, rgba(255,215,0,.55) 40%, rgba(255,215,0,0) 70%);
  pointer-events: none;
  animation: pack-burst .7s ease-out forwards;
}
@keyframes pack-burst {
  0%   { transform: scale(.2); opacity: 0; }
  35%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(14); opacity: 0; }
}

/* 确认/翻牌完毕按钮组 */
.stage-actions {
  position: absolute; left: 0; top: 82%;
  width: 100%;
  display: flex; justify-content: center;
  gap: calc(60px * var(--pack-s));
}
.stage-btn {
  display: inline-block; width: auto; max-width: none; min-width: 0;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(28px * var(--pack-s));
  font-weight: bold;
  letter-spacing: calc(4px * var(--pack-s));
  color: #f5e8c8;
  background: linear-gradient(180deg, rgba(60,46,26,.9), rgba(34,26,14,.9));
  border: calc(2px * var(--pack-s)) solid #c9a050;
  border-radius: calc(6px * var(--pack-s));
  padding: calc(8px * var(--pack-s)) calc(28px * var(--pack-s));
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, box-shadow .2s, transform .2s;
}
.stage-btn:hover {
  color: #ffd700;
  box-shadow: 0 0 calc(16px * var(--pack-s)) rgba(255,215,0,.4);
  transform: translateY(calc(-2px * var(--pack-s)));
}
.stage-btn.secondary { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.65); }
.stage-btn.secondary:hover { color: #fff; box-shadow: 0 0 calc(12px * var(--pack-s)) rgba(255,255,255,.25); }
.stage-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* 确认态价格提示 */
.stage-hint {
  position: absolute; left: 0; top: 72%;
  width: 100%;
  text-align: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(20px * var(--pack-s));
  color: rgba(245,232,200,.75);
  letter-spacing: calc(2px * var(--pack-s));
  pointer-events: none;
}

/* ── 翻牌区：5 张弧形摊开（面板内坐标由 JS 内联指定）── */
.reveal-card {
  position: absolute;
  width: calc(148px * var(--pack-s));
  height: calc(210px * var(--pack-s));
  transform: rotate(var(--arc-rot, 0deg));
  perspective: 900px;
  cursor: pointer;
  /* 入场：从中心飞散 */
  animation: reveal-deal .45s ease-out backwards;
}
@keyframes reveal-deal {
  from { left: 45%; top: 28%; transform: rotate(0deg) scale(.55); opacity: 0; }
}
.reveal-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.2,.7,.3,1);
}
.reveal-card.flipped .reveal-inner { transform: rotateY(180deg); }
.reveal-card.flipped { cursor: default; }

.reveal-face {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  border-radius: calc(9px * var(--pack-s));
  overflow: hidden;
}
.reveal-back {
  background: url('../assets/card-back.png') center/cover no-repeat;
  border: calc(2px * var(--pack-s)) solid #6a5a3a;
  box-shadow: 0 calc(6px * var(--pack-s)) calc(14px * var(--pack-s)) rgba(0,0,0,.6);
}
.reveal-card:not(.flipped):hover .reveal-back {
  box-shadow: 0 0 calc(18px * var(--pack-s)) rgba(255,215,0,.45);
}

/* 正面：稀有度色框卡面 */
.reveal-front {
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, #241d12 0%, #171209 100%);
  border: calc(3px * var(--pack-s)) solid var(--r-color, #9aa39a);
  box-shadow: 0 0 calc(16px * var(--pack-s)) var(--r-glow, rgba(154,163,154,.35));
}
.reveal-front .rf-art {
  flex: 1 1 auto; min-height: 0;
  background-size: cover; background-position: center top;
  display: flex; align-items: center; justify-content: center;
}
/* 无卡图时的楷体大字占位 */
.reveal-front .rf-art .rf-noart {
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(36px * var(--pack-s));
  font-weight: bold;
  color: rgba(245,232,200,.4);
  letter-spacing: calc(4px * var(--pack-s));
  writing-mode: vertical-rl;
}
.reveal-front .rf-name {
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(18px * var(--pack-s));
  font-weight: bold;
  color: #f5e8c8;
  text-align: center;
  padding: calc(4px * var(--pack-s)) calc(2px * var(--pack-s)) 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reveal-front .rf-meta {
  font-size: calc(12px * var(--pack-s));
  color: rgba(255,255,255,.55);
  text-align: center;
  padding: calc(2px * var(--pack-s)) 0 calc(6px * var(--pack-s));
}
.reveal-front .rf-rarity {
  position: absolute; top: calc(6px * var(--pack-s)); left: calc(8px * var(--pack-s));
  font-size: calc(14px * var(--pack-s));
  font-weight: bold;
  color: var(--r-color, #9aa39a);
  text-shadow: 0 0 calc(6px * var(--pack-s)) var(--r-glow, rgba(154,163,154,.5));
}

/* 卡框彩蛋附赠卡（额外第 6 件，金色特殊框） */
.reveal-front.bonus-cosmetic {
  border-color: #ffd700;
  box-shadow: 0 0 calc(24px * var(--pack-s)) rgba(255,215,0,.7);
}
.reveal-front.bonus-cosmetic .rf-name { color: #ffd700; }

/* SR/UR/卡框翻面强光 */
.reveal-card .rare-flash {
  position: absolute; left: 50%; top: 50%;
  width: calc(40px * var(--pack-s)); height: calc(40px * var(--pack-s));
  margin: calc(-20px * var(--pack-s)) 0 0 calc(-20px * var(--pack-s));
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--r-glow, rgba(255,107,53,.9)) 0%, rgba(0,0,0,0) 70%);
  animation: rare-flash .8s ease-out forwards;
  z-index: 3;
}
@keyframes rare-flash {
  0%   { transform: scale(.3); opacity: 0; }
  30%  { transform: scale(2.2); opacity: 1; }
  100% { transform: scale(7);   opacity: 0; }
}

/* 稀有度变量映射（四档制：N=灰 / R=蓝 / SR=紫 / UR=橙，对标 HS） */
.reveal-front.r-N  { --r-color: #9aa39a; --r-glow: rgba(154,163,154,.35); }
.reveal-front.r-R  { --r-color: #6aa8ff; --r-glow: rgba(106,168,255,.45); }
.reveal-front.r-SR { --r-color: #c9a0ff; --r-glow: rgba(201,160,255,.55); }
.reveal-front.r-UR { --r-color: #ff9a3d; --r-glow: rgba(255,154,61,.65); }

/* ── 饰品 / 兑换面板 ── */
.pack-sub-title {
  position: absolute; left: 0; top: 7%;
  width: 100%;
  text-align: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(34px * var(--pack-s));
  font-weight: bold;
  color: #f5e8c8;
  letter-spacing: calc(8px * var(--pack-s));
  pointer-events: none;
}
.pack-sub-note {
  position: absolute; left: 0; top: 15%;
  width: 100%;
  text-align: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(17px * var(--pack-s));
  color: rgba(255,255,255,.5);
  letter-spacing: calc(2px * var(--pack-s));
  pointer-events: none;
}
/* 商品竖卡（饰品抽/兑换档共用） */
.pack-goods-row {
  position: absolute; left: 0; top: 28%;
  width: 100%;
  display: flex; justify-content: center; align-items: stretch;
  gap: calc(70px * var(--pack-s));
}
.pack-goods {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: calc(200px * var(--pack-s));
  padding: calc(24px * var(--pack-s)) calc(20px * var(--pack-s));
  background: linear-gradient(180deg, rgba(30,24,16,.82), rgba(18,14,8,.86));
  border: calc(2px * var(--pack-s)) solid var(--tier-color, #8a7a50);
  border-radius: calc(10px * var(--pack-s));
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  font-family: 'KaiTi','楷体','STKaiti',serif;
}
.pack-goods:hover {
  transform: translateY(calc(-8px * var(--pack-s)));
  box-shadow: 0 0 calc(22px * var(--pack-s)) var(--tier-glow, rgba(201,160,80,.5));
}
.pack-goods .goods-icon { font-size: calc(46px * var(--pack-s)); margin-bottom: calc(10px * var(--pack-s)); }
.pack-goods .goods-name {
  font-size: calc(24px * var(--pack-s)); font-weight: bold; color: #f5e8c8;
  letter-spacing: calc(3px * var(--pack-s)); margin-bottom: calc(8px * var(--pack-s));
}
.pack-goods .goods-price {
  font-size: calc(20px * var(--pack-s)); font-weight: bold; color: var(--price-color, #ffd700);
  margin-bottom: calc(6px * var(--pack-s));
}
.pack-goods .goods-desc { font-size: calc(14px * var(--pack-s)); color: rgba(255,255,255,.5); text-align: center; }

/* 兑换面板的兑换券余额 */
#pack-tickets-line {
  position: absolute; left: 0; top: 21%;
  width: 100%;
  text-align: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(20px * var(--pack-s));
  color: #5dade2;
  letter-spacing: calc(2px * var(--pack-s));
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   卡包详情/抽卡界面（2026-07-10 背景+蒙板分层新屏）
   蒙板实测（1312×800）：返回墨块 (39,24)-(184,73)、
   左大面板 (39,143)-(1006,731)、右窄面板 (1023,143)-(1282,720)、
   抽卡绿钮 (1056,665)-(1257,714)、货币药丸与主界面同位
   等比容器变量：--pack-detail-s（容器宽 ÷ 1512）
   ═══════════════════════════════════════════════════════════════════ */

.pack-detail-bg-layer {
  position: fixed;
  /* ★ 与商店界面蒙版同位置（2026-08-13 用户要求）：left 50% + 整体下移 10px（配套 JS SCALE 1.1 / EXTEND_X 80） */
  left: 50%;
  top: calc(50% + 10px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 0;
  /* ★ 混搭：背景透明——20:9 背景挂屏幕级 #pack-detail-screen-bg，透过此层显示 */
  background: transparent;
  --pack-detail-s: 1;
}
.pack-detail-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  --pack-s: var(--pack-detail-s); /* ★ 复用商店版翻牌 CSS（.reveal-card 等依赖 --pack-s） */
}

/* （旧 .pack-detail-return 已删除——返回按钮改视口固定锚定 #pack-detail-return-btn，同卡组界面设计） */

/* ── 左大面板：可抽卡池网格（对标卡组编辑 card-lib-item，完整矩形不堆叠，按住拖动）── */
#pack-detail-grid {
  position: absolute;
  left: 3.73%; top: 19.13%;
  width: 70.9%; height: 70.75%;
  overflow: hidden;
  cursor: grab;
  display: flex; flex-wrap: wrap;
  gap: calc(6px * var(--pack-detail-s));
  align-content: flex-start;
  padding: calc(8px * var(--pack-detail-s));
}

/* 卡池单元——对标卡组编辑 .card-lib-item：固定尺寸矩形，卡图垫底 + 信息叠加 */
.pd-card {
  /* 实际格子尺寸由 VirtualGrid 内联写入（pack-shop.js：cols 10 / gap 16 / cellH 133），此处仅作兜底 */
  width: calc(95px * var(--pack-detail-s));
  height: calc(133px * var(--pack-detail-s));
  border-radius: calc(6px * var(--pack-detail-s));
  border: 1px solid rgba(201,160,80,.3);
  background: linear-gradient(170deg, #241d12 0%, #171209 100%);
  background-size: cover; background-position: center 15%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
}
.pd-card:hover {
  border-color: #ffd700;
  box-shadow: 0 0 calc(8px * var(--pack-detail-s)) rgba(255,215,0,.3);
}
.pd-card.selected {
  border-color: #ffd700;
  box-shadow: 0 0 calc(12px * var(--pack-detail-s)) rgba(255,215,0,.5);
}
.pd-card .pd-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: calc(18px * var(--pack-detail-s));   /* 手机无卡框，名字必须够大才看得清 */
  color: #f5e8c8; text-align: center;
  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  padding: calc(12px * var(--pack-detail-s)) calc(2px * var(--pack-detail-s)) calc(3px * var(--pack-detail-s));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
  pointer-events: none;
}
.pd-card .pd-noart {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-size: calc(22px * var(--pack-detail-s));
  color: rgba(245,232,200,.3);
  letter-spacing: calc(2px * var(--pack-detail-s));
  pointer-events: none;
}
.pd-card .pd-rarity {
  position: absolute; right: calc(2px * var(--pack-detail-s)); top: calc(2px * var(--pack-detail-s));
  font-size: calc(13px * var(--pack-detail-s));
  font-weight: bold;
  color: #ffd700;
  background: rgba(0,0,0,.75);
  border-radius: calc(3px * var(--pack-detail-s));
  padding: 0 calc(4px * var(--pack-detail-s));
  line-height: 1.4;
  pointer-events: none;
}
.pd-card .pd-cost {
  position: absolute; left: calc(2px * var(--pack-detail-s)); top: calc(2px * var(--pack-detail-s));
  font-size: calc(13px * var(--pack-detail-s));
  font-weight: bold;
  color: #a0d8ef;
  background: rgba(0,0,0,.75);
  border-radius: calc(3px * var(--pack-detail-s));
  padding: 0 calc(4px * var(--pack-detail-s));
  line-height: 1.4;
  pointer-events: none;
}

/* ── 右窄面板：选中卡详情（卡图+属性+效果介绍，可拖动滚动）── */
/* ★ 2026-08-13：高度 70.75% → 63.5%——底边截止到抽卡按钮上方（按钮 top 83.13%），描述超长不再覆盖按钮 */
#pack-detail-info {
  position: absolute;
  left: 78.7%; top: 19.13%;
  width: 18.1%; height: 63.5%;
  overflow: hidden;
  cursor: grab;
  padding: calc(10px * var(--pack-detail-s));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(6px * var(--pack-detail-s));
}
.pd-info-placeholder {
  color: rgba(140,190,230,.5);
  font-size: calc(15px * var(--pack-detail-s));
  line-height: 2;
  padding-top: calc(60px * var(--pack-detail-s));
  text-align: center;
}
/* ★ 2026-08-13 用户要求：卡图+右侧文字等比放大 1.4× 充满红框宽度（原 110×153 / 16px / 11px） */
#pack-detail-info .pd-info-art {
  width: calc(154px * var(--pack-detail-s));
  height: calc(214px * var(--pack-detail-s));
  object-fit: cover;
  border-radius: calc(6px * var(--pack-detail-s));
  border: calc(2px * var(--pack-detail-s)) solid rgba(201,160,80,.5);
  display: block;
  flex-shrink: 0;
}
#pack-detail-info .pd-info-noart {
  width: calc(154px * var(--pack-detail-s));
  height: calc(214px * var(--pack-detail-s));
  border-radius: calc(6px * var(--pack-detail-s));
  border: calc(2px * var(--pack-detail-s)) solid rgba(201,160,80,.5);
  background: linear-gradient(170deg, #241d12 0%, #171209 100%);
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font-size: calc(28px * var(--pack-detail-s));
  color: rgba(245,232,200,.5);
  letter-spacing: calc(4px * var(--pack-detail-s));
  flex-shrink: 0;
}
/* ★ 2026-08-13 用户要求：名字+属性移到卡图右侧——上区横排容器（卡图 | 侧栏），侧栏纵向排名字+属性 */
#pack-detail-info .pd-info-top {
  display: flex;
  align-items: flex-start;
  gap: calc(8px * var(--pack-detail-s));
  width: 100%;
  flex-shrink: 0;
}
#pack-detail-info .pd-info-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--pack-detail-s));
}
#pack-detail-info .pd-info-name {
  font-size: calc(23px * var(--pack-detail-s));
  font-weight: bold;
  color: #ffd700;
  text-align: left;
  line-height: 1.3;
}
#pack-detail-info .pd-info-attrs {
  font-size: calc(18px * var(--pack-detail-s));
  color: rgba(245,232,200,.85);
  line-height: 1.65;
  text-align: left;
}
#pack-detail-info .pd-info-desc {
  font-size: calc(20px * var(--pack-detail-s));
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  text-align: left;
  width: 100%;
  padding-top: calc(6px * var(--pack-detail-s));
  border-top: calc(1px * var(--pack-detail-s)) solid rgba(201,160,80,.3);
  /* ★ 2026-08-13：描述自占剩余高度并裁剪，超长按住上下拖动查看（initDragScroll 挂在 desc 上） */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── 抽卡按钮：居中压在右下墨绿钮上 ── */
#pack-detail-draw-btn {
  position: absolute;
  left: 80.49%; top: 83.13%;
  width: 15.32%; height: 6.13%;
  font-family: inherit;
  font-size: calc(26px * var(--pack-detail-s));
  font-weight: bold;
  letter-spacing: calc(8px * var(--pack-detail-s));
  color: #d8e8d8;
  background: none; border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, text-shadow .2s;
  z-index: 5;
}
#pack-detail-draw-btn:hover { color: #ffd700; text-shadow: 0 0 calc(8px * var(--pack-detail-s)) rgba(255,215,0,.4); }

/* ── 详情屏内翻牌舞台（全屏覆盖，暗夜星空背景 + 5 张横排居中摊牌）── */
#pack-detail-stage {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  z-index: 10;
  /* ★ 暗夜流金背景：深黑渐变 + 中心暖光，替代蒙板双框视觉 */
  background:
    radial-gradient(ellipse 80% 50% at 50% 38%, rgba(40,28,10,.85) 0%, rgba(18,12,4,.95) 60%, #080604 100%),
    radial-gradient(circle 300px at 50% 35%, rgba(255,200,80,.12) 0%, transparent 70%),
    radial-gradient(circle 180px at 48% 33%, rgba(220,170,60,.08) 0%, transparent 100%);
  /* 入场淡入 */
  opacity: 0; transition: opacity .35s ease;
}
#pack-detail-stage.active { display: block; opacity: 1; }

/* 舞台中卡包的确认态——垂直居中于屏幕上部 */
#pack-detail-stage .stage-pack {
  top: 30%;
}

/* 舞台内翻牌卡——放大 + 横排无旋转，手游屏幕刚好一排 5 张 */
#pack-detail-stage .reveal-card {
  width: calc(188px * var(--pack-s));
  height: calc(266px * var(--pack-s));
  transform: none; /* ★ 去弧形旋转，纯横排 */
  animation: detail-reveal-deal .55s ease-out backwards;
}
@keyframes detail-reveal-deal {
  from { transform: translateY(calc(40px * var(--pack-s))) scale(.55); opacity: 0; filter: brightness(1.8); }
}
/* 横排 hover 微抬升（替代弧形旋转的视觉反馈） */
#pack-detail-stage .reveal-card:not(.flipped):hover {
  transform: translateY(calc(-8px * var(--pack-s)));
  transition: transform .2s ease;
}
/* 翻面后取消 hover 抬升 */
#pack-detail-stage .reveal-card.flipped { transform: none; }

/* 翻牌完毕按钮组——定位在卡片下方 */
#pack-detail-stage .stage-actions {
  top: 74%;
}

/* 舞台内按钮字号略微放大 */
#pack-detail-stage .stage-btn {
  font-size: calc(30px * var(--pack-s));
}

/* ── 合成卡卡面（FullCard 流式填充稀有度色框壳）── */
.reveal-front.fc-holder { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.reveal-front.fc-holder .full-card.fc-fluid { width: 100%; }
.reveal-front .rf-rarity { z-index: 3; }