/* Main Container */
.dragonLionTable {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: white;
}

/* Table Grid */
.tableGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* Table Section */
.tableSection {
  background: white;
}

/* Table Styling */
.table {
  width: 100%;
  border-collapse: collapse;
}

/* Table Header Row */
.tableHeaderRow {
  background-color: #f3f4f6;
}

.emptyHeader {
  text-align: left;
  padding: 12px;
  font-weight: bold;
}

.columnHeader {
  padding: 12px;
  text-align: center;
  font-weight: 500;
  color: #374151;
}

/* Table Row */
.tableRow {
  border-bottom: 1px solid #e5e7eb;
}

/* Bet Type Cell */
.betType {
  background-color: #f3f4f6;
  padding: 12px;
  text-align: left;
  font-weight: 500;
  color: #374151;
}

/* Odds Cell */
.oddsCell {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
}

/* Card Cell */
.cardCell {
  padding: 0;
  background-color: #f3f4f6;
}

/* Card Styling */
.card {
  border: 2px solid #fef08a;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 4px 8px;
}

.cardContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}

.cardSuits {
  display: flex;
  gap: 2px;
  font-size: 0.75rem;
}

.black {
  color: #000;
}

.red {
  color: #ef4444;
}

/* Responsive Design */
@media (max-width: 768px) {
  .tableGrid {
    grid-template-columns: 1fr;
  }

  .emptyHeader,
  .columnHeader,
  .betType,
  .oddsCell,
  .cardCell {
    padding: 8px;
    font-size: 0.813rem;
  }

  .card {
    padding: 2px 6px;
  }
}

@media (max-width: 480px) {
  .dragonLionTable {
    font-size: 0.75rem;
  }

  .cardSuits {
    font-size: 0.625rem;
  }
}

.grayBackground {
  background-color: #3a4a5d; /* Or use any dark shade */
  color: white;
}