/* 手牌与交互态 */

.hand .card {
  margin-left: var(--overlap, -40px);
  cursor: pointer;
  touch-action: none;
  will-change: transform;
}

.hand .card:first-child { margin-left: 0; }

/* 触摸屏会粘住 :hover，抬起高度会停在半途。只在真鼠标上预览抬起。 */
@media (hover: hover) and (pointer: fine) {
  .hand .card:hover:not(.selected) {
    transform: translateY(-10px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
    z-index: 30;
  }
}

.hand .card.selected {
  transform: translateY(-22px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.5), 0 0 0 2px #ffd970,
    0 0 14px rgba(255, 217, 112, 0.55);
  z-index: 28;
}

@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .hand .card:hover:not(.selected) { transform: translateY(-6px); }
}

.hand .card.deal { animation: card-in 0.32s ease backwards; }

/* 底牌插入：先在空位上方停一下，再落进牌列 */
.hand.inserting { pointer-events: none; }

.hand .card.incoming {
  z-index: 8;
  animation: bottom-drop 0.7s cubic-bezier(0.2, 0.75, 0.2, 1) both;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.45), 0 0 0 2px #ffd970,
    0 0 14px rgba(255, 217, 112, 0.55);
}

@keyframes bottom-drop {
  0% { opacity: 0; transform: translateY(-58px) scale(0.92); }
  22% { opacity: 1; transform: translateY(-36px) scale(1); }
  58% { opacity: 1; transform: translateY(-36px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hand .card.incoming { animation: none; }
}

.hand.dim .card { filter: brightness(0.62) saturate(0.8); }

.hand.dim .card:not(.selected) { pointer-events: none; }

/* 出牌区牌张 */
.play-cards .card {
  margin-left: -14px;
  animation: play-in 0.22s ease backwards;
}

.play-cards .card:first-child { margin-left: 0; }

/* 底牌翻面 */
.bottom-cards-row .card { animation: flip-in 0.4s ease backwards; }

.bottom-cards-row .card.back { animation: none; }

@keyframes play-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes flip-in {
  0% { transform: rotateY(90deg) scale(0.9); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

/* 牌型标签 */
.combo-tag {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.play-slot .play-cards { position: relative; }

/* 高亮/抖动 */
.card.invalid { animation: shake 0.3s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}