/* Karta do gry */
.playing-card {
  --card-w: 44px;
  --card-h: 64px;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 7px;
  position: relative;
  flex-shrink: 0;
  transition: box-shadow 0.3s, filter 0.3s;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.playing-card--lg {
  --card-w: clamp(40px, 10.5vw, 58px);
  --card-h: clamp(58px, 15vw, 84px);
}

.playing-card--sm {
  --card-w: 34px;
  --card-h: 50px;
}

.playing-card--flying {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.1s;
  transform: translate(0, 0) !important;
}

.playing-card--flying .playing-card__back {
  opacity: 1;
}

.playing-card--flying.playing-card--revealed .playing-card__back {
  opacity: 0;
}

.playing-card--flying-active {
  transform: translate(var(--fly-x, 0), var(--fly-y, 0)) !important;
}

.playing-card--flying-slow {
  transition-duration: 1.5s;
}

.playing-card__face,
.playing-card__back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playing-card__back {
  background: linear-gradient(145deg, #1e3a5f 0%, #0d1f33 100%);
  border: 2px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.playing-card__back::after {
  content: '';
  width: 70%;
  height: 70%;
  border: 2px solid rgba(240, 180, 41, 0.4);
  border-radius: 4px;
}

.playing-card__face {
  background: #fafafa;
  color: #1a1a1a;
  flex-direction: column;
  font-weight: 700;
  font-size: clamp(0.75rem, 3vw, 1rem);
  border: 1px solid #ccc;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.playing-card--revealed .playing-card__back {
  opacity: 0;
}

.playing-card--revealed .playing-card__face {
  opacity: 1;
  z-index: 3;
}

.playing-card--spade .playing-card__face,
.playing-card--club .playing-card__face {
  color: #1a1a1a;
}

.playing-card--heart .playing-card__face,
.playing-card--diamond .playing-card__face {
  color: #c41e3a;
}

.playing-card__rank {
  line-height: 1;
}

.playing-card__suit {
  font-size: 1.25rem;
  line-height: 1;
}

/* Animacje */
@keyframes deal-fly {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) scale(0.3) rotate(-12deg);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}

.playing-card--dealing {
  animation: deal-fly 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes card-flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

.playing-card--flipping {
  animation: card-flip 0.5s ease forwards;
}

@keyframes pot-to-winner {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translate(var(--to-x), var(--to-y));
  }
}

.fx-card--fly-away {
  animation: pot-to-winner 0.7s ease-in forwards;
  position: fixed;
  z-index: 150;
}

@keyframes war-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 20px 4px var(--accent-glow); }
}

.playing-card--ace {
  box-shadow: 0 0 10px var(--accent-glow);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.stack-pile {
  position: relative;
  width: var(--card-w, 52px);
  height: var(--card-h, 76px);
}

.stack-pile .playing-card {
  position: absolute;
  top: 0;
  left: 0;
}

.stack-pile .playing-card:nth-child(2) { transform: translate(2px, 2px); }
.stack-pile .playing-card:nth-child(3) { transform: translate(4px, 4px); }

/* Stos rewersów w polu wojny (obok talii) */
.war-stash-pile {
  position: relative;
  width: 44px;
  min-width: 44px;
  min-height: 40px;
  overflow: visible;
  flex-shrink: 0;
}

.war-stash-pile .playing-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.war-stash-pile .playing-card:nth-child(1) { bottom: 0; z-index: 1; }
.war-stash-pile .playing-card:nth-child(2) { bottom: 11px; z-index: 2; }
.war-stash-pile .playing-card:nth-child(3) { bottom: 22px; z-index: 3; }
.war-stash-pile .playing-card:nth-child(4) { bottom: 33px; z-index: 4; }
.war-stash-pile .playing-card:nth-child(5) { bottom: 44px; z-index: 5; }
.war-stash-pile .playing-card:nth-child(6) { bottom: 55px; z-index: 6; }
.war-stash-pile .playing-card:nth-child(7) { bottom: 66px; z-index: 7; }
.war-stash-pile .playing-card:nth-child(8) { bottom: 77px; z-index: 8; }
.war-stash-pile .playing-card:nth-child(9) { bottom: 88px; z-index: 9; }
.war-stash-pile .playing-card:nth-child(10) { bottom: 99px; z-index: 10; }
.war-stash-pile .playing-card:nth-child(11) { bottom: 110px; z-index: 11; }
.war-stash-pile .playing-card:nth-child(12) { bottom: 121px; z-index: 12; }
.war-stash-pile .playing-card:nth-child(13) { bottom: 132px; z-index: 13; }
.war-stash-pile .playing-card:nth-child(14) { bottom: 143px; z-index: 14; }
.war-stash-pile .playing-card:nth-child(n + 15) { bottom: 152px; z-index: 15; }

@keyframes war-card-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(240, 180, 41, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(240, 180, 41, 0.55);
    filter: brightness(1.12);
  }
}

.playing-card--war-pulse {
  animation: war-card-pulse 1.35s ease-in-out infinite;
}

@keyframes win-card-pulse {
  0%, 100% {
    box-shadow: 0 0 2px rgba(74, 222, 128, 0.25);
    filter: brightness(1);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 18px 5px rgba(74, 222, 128, 0.4);
    filter: brightness(1.08);
    transform: translateY(-3px) scale(1.02);
  }
}

.playing-card--win-pulse {
  animation: win-card-pulse 1.05s ease-in-out infinite;
}

.play-zone-win-tag {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--success);
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
  line-height: 1;
}

.playing-card--brief-unveil {
  animation: brief-unveil-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes brief-unveil-pulse {
  from { filter: brightness(1); box-shadow: 0 0 8px rgba(240, 180, 41, 0.35); }
  to { filter: brightness(1.08); box-shadow: 0 0 16px rgba(240, 180, 41, 0.6); }
}

.playing-card--war-unveil {
  box-shadow: 0 0 14px rgba(240, 180, 41, 0.45);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

@keyframes war-name-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}