body { background: #e8f5e9; font-family: sans-serif; padding: 20px; }

h1 { text-align: center; font-size: 2.5em; color: #2e7d32; }
h2 { margin: 0 0 10px; }

/* Button row and controls row: no wrapping */
.button-row, .controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

/* Card buttons: restore size, no wrap */
.card-select {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.card-select .card-button {
  width: 2.5em;
  height: 2.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #4caf50;
  background: #c8e6c9;
  border-radius: 4px;
  cursor: pointer;
}
.card-select .card-button.selected {
  background: #66bb6a;
}

/* Send button: same height as cards, width = 3 cards + gaps */
.big-button {
  height: 2.5em;
  width: calc(3 * 2.5em + 2 * 10px);
  background: #c8e6c9;
  border: 2px solid #4caf50;
  border-radius: 4px;
  cursor: pointer;
}

/* Inputs and other buttons */
.controls input, .controls button, .button-row button {
  font-size: 1em;
  padding: 6px;
}

/* Help button styling */
#help {
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: #f5f5f5;
  color: #424242;
  border: 2px solid #4caf50;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 0.9em;
}

/* Help panel styling */
.help-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 2px solid #4caf50;
  border-radius: 8px;
  max-width: 500px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.help-panel h2 {
  margin-top: 0;
  color: #2e7d32;
}

.help-panel ol {
  margin: 20px 0;
  padding-left: 20px;
}

.help-panel li {
  margin-bottom: 10px;
}

#close-help {
  background: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Scoreboard styling */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1.5em;
  margin-top: 20px;
  table-layout: fixed;
}
th, td {
  border: 2px solid #4caf50;
  border-width: 0 2px 0 2px;  /* Only vertical borders */
  padding: 4px;               /* Reduced padding */
  text-align: center;
  background: white;
  cursor: default;
  width: 1%;
  min-height: 1.2em;         /* Reduced height */
  height: 1.2em;             /* Reduced height */
}
th { 
  background: #a5d6a7;
  border-top: 2px solid #4caf50;  /* Add top border for header row */
}
tr:not(:last-child) td {
  border-bottom: 1px solid #c8e6c9;  /* Light green horizontal lines between rows */
}
tr:last-child td {
  border-bottom: 2px solid #4caf50;  /* Dark green bottom border */
}
th.selected-player, td.selected-player { background: #66bb6a; color: white; }
.out { color: grey; }
.winner { 
  color: #d4ff00;  /* Bright yellow-green */
  font-weight: bold;
}
.log { color: grey; font-size: 0.75em; margin-top: 20px; }
.error { color: red; text-align: center; margin-bottom: 10px; }
#round-input { display: none; }