/* ========== CARDS ========== */
.card {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 7px;
  background: #ffffff;
  color: #111111;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.35);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.card.red {
  color: #c62828;
}

.card.black {
  color: #111111;
}

/* Corner indices: Top-left and bottom-right */
.card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  width: 18px;
}

.card-corner.top-left {
  top: 3px;
  left: 3px;
}

.card-corner.bottom-right {
  bottom: 3px;
  right: 3px;
  transform: rotate(180deg);
}

.card .rank,
.card .rank-br {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  display: block;
}

.card .mini-suit,
.card .mini-suit-br {
  font-size: 12px;
  line-height: 1;
  margin-top: 1px;
  display: block;
}

/* Center Large Pip */
.card .suit.center-pip {
  font-size: 36px;
  line-height: 1;
  opacity: 0.92;
  position: relative;
  z-index: 1;
}

.card.face-down {
  background: #600000;
  border: 2px solid #999;
}

.card.face-down::before {
  content: '';
  position: absolute;
  inset: 3px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.15) 3px,
      rgba(255,255,255,0.15) 6px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.15) 3px,
      rgba(255,255,255,0.15) 6px
    );
  border: 2px solid #aaa;
  border-radius: 3px;
}

.card.face-down .rank,
.card.face-down .suit {
  display: none;
}

.card.selectable {
  cursor: pointer;
  touch-action: manipulation;
}

.card.selectable:hover,
.card.selectable:active {
  box-shadow: 0 0 12px rgba(218,165,32,0.6);
}

/* Feature #5: Trick cards use full size (same as hand cards) */
.card.played {
  width: var(--card-width);
  height: var(--card-height);
}

.card.playable {
  border: 2px solid var(--gold);
  box-shadow: 0 0 8px rgba(218,165,32,0.5);
}

/* Fix #3: Disabled cards — visible but not interactive */
.card.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Fix #3: Hand loading indicator */
.hand-loading {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-bottom: 4px;
  display: block;
  text-align: center;
}

/* ========== HAND ========== */
.hand {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  gap: 0;
  justify-content: flex-start;
  align-items: flex-end;
  -webkit-overflow-scrolling: touch;
  width: max-content;
  min-width: 100%;
  flex-wrap: nowrap;
}

.hand .card {
  margin-right: -30px;
  transition: transform 0.15s ease;
}

.hand .card:last-child {
  margin-right: 0;
}

/* Hover lift (merged from .hand .card:hover/.card:active and the duplicate
   .hand .card.selectable:hover/.card.selectable:active — identical
   declarations, and every .selectable card is also .card) */
.hand .card:hover,
.hand .card:active {
  transform: translateY(-15px);
  z-index: 10;
}

/* ========== FIX #3: HAND SUIT GAPS ========== */
.suit-gap {
  width: var(--card-width);
  flex-shrink: 0;
}

.hand-group {
  display: flex;
  flex-direction: row;
}

/* ========== ANIMATIONS ========== */
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.card.deal {
  animation: dealIn 0.3s ease forwards;
}

/* ========== TRICK LEAD & HIGH CARD GLOW ========== */
.card.trick-high-card {
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.9), 0 0 4px rgba(255, 255, 255, 0.8) !important;
  border: 2px solid #ffd700 !important;
  transform: scale(1.04);
}

/* ========== 4-COLOR DECK THEME ========== */
body.four-color-deck .card.suit-S,
body.four-color-deck .card.suit-S * {
  color: #111111 !important;
}

body.four-color-deck .card.suit-H,
body.four-color-deck .card.suit-H * {
  color: #c62828 !important;
}

body.four-color-deck .card.suit-C,
body.four-color-deck .card.suit-C * {
  color: #1b7a2b !important;
}

body.four-color-deck .card.suit-D,
body.four-color-deck .card.suit-D * {
  color: #1565c0 !important;
}

/* ========== MOBILE RESPONSIVE (extracted per-component from the style.css mega-block) ========== */
@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {
  .hand {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0.5rem 0.25rem;
    -webkit-overflow-scrolling: touch;
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
  }

  /* Fix #5: Reduce overlap so cards are legible and tappable
     Card width 58px - 28px overlap = 30px visible per card (~22px for 13 cards/group)
     Total scrollable width ~58 + 12*30 = 418px for 1 suit group — scrolls nicely */
  .hand .card {
    margin-right: -28px;
    min-height: 44px;
  }

  /* Mobile hover lift (merged from the two identical mobile hover rules) */
  .hand .card:hover,
  .hand .card:active {
    transform: translateY(-20px);
    z-index: 20;
  }

  .card .card-corner.top-left { top: 2px; left: 2px; width: 14px; }
  .card .rank { font-size: 11px; }
  .card .mini-suit { font-size: 9px; margin-top: 0px; }
  .card .suit.center-pip { font-size: 26px; }
  .card-corner.bottom-right { display: none; }
}

/* Prominent card vertical lift selection — merged from the 3 !important
   blocks (.card.selected global, .hand .card.selected desktop, and the
   identical mobile block): 12 !important rules removed, behavior preserved.
   The selector list raises specificity (hand context) and the rule sits last
   so source order wins the ties the old !important flags forced. */
.card.selected,
.card.selectable.selected,
.hand .card.selected,
.hand .card.selectable.selected {
  border: 2px solid var(--gold);
  transform: translateY(-22px);
  box-shadow: 0 -4px 16px rgba(218,165,32,0.9);
  z-index: 50;
}