/* ============================================================
   КАРТИ — лицата и гърбовете се рисуват като SVG (js/cardart.js).
   Тук са само размерите, обръщането и интерактивността.
   Означенията върху картите са на английски: A K Q J 10 9 8 7
   ============================================================ */

.pcard {
  --cw: 78px;
  --ch: calc(var(--cw) * 1.4);
  width: var(--cw); height: var(--ch);
  position: relative;
  flex: 0 0 auto;
  perspective: 900px;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.pcard.xs { --cw: 44px; }
.pcard.sm { --cw: 58px; }
.pcard.md { --cw: 78px; }
.pcard.lg { --cw: 92px; }
.pcard.xl { --cw: 118px; }

.pc-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .42s var(--ease);
}
.pcard[data-down="1"] .pc-inner { transform: rotateY(180deg); }

.pc-face, .pc-back {
  position: absolute; inset: 0;
  border-radius: calc(var(--cw) * .085);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 2px 7px rgba(0,0,0,.35);
  overflow: hidden;
  background: transparent;
}
.pc-back { transform: rotateY(180deg); }

.pc-face > svg, .pc-back > svg,
.pc-face > .pc-img, .pc-back > .pc-img {
  width: 100%; height: 100%; display: block;
  border-radius: inherit;
}
.pc-img { object-fit: fill; }

/* ---------------- ИНТЕРАКТИВНОСТ ---------------- */
.pcard.play { cursor: pointer; }
.pcard.play .pc-inner { transition: transform .25s var(--ease); }
@media (hover: hover) {
  .pcard.play:hover { z-index: 30; }
  .pcard.play:hover .pc-inner { transform: translateY(-18px) scale(1.07); }
  .pcard.play:hover .pc-face { box-shadow: 0 14px 28px rgba(0,0,0,.5), 0 0 0 3px var(--brand); }
}
.pcard.sel { z-index: 32; }
.pcard.sel .pc-inner { transform: translateY(-26px) scale(1.09); }
.pcard.sel .pc-face { box-shadow: 0 16px 32px rgba(0,0,0,.55), 0 0 0 4px var(--gold); }
.pcard.blocked { filter: grayscale(.7) brightness(.66); cursor: not-allowed; }
.pcard.blocked .pc-inner { transform: none !important; }
.pcard.hintable .pc-face { animation: hintGlow 1.6s ease-in-out infinite; }
@keyframes hintGlow {
  0%,100% { box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 0 0 0 rgba(22,184,119,0); }
  50%     { box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 0 0 5px rgba(22,184,119,.6); }
}
.pcard.dragging { z-index: 60; }
.pcard.dragging .pc-inner { transition: none; }
.pcard.deal-in { animation: dealIn .38s var(--ease) backwards; }
@keyframes dealIn {
  from { transform: translate(0, -220px) rotate(-25deg) scale(.7); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.pcard.fly-out { animation: flyOut .3s var(--ease) forwards; }
@keyframes flyOut { to { transform: translateY(-140px) scale(.7); opacity: 0; } }

/* ---------------- РЪКА (варианти) ---------------- */
.hand {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  min-height: calc(var(--hand-cw, 92px) * 1.58);
  padding: var(--sp-2) var(--sp-3) 0;
}
.hand .pcard { --cw: var(--hand-cw, 92px); margin: 0 var(--hand-gap, -8px); }
.hand[data-variant="row"] { overflow-x: auto; justify-content: flex-start; }
.hand[data-variant="row"] .pcard { margin: 0 3px; }
.hand[data-variant="arc"] .pcard,
.hand[data-variant="fan"] .pcard { transform-origin: 50% 130%; }

/* Подсказка при влачене нагоре */
.drop-hint {
  position: absolute; inset: auto 0 100% 0; margin: 0 auto var(--sp-2);
  width: min(280px, 70%); text-align: center;
  border: 2px dashed var(--brand); border-radius: var(--r-md);
  padding: 6px; color: var(--brand); font-weight: 800; font-size: .85rem;
  background: rgba(22,184,119,.12); opacity: 0; transition: opacity .2s;
}
.drop-hint.on { opacity: 1; }