/* ============================================================
   R3-Artisan 真实资产补丁 · 2026-06-05
   用真实 SVG 图片替代 CSS hack
   - card-frame star1/2/3 → 真实卡框图
   - body 建筑剪影 → 真实上海滩夜景大图
   - 装备小图标 → 真实 SVG 缩略图
   ============================================================ */

/* ----- 1. 真实卡框 (用 SVG 图片替代 box-shadow + ::after 装饰) ----- */
.card-frame.real-frame {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: none;
  box-shadow: none;
}
.card-frame.real-frame::before,
.card-frame.real-frame::after {
  content: none;  /* 隐藏原 CSS hack 的星标文字 */
}
.card-frame.real-frame.star1 { background-image: url('../img/cards/card_star1.svg'); }
.card-frame.real-frame.star2 { background-image: url('../img/cards/card_star2.svg'); }
.card-frame.real-frame.star3 { background-image: url('../img/cards/card_star3.svg'); }

/* 移动端棋盘卡槽 (卡框要稍大) */
.chess-slot.real-frame {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: relative;
}
.chess-slot.real-frame.star1 { background-image: url('../img/cards/card_star1.svg'); }
.chess-slot.real-frame.star2 { background-image: url('../img/cards/card_star2.svg'); }
.chess-slot.real-frame.star3 { background-image: url('../img/cards/card_star3.svg'); }

/* ----- 2. 真实上海滩夜景背景 (替代 body::after linear-gradient 天际线) ----- */
.bg-shanghai {
  position: fixed;
  inset: 0;
  background-image: url('../img/bg/shanghai-skyline.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}
/* 叠加雾化让背景与游戏 UI 融为一体 */
.bg-shanghai::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(10, 4, 8, 0.4) 80%);
  pointer-events: none;
}

/* ----- 3. 真实装备小图标 (替代 8×8 纯色块+文字) ----- */
.chess .equip-icons {
  position: absolute; z-index: 5;
  bottom: 5px; right: 2px;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;
}
.chess .equip-icons .equip-icon {
  width: 18px; height: 18px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
  position: relative;
}
.chess .equip-icons .equip-icon.q-blue {
  border-color: rgba(106, 155, 208, 0.9);
  box-shadow: 0 0 4px rgba(106, 155, 208, 0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.chess .equip-icons .equip-icon.q-purple {
  border-color: rgba(181, 108, 255, 0.9);
  box-shadow: 0 0 4px rgba(181, 108, 255, 0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.chess .equip-icons .equip-icon.q-orange {
  border-color: rgba(255, 140, 60, 0.9);
  box-shadow: 0 0 4px rgba(255, 140, 60, 0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.chess .equip-icons .equip-icon.q-gold {
  border-color: rgba(241, 200, 98, 0.95);
  box-shadow: 0 0 6px rgba(241, 200, 98, 0.7), 0 1px 2px rgba(0,0,0,0.6);
}
.chess .equip-icons .equip-icon .equip-icon-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ----- 4. 真实棋盘装饰 (用 SVG 替代纯色块 + 文字标) ----- */
.faction-emblem.real {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 36px; height: 36px;
  border: none;
  box-shadow: none;
  text-indent: -9999px;
  overflow: hidden;
}
.faction-emblem.real.qingbang   { background-image: url('../img/factions/faction_qingbang.svg'); }
.faction-emblem.real.hongmen    { background-image: url('../img/factions/faction_hongmen.svg'); }
.faction-emblem.real.futoubang  { background-image: url('../img/factions/faction_futoubang.svg'); }
.faction-emblem.real.xunpufang  { background-image: url('../img/factions/faction_xunpufang.svg'); }
.faction-emblem.real.caobang    { background-image: url('../img/factions/faction_caobang.svg'); }

/* ----- 5. 棋盘格子背景 (在背景大图下加深底色,确保可读) ----- */
.board {
  background-color: rgba(10, 8, 6, 0.55);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 50%, rgba(0,0,0,0.5) 100%),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 22px,
      rgba(212, 175, 55, 0.04) 22px, rgba(212, 175, 55, 0.04) 23px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 22px,
      rgba(212, 175, 55, 0.04) 22px, rgba(212, 175, 55, 0.04) 23px);
  background-blend-mode: normal, overlay, overlay;
  border: 2px solid var(--gold-deep);
  border-radius: 4px;
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.7),
    inset 0 0 24px rgba(0, 0, 0, 0.5);
}
.cell {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.15);
}
.cell.player { background: rgba(42, 74, 58, 0.18); }
.cell.enemy  { background: rgba(139, 30, 42, 0.18); }
.cell .chess {
  position: absolute;
  inset: 2px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--board-bg);
}

/* ----- 6. 招募槽位 (用真实卡框装饰) ----- */
.shop-slot {
  background-color: transparent;
  background-image: url('../img/cards/card_star1.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: none;
  aspect-ratio: 5 / 6;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
  padding: 4px;
}
.shop-slot:hover { filter: brightness(1.15); }
.shop-slot.empty {
  background-color: rgba(0,0,0,0.4);
  background-image: none;
  border: 1px dashed var(--gold-deep);
  color: var(--ink-dim);
  font-size: 11px;
}

/* ----- 7. 真实装备槽 (用于装备详情面板, 替代纯文字+色块) ----- */
.equip-detail-slot {
  width: 56px; height: 56px;
  background-color: rgba(0,0,0,0.5);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 95% 95%;
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.equip-detail-slot.empty {
  background-color: rgba(0,0,0,0.3);
  border-style: dashed;
  color: var(--ink-dim);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* ----- 8. 棋盘上方"回合 banner" 加真实 Art Deco 边角 ----- */
.round-banner.real-banner {
  position: relative;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.1) 20%,
    rgba(212, 175, 55, 0.2) 50%,
    rgba(212, 175, 55, 0.1) 80%,
    transparent 100%);
  border: 1px solid var(--gold-deep);
  padding: 6px 24px;
  font-family: var(--font-deco);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--gold-light);
  text-align: center;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  overflow: hidden;
}
.round-banner.real-banner::before,
.round-banner.real-banner::after {
  content: "❖";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 12px;
  text-shadow: 0 0 6px var(--gold);
}
.round-banner.real-banner::before { left: 8px; }
.round-banner.real-banner::after  { right: 8px; }

/* ----- 9. 响应式: 手机竖屏 (375-430px) ----- */
@media (max-width: 430px) {
  .chess .equip-icons .equip-icon {
    width: 16px; height: 16px;
  }
  .bg-shanghai {
    background-size: 100% 100%;
  }
}
@media (max-width: 380px) {
  .chess .equip-icons .equip-icon {
    width: 14px; height: 14px;
  }
}