.dealer-shoe {
  position: absolute;
  top: 48px;
  left: calc(50% + 165px);
  z-index: 5;
  width: 76px;
  height: 104px;
  pointer-events: none;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .35));
}

.shoe-stack {
  position: relative;
  width: 62px;
  height: 88px;
  margin-left: 6px;
  transform: perspective(280px) rotateY(-12deg) rotateZ(4deg);
  transform-origin: center bottom;
}

.shoe-stack i {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 80px;
  overflow: hidden;
  border: 3px solid #eee2c5;
  border-radius: 6px;
  background-color: #f2ead6;
  background-image:
    linear-gradient(45deg, #8e292b 25%, transparent 25%, transparent 75%, #8e292b 75%),
    linear-gradient(-45deg, #173b48 25%, transparent 25%, transparent 75%, #173b48 75%),
    linear-gradient(45deg, transparent 44%, #c5a868 44%, #c5a868 56%, transparent 56%);
  background-position: 0 0, 6px 6px, 0 0;
  background-size: 12px 12px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .3), inset 0 0 0 2px #173b48;
}

.shoe-stack i::before {
  content: "AQ";
  position: absolute;
  inset: 17px 9px;
  display: grid;
  place-items: center;
  border: 1px solid #f2ead6;
  border-radius: 50%;
  background: #173b48;
  color: #f2ead6;
  font: 500 9px Georgia, serif;
  box-shadow: 0 0 0 2px #8e292b;
}

.shoe-stack i:nth-child(1) { transform: translate(9px, -9px); }
.shoe-stack i:nth-child(2) { transform: translate(8px, -8px); }
.shoe-stack i:nth-child(3) { transform: translate(7px, -7px); }
.shoe-stack i:nth-child(4) { transform: translate(6px, -6px); }
.shoe-stack i:nth-child(5) { transform: translate(5px, -5px); }
.shoe-stack i:nth-child(6) { transform: translate(4px, -4px); }
.shoe-stack i:nth-child(7) { transform: translate(3px, -3px); }
.shoe-stack i:nth-child(8) { transform: translate(2px, -2px); }
.shoe-stack i:nth-child(9) { transform: translate(1px, -1px); }
.shoe-stack i:nth-child(10) { transform: translate(0, 0); }

.dealer-shoe > span {
  display: block;
  margin-top: -1px;
  color: rgba(240, 209, 139, .72);
  font: 500 7px "DM Mono";
  letter-spacing: 1.5px;
  text-align: center;
}

.dealer-shoe.drawing .shoe-stack { animation: shoeDraw .34s ease-out; }
@keyframes shoeDraw {
  35% { transform: perspective(280px) rotateY(-12deg) rotateZ(4deg) translateY(3px) scale(.97); }
}

/* Kartlar, kurpiyerin sağındaki desteden masaya doğru gelir. */
.dealer-zone .card {
  --shoe-x: 180px;
  --shoe-y: -92px;
  animation: dealFromShoe .48s var(--ease) both;
}
.bet-spot:nth-child(1) .spot-cards .card { --shoe-x: 430px; --shoe-y: -275px; animation: dealFromShoe .52s var(--ease) both; }
.bet-spot:nth-child(2) .spot-cards .card { --shoe-x: 185px; --shoe-y: -275px; animation: dealFromShoe .52s var(--ease) both; }
.bet-spot:nth-child(3) .spot-cards .card { --shoe-x: -55px; --shoe-y: -275px; animation: dealFromShoe .52s var(--ease) both; }

@keyframes dealFromShoe {
  from { opacity: 0; transform: translate(var(--shoe-x), var(--shoe-y)) rotate(10deg) scale(.78); }
  to { opacity: 1; transform: none; }
}

.dealer-zone .card.face-down.dealt {
  animation: dealFromShoeDown .48s var(--ease) both;
}
.dealer-zone .card.reveal-card { animation: flip .55s var(--ease) forwards; }
@keyframes dealFromShoeDown {
  from { opacity: 0; transform: translate(var(--shoe-x), var(--shoe-y)) rotateY(180deg) rotate(10deg) scale(.78); }
  to { opacity: 1; transform: rotateY(180deg); }
}

@media (max-width: 1180px) {
  .dealer-shoe { left: calc(50% + 148px); transform: scale(.9); transform-origin: top left; }
  .dealer-zone .card { --shoe-x: 155px; }
  .bet-spot:nth-child(1) .spot-cards .card { --shoe-x: 360px; }
  .bet-spot:nth-child(2) .spot-cards .card { --shoe-x: 155px; }
  .bet-spot:nth-child(3) .spot-cards .card { --shoe-x: -45px; }
}

@media (max-width: 820px) {
  .dealer-shoe { top: 45px; right: 5%; left: auto; transform: scale(.72); transform-origin: top right; }
  .dealer-zone .card { --shoe-x: 125px; --shoe-y: -82px; }
  .bet-spot:nth-child(1) .spot-cards .card { --shoe-x: 255px; --shoe-y: -255px; }
  .bet-spot:nth-child(2) .spot-cards .card { --shoe-x: 115px; --shoe-y: -255px; }
  .bet-spot:nth-child(3) .spot-cards .card { --shoe-x: -25px; --shoe-y: -255px; }
}

@media (max-width: 430px) {
  .dealer-shoe { top: 39px; right: 2%; transform: scale(.58); }
  .dealer-zone .card { --shoe-x: 90px; --shoe-y: -72px; }
  .bet-spot:nth-child(1) .spot-cards .card { --shoe-x: 190px; --shoe-y: -225px; }
  .bet-spot:nth-child(2) .spot-cards .card { --shoe-x: 85px; --shoe-y: -225px; }
  .bet-spot:nth-child(3) .spot-cards .card { --shoe-x: -18px; --shoe-y: -225px; }
}