/* Mevcut kartlar sabit kalır; yalnızca yeni kart kısa bir yerleştirme hareketi yapar. */
.card { animation: cardPlaced .24s ease-out both; }
.card.face-down.dealt { animation: cardPlacedDown .24s ease-out both; }
.card:nth-child(n) { animation-delay: 0s; }

@keyframes cardPlaced {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes cardPlacedDown {
  from { opacity: 0; transform: translateY(-6px) rotateY(180deg) scale(.985); }
  to { opacity: 1; transform: rotateY(180deg); }
}

.pip-field {
  position: absolute;
  inset: 25px 13px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  font: 400 17px/1 Georgia, serif;
}

.pip-field i { font-style: normal; }
.pip-field i.upside-down { transform: rotate(180deg); }

.pips-1 i:nth-child(1) { grid-column: 2; grid-row: 2 / 4; font-size: 27px; }
.pips-2 i:nth-child(1) { grid-column: 2; grid-row: 1; }
.pips-2 i:nth-child(2) { grid-column: 2; grid-row: 4; transform: rotate(180deg); }
.pips-3 i:nth-child(1) { grid-column: 2; grid-row: 1; }
.pips-3 i:nth-child(2) { grid-column: 2; grid-row: 2 / 4; }
.pips-3 i:nth-child(3) { grid-column: 2; grid-row: 4; transform: rotate(180deg); }

.pips-4 i:nth-child(1), .pips-5 i:nth-child(1), .pips-6 i:nth-child(1), .pips-7 i:nth-child(1), .pips-8 i:nth-child(1), .pips-9 i:nth-child(1), .pips-10 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.pips-4 i:nth-child(2), .pips-5 i:nth-child(2), .pips-6 i:nth-child(2), .pips-7 i:nth-child(2), .pips-8 i:nth-child(2), .pips-9 i:nth-child(2), .pips-10 i:nth-child(2) { grid-column: 3; grid-row: 1; }

.pips-4 i:nth-child(3), .pips-5 i:nth-child(3) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.pips-4 i:nth-child(4), .pips-5 i:nth-child(4) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.pips-5 i:nth-child(5) { grid-column: 2; grid-row: 2 / 4; }

.pips-6 i:nth-child(3), .pips-7 i:nth-child(3) { grid-column: 1; grid-row: 2 / 4; }
.pips-6 i:nth-child(4), .pips-7 i:nth-child(4) { grid-column: 3; grid-row: 2 / 4; }
.pips-6 i:nth-child(5), .pips-7 i:nth-child(5) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.pips-6 i:nth-child(6), .pips-7 i:nth-child(6) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.pips-7 i:nth-child(7) { grid-column: 2; grid-row: 2; }

.pips-8 i:nth-child(3), .pips-9 i:nth-child(3), .pips-10 i:nth-child(3) { grid-column: 1; grid-row: 2; }
.pips-8 i:nth-child(4), .pips-9 i:nth-child(4), .pips-10 i:nth-child(4) { grid-column: 3; grid-row: 2; }
.pips-8 i:nth-child(5), .pips-9 i:nth-child(5), .pips-10 i:nth-child(5) { grid-column: 1; grid-row: 3; transform: rotate(180deg); }
.pips-8 i:nth-child(6), .pips-9 i:nth-child(6), .pips-10 i:nth-child(6) { grid-column: 3; grid-row: 3; transform: rotate(180deg); }
.pips-8 i:nth-child(7), .pips-9 i:nth-child(7), .pips-10 i:nth-child(7) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.pips-8 i:nth-child(8), .pips-9 i:nth-child(8), .pips-10 i:nth-child(8) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.pips-9 i:nth-child(9) { grid-column: 2; grid-row: 2 / 4; }
.pips-10 i:nth-child(9) { grid-column: 2; grid-row: 2; }
.pips-10 i:nth-child(10) { grid-column: 2; grid-row: 3; transform: rotate(180deg); }

.face-rank {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 600 34px/1 Georgia, serif;
}
.face-rank::after {
  content: attr(data-suit);
  display: block;
  margin-top: 2px;
  font-size: 16px;
  text-align: center;
}

.split-layout .pip-field { inset: 20px 8px 19px; font-size: 12px; }
.split-layout .pips-1 i:nth-child(1) { font-size: 21px; }
.split-layout .face-rank { font-size: 27px; }

@media (max-width: 820px) {
  .pip-field { inset: 22px 10px 21px; font-size: 14px; }
  .pips-1 i:nth-child(1) { font-size: 23px; }
  .face-rank { font-size: 29px; }
}

@media (max-width: 430px) {
  .pip-field { inset: 19px 7px 18px; font-size: 12px; }
  .pips-1 i:nth-child(1) { font-size: 20px; }
  .split-layout .pip-field { inset: 16px 5px 15px; font-size: 9px; }
}