/* ── Hand panel ────────────────────────────────────── */
.hand-panel {
  background: rgba(0,0,0,.18);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 5px 10px 8px;
  min-height: 40px;
  transition: all .2s;
  max-width: 680px;
}
.hand-panel.clickable { cursor: pointer; }
.hand-panel.clickable:hover {
  border-color: rgba(255,255,255,.2);
  background: rgba(0,0,0,.25);
}
.hand-panel.active-turn {
  border-color: rgba(46,204,113,.5);
  box-shadow: 0 0 14px rgba(46,204,113,.15);
}

/* ── Panel header ──────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  user-select: none;
}
.player-name {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.player-name .dir {
  display: inline-block;
  width: 20px; height: 20px;
  line-height: 20px;
  text-align: center;
  background: rgba(255,215,0,.12);
  border-radius: 5px;
  font-size: .65rem;
  color: #ffd700;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-count { font-size: .7rem; color: #aaa; }
.card-count b { color: #ffd700; }
.edit-icon { font-size: .65rem; color: rgba(255,255,255,.3); }
.hand-panel.clickable:hover .edit-icon { color: rgba(255,215,0,.6); }
.turn-indicator {
  font-size: .65rem;
  font-weight: 700;
  color: #6ff5a9;
  animation: fadeIn .3s;
}

/* ── Hand cards row (single-line for N/S) ──────────── */
.hand-cards {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  padding: 2px 0;
}
.suit-sep { width: 8px; flex-shrink: 0; }
.empty-msg {
  font-size: .65rem;
  color: rgba(255,255,255,.25);
  font-style: italic;
}

/* ── Multi-row hand (suit per row for W/E) ─────────── */
.hand-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}
.hand-suit-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.hand-suit-row .suit-label {
  width: 16px;
  text-align: center;
  font-size: .9rem;
  flex-shrink: 0;
  user-select: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.hand-suit-row .suit-label.spades   { color: #ccc; }
.hand-suit-row .suit-label.hearts   { color: #e74c5e; }
.hand-suit-row .suit-label.diamonds { color: #e74c5e; }
.hand-suit-row .suit-label.clubs    { color: #ccc; }

/* ── Playing Card ──────────────────────────────────── */
.card {
  position: relative;
  width: 44px;
  height: 62px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
}

/* Unassigned (in modal) */
.card.unassigned {
  background: linear-gradient(160deg, #f5f5f0 0%, #e8e6e0 100%);
  border: 1.5px solid #c0beb8;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  opacity: .45;
}
.card.unassigned:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  border-color: #999;
  z-index: 2;
}

/* Assigned (in modal) */
.card.assigned {
  background: linear-gradient(160deg, #ffffff 0%, #faf9f5 100%);
  border: 2px solid #ffd700;
  box-shadow: 0 2px 8px rgba(255,215,0,.25), 0 1px 3px rgba(0,0,0,.1);
}
.card.assigned:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(255,80,80,.25);
  border-color: #ff6b6b;
  z-index: 2;
}

/* Removed (taken by another player, in modal) */
.card.removed { display: none; }

/* Preview (in panel, non-interactive) */
.card.preview {
  background: linear-gradient(160deg, #ffffff 0%, #faf9f5 100%);
  border: 1.5px solid rgba(255,215,0,.3);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  cursor: default;
}

/* Playable (in hand during play) */
.card.playable {
  background: linear-gradient(160deg, #ffffff 0%, #faf9f5 100%);
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
}
.card.playable:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(46,204,113,.3);
  border-color: #2ecc71;
  z-index: 2;
}

/* Not playable (must follow suit) */
.card.not-playable {
  background: linear-gradient(160deg, #f0f0eb 0%, #e0ded8 100%);
  border: 1.5px solid #b0aea8;
  opacity: .35;
  cursor: default;
}

/* Trick card (in center field) */
.card.trick-card {
  background: linear-gradient(160deg, #ffffff 0%, #faf9f5 100%);
  border: 1.5px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  cursor: default;
  width: 44px;
  height: 62px;
}

/* ── Card inner layout ─────────────────────────────── */
.card-inner { width: 100%; height: 100%; position: relative; }

.card-tl {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  position: absolute;
  top: 3px; left: 3px;
}
.card-tl .card-rank { font-size: .78rem; font-weight: 800; }
.card-tl .card-suit-sm { font-size: .62rem; }

.card-br {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  position: absolute;
  bottom: 3px; right: 3px;
  transform: rotate(180deg);
}
.card-br .card-rank { font-size: .78rem; font-weight: 800; }
.card-br .card-suit-sm { font-size: .62rem; }

.card-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.35rem;
  line-height: 1;
}

/* ── Suit colors ───────────────────────────────────── */
.card.suit-spades .card-rank,
.card.suit-spades .card-suit-sm,
.card.suit-spades .card-center { color: #1a1a3a; }

.card.suit-hearts .card-rank,
.card.suit-hearts .card-suit-sm,
.card.suit-hearts .card-center { color: #cc1830; }

.card.suit-diamonds .card-rank,
.card.suit-diamonds .card-suit-sm,
.card.suit-diamonds .card-center { color: #cc1830; }

.card.suit-clubs .card-rank,
.card.suit-clubs .card-suit-sm,
.card.suit-clubs .card-center { color: #1a1a3a; }

/* Face cards */
.card.face-card.assigned,
.card.face-card.playable,
.card.face-card.preview {
  background: linear-gradient(160deg, #fffef8 0%, #f5f0e0 100%);
}
.card.face-card .card-center { font-size: 1.35rem; opacity: .8; }

/* ── Tooltip ───────────────────────────────────────── */
.card[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: #1a1a1a;
  color: #fff;
  font-size: .58rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: 20;
}
.card[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Mobile card sizing ────────────────────────────── */
@media (max-width: 768px) {
  .hand-panel {
    padding: 4px 6px 6px;
    border-radius: 8px;
    max-width: 100%;
  }
  .panel-header { margin-bottom: 2px; padding-bottom: 2px; }
  .player-name { font-size: .72rem; gap: 4px; }
  .player-name .dir { width: 18px; height: 18px; line-height: 18px; font-size: .6rem; }
  .card-count { font-size: .62rem; }
  .turn-indicator { font-size: .58rem; }

  .hand-cards {
    flex-wrap: wrap;
    gap: 2px;
  }
  .suit-sep { width: 5px; }

  .card {
    width: 34px;
    height: 50px;
    border-radius: 4px;
  }
  .card.trick-card {
    width: 34px;
    height: 50px;
  }
  .trick-placeholder {
    width: 34px;
    height: 50px;
  }

  .card-tl { top: 2px; left: 2px; }
  .card-tl .card-rank { font-size: .62rem; }
  .card-tl .card-suit-sm { font-size: .48rem; }
  .card-br { bottom: 2px; right: 2px; }
  .card-br .card-rank { font-size: .62rem; }
  .card-br .card-suit-sm { font-size: .48rem; }
  .card-center { font-size: 1.05rem; }
  .card.face-card .card-center { font-size: 1.05rem; }

  .hand-rows { gap: 1px; }
  .hand-suit-row { gap: 2px; }
  .hand-suit-row .suit-label { width: 14px; font-size: .75rem; }

  /* Disable tooltip on touch */
  .card[data-tip]::after { display: none; }
}