/* ---------- 牌面 ---------- */
.card {
  --w: var(--card-w);
  --h: var(--card-h);
  position: relative;
  flex: none;
  width: var(--w);
  height: var(--h);
  border-radius: calc(var(--w) * 0.11);
  background:
    radial-gradient(120% 90% at 30% 10%, #fffdf6 0%, var(--paper) 45%, var(--paper-shade) 100%);
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast);
}

.card.is-red {
  color: var(--card-red);
}

.card-corner {
  position: absolute;
  top: calc(var(--w) * 0.07);
  left: calc(var(--w) * 0.08);
  display: grid;
  justify-items: center;
  line-height: 1;
}

.card-rank {
  font-family: var(--font-rank);
  font-size: calc(var(--w) * 0.36);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.card-rank.is-ten {
  font-size: calc(var(--w) * 0.3);
  letter-spacing: -0.08em;
}

.card-suit {
  margin-top: calc(var(--w) * 0.03);
  font-size: calc(var(--w) * 0.26);
}

.card-pip {
  position: absolute;
  right: calc(var(--w) * 0.1);
  bottom: calc(var(--w) * 0.1);
  font-size: calc(var(--w) * 0.52);
  line-height: 1;
  opacity: 0.92;
}

/* 大小王：竖排 JOKER + “王”字印章 */
.card.is-joker .card-corner {
  font-family: var(--font-rank);
  font-size: calc(var(--w) * 0.16);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.02;
}

.card-seal {
  position: absolute;
  right: calc(var(--w) * 0.1);
  bottom: calc(var(--w) * 0.12);
  display: grid;
  place-items: center;
  width: calc(var(--w) * 0.56);
  height: calc(var(--w) * 0.56);
  border: 2px solid currentColor;
  border-radius: 22%;
  font-family: var(--font-display);
  font-size: calc(var(--w) * 0.34);
  font-weight: 700;
  transform: rotate(-8deg);
}

.card.is-big-joker .card-seal {
  background: var(--card-red);
  color: var(--paper);
  border-color: var(--card-red);
}

/* 掼蛋：级牌描金，红心级牌（逢人配）加标 */
.card.is-level {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass) inset, var(--shadow-card);
}

.card-tag {
  position: absolute;
  left: calc(var(--w) * 0.08);
  bottom: calc(var(--w) * 0.08);
  padding: 1px 3px;
  border-radius: 4px;
  background: var(--brass);
  color: #2b1d05;
  font-size: calc(var(--w) * 0.17);
  font-weight: 700;
  line-height: 1.2;
}

/* 牌背 */
.card-back {
  background:
    repeating-linear-gradient(45deg, rgba(240, 211, 141, 0.22) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(240, 211, 141, 0.22) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, var(--lacquer-bright), var(--lacquer-deep));
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--brass-dim), var(--shadow-card);
}

.card.mini {
  --w: var(--mini-w);
  --h: var(--mini-h);
}

/* ---------- 手牌 ---------- */
.hand {
  --step: 30px;
  display: grid;
  justify-items: center;
  padding: 22px var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
  touch-action: none;
}

.hand-row {
  display: flex;
  justify-content: center;
}

.hand-row + .hand-row {
  margin-top: calc(var(--card-h) * -0.5);
}

.hand-row .card + .card {
  margin-left: calc(var(--step) - var(--card-w));
}

.hand .card {
  cursor: pointer;
}

@media (hover: hover) {
  .hand .card:hover {
    transform: translateY(-6px);
  }
}

.hand .card.is-selected {
  transform: translateY(-20px);
  box-shadow: 0 0 0 2px var(--brass), 0 12px 22px rgba(0, 0, 0, 0.4);
}

.hand .card.is-deal {
  animation: deal-in 420ms var(--ease-out-expo) backwards;
  animation-delay: calc(var(--i) * 18ms);
}

@keyframes deal-in {
  from {
    opacity: 0;
    transform: translateY(-60px) rotate(-6deg);
  }
}

/* 出牌区的小牌 */
.played {
  display: flex;
  justify-content: center;
}

.played .card + .card {
  margin-left: calc(var(--mini-w) * -0.58);
}

.played.is-enter .card {
  animation: play-in 360ms var(--ease-out-expo) backwards;
  animation-delay: calc(var(--i) * 25ms);
}

@keyframes play-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(1.18);
  }
}