/* 副本商店（2026-11-09，dshop- 前缀）v5：设计整备版
   层级：标题栏（壳）→ 状态条（余额+次数）→ 提示行 → 货架 → 脚注
   卡片：上图 / 名 / 副标 / 底部一体化 CTA 胶囊（价签+按钮同壳无缝） */

/* ===== 入口按钮（位置=「?」上方） ===== */
#nb-shop-btn, #jx-shop-btn, #mc-shop-btn { position: absolute; top: 14px; left: 10px; z-index: 6;
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: transform .18s, filter .18s; }
#nb-shop-btn { border: 1.5px solid rgba(200,160,255,.8);
  background: linear-gradient(180deg,#7e57c2 0%,#512da8 45%,#311b92 100%);
  box-shadow: 0 2px 10px rgba(150,100,255,.5), inset 0 1px 0 rgba(255,255,255,.35); }
#jx-shop-btn { border: 1.5px solid rgba(120,220,255,.8);
  background: linear-gradient(180deg,#226688 0%,#144866 45%,#0a2438 100%);
  box-shadow: 0 2px 10px rgba(60,180,255,.5), inset 0 1px 0 rgba(255,255,255,.35); }
#mc-shop-btn { border: 1.5px solid rgba(255,170,220,.8);
  background: linear-gradient(180deg,#b0407e 0%,#7a2456 45%,#45102f 100%);
  box-shadow: 0 2px 10px rgba(255,100,190,.5), inset 0 1px 0 rgba(255,255,255,.35); }
#nb-shop-btn:hover, #jx-shop-btn:hover, #mc-shop-btn:hover { transform: scale(1.08); filter: brightness(1.15); }
#nb-shop-btn:active, #jx-shop-btn:active, #mc-shop-btn:active { transform: scale(.95); }
#nb-shop-btn.hidden, #jx-shop-btn.hidden, #mc-shop-btn.hidden { display: none; }

/* ===== 面板：加深底色与卡片拉开对比；壳默认宽 min(92vw,440px) 对三列货架太窄，
   必须连 width 一起覆盖（只写 max-width 不生效），540px 下每列 ~157px 才装得下 CTA ===== */
#dshop-ov { z-index: 160; }
#dshop-ov .dsbk-panel { width: min(94vw, 540px); max-width: 540px;
  background: linear-gradient(180deg, #0a1e33 0%, #0d2a47 60%, #0f3054 100%); }

/* ===== 状态条：余额胶囊（左）===== */
.dshop-bar { display: flex; align-items: center;
  padding: 10px 16px 0; }
.dshop-bal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px;
  border-radius: 999px; background: rgba(8,26,48,.85); border: 1px solid rgba(90,200,255,.45);
  font-size: 12.5px; color: #aee6ff; box-shadow: inset 0 0 8px rgba(90,200,255,.14); }
.dshop-bal b { font-size: 13.5px; color: #ffe9b0; text-shadow: 0 0 6px rgba(255,220,140,.35); }

/* ===== 提示行：居中弱化，倒计时高亮 ===== */
.dshop-tip { padding: 7px 16px 0; font-size: 11px; color: #7d92b8; text-align: center; }
.dshop-tip #dshop-cd { color: #8fd8f5; }

/* ===== 货架：左右 14px 留白，绝不顶边 ===== */
.dshop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 10px 14px 0; }
@media (max-width: 560px) { .dshop-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 商品卡：比面板亮一档，边界清晰 ===== */
.dshop-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0; /* 允许网格列压缩，防最小内容宽度撑破面板 */
  border: 1.5px solid rgba(165,195,245,.5); border-radius: 13px; padding: 10px 8px 9px; overflow: visible;
  background: linear-gradient(176deg, #3c5490 0%, #2b3f6d 40%, #223257 100%);
  box-shadow: 0 3px 9px rgba(4,10,26,.55), inset 0 1.5px 0 rgba(200,222,255,.22);
  transition: transform .13s, box-shadow .13s, border-color .13s; }
.dshop-card:hover { transform: translateY(-2px); border-color: rgba(200,222,255,.85);
  box-shadow: 0 7px 16px rgba(4,10,26,.65), inset 0 1.5px 0 rgba(200,222,255,.3); }
.dshop-card.soldout { opacity: .5; filter: grayscale(.55); }

/* 限购/售罄角标：贴卡内上沿 */
.dshop-hold { position: absolute; top: 6px; right: 6px; z-index: 2; font-style: normal; font-size: 9px; font-weight: bold;
  color: #eaf4ff; background: linear-gradient(135deg, rgba(100,181,246,.95), rgba(30,111,216,.95));
  border-radius: 7px; padding: 2px 7px; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(10,40,100,.5); }
.dshop-hold.ltd { background: linear-gradient(135deg, rgba(239,83,80,.95), rgba(160,26,26,.95)); }

/* 素材图展示区：径向光晕底托 */
.dshop-art { position: relative; height: 58px; width: 100%; display: flex; align-items: center; justify-content: center;
  margin: 2px 0 6px; }
.dshop-art::before { content: ''; position: absolute; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, rgba(96,176,255,.32) 0%, rgba(96,176,255,.10) 55%, transparent 72%); }
.dshop-art img, .dshop-art span { position: relative; z-index: 1; }
.dshop-art img { max-width: 70%; max-height: 50px; object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,10,30,.7)) drop-shadow(0 0 6px rgba(120,190,255,.18)); }
.dshop-art span { font-size: 34px; filter: drop-shadow(0 2px 4px rgba(0,10,30,.65)); }

/* 名称/副标 */
.dshop-nm { font-size: 12.5px; font-weight: bold; color: #f4f8ff; max-width: 100%; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(4,10,26,.85); }
.dshop-sub { font-size: 9.5px; color: #93a9d2; margin: 3px 0 0; max-width: 100%; height: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 底部 CTA：一体化胶囊，价签（暗）+ 按钮（亮）同壳；
   最小宽度必须能压进 ~150px 列宽：价签可压缩、按钮文字可截断 ===== */
.dshop-cta { display: flex; align-items: stretch; width: 100%; margin-top: 8px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 5px rgba(10,30,70,.5); }
.dshop-price { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 3px; padding: 0 9px;
  background: rgba(7,20,40,.88); border-top: 1px solid rgba(110,150,210,.35);
  border-bottom: 1px solid rgba(110,150,210,.35); border-left: 1px solid rgba(110,150,210,.35);
  border-radius: 10px 0 0 10px;
  font-size: 12px; font-weight: bold; color: #aee6ff; white-space: nowrap; overflow: hidden; }
.dshop-gem { font-size: 11px; filter: drop-shadow(0 0 3px rgba(90,200,255,.8)); }
.dshop-go { flex: 1; min-width: 0; border: none; cursor: pointer; padding: 7px 6px;
  font-size: 11px; font-weight: bold; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; letter-spacing: 2px;
  background: linear-gradient(180deg, #4cc0ff, #1877dc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: all .12s; }
.dshop-go:active { filter: brightness(.93); }
.dshop-cta.off .dshop-go { filter: grayscale(.85) brightness(.8); cursor: not-allowed; letter-spacing: 1px; }
.dshop-cta.off .dshop-price { color: #7e93b5; border-color: rgba(110,130,160,.3); }
.dshop-cta.off .dshop-gem { filter: none; }

.dshop-empty { grid-column: 1/-1; padding: 26px 0; text-align: center; color: #8fa8c8; font-size: 13px; }
.dshop-foot { margin: 10px 16px 14px; font-size: 11px; color: #7d92b8; text-align: center; }