/* ==================== КАРТЫ ==================== */
.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  padding: 0;
  flex: 0 0 auto;
  box-shadow: 0 3px 6px rgba(0,0,0,.55);
  transition: transform .12s, box-shadow .12s;
  user-select: none;
  position: relative;
}
.card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.card.sel {
  transform: translateY(-30px) scale(1.05);
  z-index: 20;
  box-shadow: 0 0 0 4px var(--acc), 0 6px 16px rgba(0,0,0,.8);
}
.card.doc {
  box-shadow: 0 0 0 3px var(--acc), 0 3px 8px rgba(0,0,0,.6);
}
.card.opp-doc {
  box-shadow: 0 0 0 3px #e74c3c, 0 3px 8px rgba(0,0,0,.6);
}
.card.opp-doc::before {
  content: '⚠';
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 14px;
  color: #e74c3c;
  background: rgba(255,255,255,.9);
  border-radius: 3px;
  padding: 0 3px;
  z-index: 5;
  font-weight: 900;
}

/* ==================== ПЕРЕТАСКИВАНИЕ ==================== */
.hand .card.dragging {
  position: fixed !important;
  z-index: 500 !important;
  pointer-events: none;
  transform: scale(1.08) rotate(0deg) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.9), 0 0 0 3px var(--acc) !important;
  transition: none;
}

/* ==================== РАЗДАЧА (медленнее) ==================== */
@keyframes dealIn {
  0%   { transform: translateY(-300px) rotate(-35deg) scale(.3); opacity: 0; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
.hand .card.deal { animation: dealIn 1s cubic-bezier(.2,.8,.3,1) backwards; }
.hand .card.deal:nth-child(1) { animation-delay: 0s;    }
.hand .card.deal:nth-child(2) { animation-delay: .18s;  }
.hand .card.deal:nth-child(3) { animation-delay: .36s;  }
.hand .card.deal:nth-child(4) { animation-delay: .54s;  }
.hand .card.deal:nth-child(5) { animation-delay: .72s;  }
.hand .card.deal:nth-child(6) { animation-delay: .90s;  }
.hand .card.deal:nth-child(7) { animation-delay: 1.08s; }
.hand .card.deal:nth-child(8) { animation-delay: 1.26s; }
.hand .card.deal:nth-child(9) { animation-delay: 1.44s; }

/* ==================== РУКА-ВЕЕР ==================== */
.hand {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  background: transparent;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}
.hand .card {
  position: absolute;
  bottom: calc(8px * var(--scale));
  left: 50%;
  margin-left: calc(var(--card-w) / -2);
  pointer-events: auto;
  transform-origin: center bottom;
  transition: transform .25s ease-out;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
.hand .card:active { cursor: grabbing; }

/* ==================== ПОДСКАЗКА ==================== */
.actions {
  display: flex; gap: 6px; padding: 4px 8px;
  justify-content: center; flex-wrap: wrap;
  background: rgba(0,0,0,.3);
  min-height: 26px; align-items: center;
  flex-shrink: 0;
}
[data-theme="paper"] .actions { background: rgba(0,0,0,.1); }
.hint {
  font-size: calc(12px * var(--scale));
  color: var(--acc); font-weight: 600;
  padding: 2px 12px; text-align: center;
  width: 100%;
}

/* ==================== ЭМОДЗИ-БАР ==================== */
.emoji-bar {
  position: fixed;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4px; padding: 8px;
  background: rgba(0,0,0,.7);
  border-radius: 12px; z-index: 200;
}
.emoji-bar button {
  background: none; border: none; font-size: 22px;
  cursor: pointer; padding: 4px; border-radius: 6px;
}