/* === Card Rendering === */

.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  position: relative;
  flex-shrink: 0;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.card.face-down {
  background: var(--card-down-bg);
  box-shadow: var(--card-down-shadow);
}
.card.face-down .card-tl,
.card.face-down .card-mid,
.card.face-down .card-br,
.card.face-down .res-pip {
  display: none;
}
.card-pattern {
  position: absolute;
  inset: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg,
    var(--card-pattern-fg),
    var(--card-pattern-fg) 3px,
    var(--card-pattern-bg) 3px,
    var(--card-pattern-bg) 6px
  );
  border: 1px solid var(--card-pattern-border);
  display: none;
}
.card.face-down .card-pattern {
  display: block;
}
.card-tl,
.card-br {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.card-tl {
  top: 3px;
  left: 4px;
}
.card-br {
  bottom: 3px;
  right: 4px;
  transform: rotate(180deg);
}
.card-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--card-text);
}
.card-suit {
  font-size: 9px;
}
.suit-red {
  color: var(--suit-red) !important;
}
.card-mid {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--card-text);
}
.res-pip {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--res-pip-text);
}
.r0 {
  background: var(--r0);
}
.r1 {
  background: var(--r1);
}
.r2 {
  background: var(--r2);
}
.r3 {
  background: var(--r3);
}
.r4 {
  background: var(--r4);
}
.r5 {
  background: var(--r5);
}
.r6 {
  background: var(--r6);
}
.card.selectable {
  cursor: pointer;
}
.card.selectable:hover {
  transform: translateY(-4px);
}

/* === Residue Badge === */
.res-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--bg);
  transition: all 0.2s;
}
.res-badge.rq {
  background: var(--text-muted);
  color: var(--bg);
}
.res-badge.r0 {
  background: var(--r0);
}
.res-badge.r1 {
  background: var(--r1);
}
.res-badge.r2 {
  background: var(--r2);
}
.res-badge.r3 {
  background: var(--r3);
}
.res-badge.r4 {
  background: var(--r4);
}
.res-badge.r5 {
  background: var(--r5);
}
.res-badge.r6 {
  background: var(--r6);
}

/* === Hand Layout === */
.hand {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(--card-h) + 4px);
  gap: 0;
  position: relative;
}
.hand .card + .card {
  margin-left: -10px;
}

/* === Card Animations === */
@keyframes cardDeal {
  from {
    transform: translateX(80px) rotate(5deg);
    opacity: 0;
  }
  to {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
}
@keyframes cardFlip {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes resPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zeroGlow {
  0%,
  100% {
    box-shadow: 0 0 6px var(--zero);
  }
  50% {
    box-shadow:
      0 0 16px var(--zero),
      0 0 28px rgba(64, 208, 240, 0.25);
  }
}
@keyframes selectPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px var(--select-pulse-lo),
      0 1px 3px rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--select-pulse-hi),
      0 0 10px var(--select-glow);
  }
}
.card.dealing {
  animation: cardDeal 0.3s ease-out both;
}
.card.flipping {
  animation: cardFlip 0.45s ease-in-out;
}
.res-badge.pop {
  animation: resPop 0.3s ease-out;
}
.res-badge.zero-glow {
  animation: zeroGlow 1.5s ease-in-out infinite;
}

/* === Responsive Card Sizes === */
@media (max-width: 390px) {
  :root {
    --card-w: 48px;
    --card-h: 68px;
  }
}
@media (min-width: 521px) {
  :root {
    --card-w: 64px;
    --card-h: 90px;
  }
  .card-rank {
    font-size: 13px;
  }
  .card-suit {
    font-size: 11px;
  }
  .card-mid {
    font-size: 26px;
  }
  .res-pip {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
}
@media (min-width: 700px) {
  :root {
    --card-w: 72px;
    --card-h: 100px;
  }
  .card-rank {
    font-size: 14px;
  }
  .card-mid {
    font-size: 30px;
  }
  .res-pip {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  .hand .card + .card {
    margin-left: -14px;
  }
}