/* Main Container */
.dragonTable {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f5f5;
  padding: 16px;
}

/* Table Layout */
.tableLayout {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}

/* Common Table Styles */
.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.tableHeaderRow {
  background-color: #f3f4f6;
}

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

.tableRow {
  border-bottom: 1px solid #e5e7eb;
}

.playerName {
  background-color: #f3f4f6;
  padding: 12px;
  text-align: left;
  font-weight: bold;
}

/* Back/Lay Section */
.backHeader {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.layHeader {
  background-color: #ff0000;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.backCell {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.layCell {
  background-color: #ff0000;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.lockedCell {
  background-color: #333;
  padding: 12px;
  text-align: center;
  color: white;
}

/* Pair Section */
.pairSection {
  grid-column: 2;
  grid-row: 1;
}

.pairBox {
  background: linear-gradient(to right, #0284c7, #0369a1);
  color: white;
  padding: 16px;
  /* border-radius: 8px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  cursor: pointer;
}

.odds {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Even/Odd Section */
.evenHeader {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.oddHeader {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.evenCell {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.oddCell {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

/* Red/Black Section */
.redHeader {
  background-color: #ff0000;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.blackHeader {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.redCell {
  background-color: #ff0000;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.blackCell {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

/* Suits Section */
.suitHeader {
  background-color: #f3f4f6;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.suitCell {
  background-color: #93c5fd;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.suitBlack {
  color: #000;
}

.suitRed {
  color: #ef4444;
}

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

  .pairSection {
    grid-column: 1;
    grid-row: auto;
  }

  .emptyHeader,
  .backHeader,
  .layHeader,
  .evenHeader,
  .oddHeader,
  .redHeader,
  .blackHeader,
  .suitHeader,
  .playerName,
  .backCell,
  .layCell,
  .evenCell,
  .oddCell,
  .redCell,
  .blackCell,
  .suitCell {
    padding: 8px;
    font-size: 0.813rem;
  }
}

@media (max-width: 480px) {
  .dragonTable {
    padding: 8px;
  }

  .tableLayout {
    gap: 8px;
  }
}