#player_averages2 {
  border-collapse: separate;      /* allow spacing + border-radius */
  border-spacing: 0 0px;         /* 12px vertical gap between row groups */
  width: 100%;
}

/* Base style for all cells */
#player_averages2 td {
  background: #222;               /* dark row background */
  color: #fff;
  padding: 8px 12px;
}

/* First row of each group of 3 → round top corners */
#player_averages2 tr:nth-child(3n+2) td:first-child {
  border-top-left-radius: 20px;
}
#player_averages2 tr:nth-child(3n+2) td:last-child {
  border-top-right-radius: 20px;
}

/* Third row of each group of 3 → round bottom corners */
#player_averages2 tr:nth-child(3n+1) td:first-child {
  border-bottom-left-radius: 20px;
}
#player_averages2 tr:nth-child(3n+1) td:last-child {
  border-bottom-right-radius: 20px;
}

.card {
background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}


.row2 {
display: grid; grid-template-columns: 280px 1fr 1fr; gap: 16px;
align-items: center; padding: 1px 0; border-bottom: 1px dashed var(--border);
}
.row2:last-child { border-bottom: none;}


.label {
color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
}


.control { display: flex; align-items: center; gap: 12px; }


select, input[type="range"] {
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
background: var(--muted); color: var(--fg); outline: none;
}

.selection {
/*min-height: 44px; display: flex; align-items: center; gap: 8px;
background: linear-gradient(180deg, rgba(255,165,0,0.09), rgba(255,165,0,0.06));
border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--fg);
*/
text-align: center; justify-content: center;
}


.pill {
display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
border-radius: 999px; background: var(--muted); border: 1px solid var(--border); font-size: 13px;
}


.hint { color: #c8c8c8; font-size: 13px;}


.actions { margin-top: 18px; display: flex; gap: 12px; justify-content: flex-end; }
.button { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--muted); color: var(--fg); text-decoration: none; font-weight: 600; display: inline-block; }
.button.primary { background: var(--accent); color: #000; border-color: transparent; }
.button:hover { filter: brightness(1.05); }


.results-grid { display: grid; gap: 10px; }
.list { margin: 6px 0 0; padding-left: 18px; }


@media (max-width: 900px) {
.row2 { grid-template-columns: 1fr; }
}
-->