/* 卡牌样式 */
.card {
  --cw: 92px; --ch: 128px;
  position: relative;
  width: var(--cw); height: var(--ch);
  border-radius: 9px;
  border: 1.5px solid #8a6d1e;
  background: linear-gradient(168deg, #f6eeda 0%, #e5d5b2 62%, #d3bd92 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  user-select: none;
  flex: 0 0 auto;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.card::after {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid rgba(138, 109, 30, 0.35);
  border-radius: 6px; pointer-events: none;
}
.card--trick { background: linear-gradient(168deg, #f2eee0 0%, #ddd7c0 62%, #c8c0a4 100%); }
.card--equip { background: linear-gradient(168deg, #f7e9cf 0%, #e6cfa4 62%, #d0b17c 100%); }

.card__suit {
  position: absolute; top: 4px; left: 6px;
  font-size: 15px; line-height: 1; font-family: Georgia, serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.card__suit--red { color: var(--cinnabar-2); }
.card__suit--black { color: #2b2b2b; }
.card__suit--none { color: #6b5c4a; font-size: 10px; }

.card__art {
  position: absolute; left: 12%; right: 12%; top: 17%; height: 52%;
  display: grid; place-items: center;
}
.card__art img { width: 100%; height: 100%; object-fit: contain; }

.card__name {
  position: absolute; left: 0; right: 0; bottom: 5px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  color: #2a1d10;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  max-height: 2.4em; overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
}
.card__name--mid { font-size: 12px; letter-spacing: 0; }
.card__name--long { font-size: 9.5px; letter-spacing: 0; line-height: 1.05; }
.card__name--xlong { font-size: 8px; letter-spacing: -0.01em; line-height: 1.02; }
.card__tag {
  position: absolute; top: 4px; right: 5px;
  font-size: 9px; letter-spacing: 0.04em;
  color: #6b5c4a; opacity: 0.85;
}
.card__virtual {
  position: absolute; left: 3px; right: 3px; bottom: 24px;
  text-align: center; font-size: 10px; font-weight: 700;
  color: #7a3d14; background: rgba(194, 160, 60, 0.32);
  border-radius: 3px; padding: 1px 0;
}

/* 状态 */
.card.is-dim { filter: grayscale(0.6) brightness(0.62); }
.card.is-clickable { cursor: pointer; }
.card.is-clickable:hover { transform: translateY(-10px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.5); z-index: 5; }
.card.is-picked {
  transform: translateY(-16px);
  box-shadow: 0 0 0 2px var(--cinnabar), 0 12px 22px rgba(0, 0, 0, 0.5);
  z-index: 6;
}
.card.is-target-ok { box-shadow: 0 0 0 2px var(--jade), 0 4px 10px rgba(0, 0, 0, 0.42); }
.card--sm { --cw: 54px; --ch: 76px; border-radius: 6px; }
.card--sm .card__name { font-size: 10px; bottom: 3px; max-height: 1.4em; }
.card--sm .card__suit { font-size: 11px; top: 2px; left: 4px; }
.card--sm .card__name--mid { font-size: 12px; letter-spacing: 0; }
.card__name--long { font-size: 9.5px; letter-spacing: 0; line-height: 1.05; }
.card__name--xlong { font-size: 8px; letter-spacing: -0.01em; line-height: 1.02; }
.card__tag { display: none; }
.card--xs { --cw: 40px; --ch: 56px; border-radius: 5px; border-width: 1px; }
.card--xs .card__name { font-size: 9px; }
.card--xs .card__art { top: 20%; height: 46%; }
.card--xs .card__suit { font-size: 9px; }

.card-back { border-color: #2a2118; background: #1a1512; }
.card-back::after { border-color: rgba(194, 160, 60, 0.4); }

/* 弃牌堆扇形 */
.fan { position: relative; width: 100%; height: 84px; }
.fan .card {
  position: absolute; left: 50%; top: 4px;
  margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 130%;
}