/* Cinquillo-specific board styles. Shared card UI lives in card-game.css. */

#screen-game {
  background: var(--felt);
  padding: 0;
  justify-content: stretch;
  overflow: hidden;
}

.suit-col {
  width: var(--card-w-sm);
  flex: 0 0 var(--card-w-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
}

.suit-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 5px 10px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  border-radius: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
}
.suit-label.Oros    { color: #f0c040; border-color: rgba(240,192,64,0.35);  background: rgba(240,192,64,0.1); }
.suit-label.Copas   { color: #e05060; border-color: rgba(224,80,96,0.35);   background: rgba(224,80,96,0.1); }
.suit-label.Espadas { color: #b8ccd8; border-color: rgba(184,204,216,0.35); background: rgba(184,204,216,0.1); }
.suit-label.Bastos  { color: #80d080; border-color: rgba(128,208,128,0.35); background: rgba(128,208,128,0.1); }

.suit-cards-col {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: calc(var(--card-h-sm) * 7 / 3 + 225px);
  padding-top: 15px;
  box-sizing: content-box;
}

.table-slot,
.table-card {
  width: var(--card-w-sm);
  height: var(--card-h-sm);
  flex-shrink: 0;
  position: relative;
  border-radius: 4px;
}

.suit-cards-col > * + * {
  margin-top: calc(30px - var(--card-h-sm));
}

.suit-cards-col > *:nth-child(5),
.suit-cards-col > *:nth-child(6) {
  margin-top: calc(var(--card-h-sm) * -0.333);
}

.suit-cards-col > *:nth-child(1) { z-index: 5; }
.suit-cards-col > *:nth-child(2) { z-index: 4; }
.suit-cards-col > *:nth-child(3) { z-index: 3; }
.suit-cards-col > *:nth-child(4) { z-index: 2; }
.suit-cards-col > *:nth-child(5) { z-index: 1; }
.suit-cards-col > *:nth-child(6) { z-index: 2; }
.suit-cards-col > *:nth-child(7) { z-index: 3; }
.suit-cards-col > *:nth-child(8) { z-index: 4; }
.suit-cards-col > *:nth-child(9) { z-index: 5; }
.suit-cards-col > *:nth-child(10) { z-index: 6; }

.table-slot {
  visibility: hidden;
}

.table-card {
  background: #fff;
  border: 1.5px solid #bbb;
  overflow: hidden;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.45);
}

.hand-card.playable { cursor: pointer; }
.hand-card.playable:hover {
  transform: translateY(-14px);
  box-shadow: 2px 14px 20px rgba(0,0,0,0.6);
}

.hand-card.playable.urgent {
  border-color: #f0c040;
  box-shadow: 0 0 12px rgba(240,192,64,0.65), 2px 2px 8px rgba(0,0,0,0.5);
  animation: urgent-glow 1.8s ease-in-out infinite;
}
.hand-card.playable.urgent:hover { animation: none; }