/* === Set Stud Game-Specific Styles === */

/* Set colors */
:root {
  --set-r: #e84060;
  --set-f: #4a9eff;
  --set-p: #3dd47a;
  --set-e: #b060e0;
}

/* Community zone */
.community-zone {
  text-align: center;
  padding: 4px 0;
}
.comm-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.community-hand {
  justify-content: center;
  min-height: 80px;
}

/* Set membership badges on cards */
.set-badges {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 2;
}
.set-tag {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.3px;
}
.set-tag.tag-r {
  background: var(--set-r);
}
.set-tag.tag-f {
  background: var(--set-f);
}
.set-tag.tag-p {
  background: var(--set-p);
}
.set-tag.tag-e {
  background: var(--set-e);
}
.set-tag.tag-none {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Rank badge (replaces res-badge for this game) */
.rank-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  display: inline-block;
  min-width: 20px;
  text-align: center;
  transition: all 0.2s;
}
.rank-badge.good {
  color: var(--win);
  border-color: rgba(61, 212, 122, 0.4);
}
.rank-badge.great {
  color: var(--gold);
  border-color: rgba(240, 192, 64, 0.4);
}

/* Venn diagram zone */
.venn-zone {
  text-align: center;
  padding: 6px 0;
  min-height: 24px;
}
.venn-display {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  max-width: 300px;
  animation: fadeSlideUp 0.3s ease-out both;
}
.venn-region {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  opacity: 0.4;
  transition: all 0.2s;
}
.venn-region.active {
  opacity: 1;
  background: rgba(240, 192, 64, 0.12);
  color: var(--gold);
  border-color: rgba(240, 192, 64, 0.3);
}
.venn-region.active-r {
  border-color: var(--set-r);
  color: var(--set-r);
  background: rgba(232, 64, 96, 0.1);
}
.venn-region.active-f {
  border-color: var(--set-f);
  color: var(--set-f);
  background: rgba(74, 158, 255, 0.1);
}
.venn-region.active-p {
  border-color: var(--set-p);
  color: var(--set-p);
  background: rgba(61, 212, 122, 0.1);
}
.venn-region.active-e {
  border-color: var(--set-e);
  color: var(--set-e);
  background: rgba(176, 96, 224, 0.1);
}

/* Card selection mode */
.card.selectable {
  cursor: pointer;
}
.card.selectable:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px rgba(240, 192, 64, 0.4);
}
.card.selected {
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 12px rgba(240, 192, 64, 0.3);
  transform: translateY(-6px);
}
.card.excluded {
  opacity: 0.35;
  transform: scale(0.95);
}

/* Complement card highlight */
.card.complement-target {
  cursor: pointer;
}
.card.complement-target:hover {
  box-shadow: 0 0 12px rgba(176, 96, 224, 0.5);
}
.card.complemented {
  box-shadow:
    0 0 0 2px rgba(176, 96, 224, 0.5),
    0 0 8px rgba(176, 96, 224, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Selection info */
.selection-info {
  text-align: center;
  padding: 3px 0;
  min-height: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Select controls */
.select-controls {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.select-controls.show {
  display: flex;
}
.select-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.5px;
  animation: tapPulse 1.4s ease-in-out infinite;
}

/* Betting round indicator */
.round-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-align: center;
  padding: 2px 0;
}

/* History row */
.history-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.4s ease-out both;
}
.hist-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  opacity: 0.85;
}

/* Play row adjustments for more buttons */
#playRow {
  flex-wrap: wrap;
  gap: 6px;
}
#playRow .act-btn {
  min-width: 70px;
  font-size: 11px;
  padding: 8px 10px;
}

/* Responsive */
@media (max-width: 420px) {
  #playRow .act-btn {
    min-width: 60px;
    font-size: 10px;
    padding: 7px 8px;
  }
  .set-tag {
    font-size: 6px;
    padding: 1px 2px;
  }
  .venn-region {
    font-size: 7px;
    padding: 1px 3px;
  }
}