/* Group Scoring Styles — Sunday Skins */

/* =========================================================
   Group Assignment (Host)
   ========================================================= */
.group-card {
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.group-label {
  font-weight: 700;
  color: #00B2A9;
  font-size: 1.1rem;
}
.group-count {
  color: #888;
  font-size: 0.9rem;
}
.group-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.group-player-chip {
  background: #1c1c1c;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  color: #FFC72C;
  font-weight: 600;
  font-size: 0.95rem;
}
.group-player-chip.empty {
  color: #555;
  border-style: dashed;
}

/* =========================================================
   Group Picker (Scorer selects their group)
   ========================================================= */
.group-pick-btn {
  display: block;
  width: 100%;
  background: #2a2a2a;
  border: 2px solid #444;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}
.group-pick-btn:hover,
.group-pick-btn:active {
  border-color: #00B2A9;
}
.group-pick-label {
  font-weight: 700;
  color: #00B2A9;
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.group-pick-players {
  color: #FFC72C;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.group-pick-scorer {
  color: #888;
  font-size: 0.8rem;
}

/* =========================================================
   Group Scoring Screen (Main input for scorer)
   ========================================================= */
.gs-hole-header {
  text-align: center;
  margin-bottom: 8px;
}
.gs-hole-num {
  font-size: 2rem;
  font-weight: 800;
  color: #00B2A9;
}
.gs-hole-info {
  font-size: 1rem;
  color: #999;
}
.gs-hole-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}
.gs-hole-counter {
  color: #ccc;
  font-size: 1rem;
}
.gs-players {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gs-player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2a2a2a;
  border-radius: 12px;
  padding: 14px 16px;
}
.gs-player-name {
  font-weight: 700;
  color: #FFC72C;
  font-size: 1.1rem;
  flex: 1;
}
.gs-player-input {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gs-btn-minus,
.gs-btn-plus {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}
.gs-btn-minus:active,
.gs-btn-plus:active {
  transform: scale(0.9);
}
.gs-btn-minus {
  background: #3a3a3a;
  color: #ff6b6b;
}
.gs-btn-plus {
  background: #3a3a3a;
  color: #51cf66;
}
.gs-score {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  background: #444;
}
.gs-score.eagle { background: #FFD700; color: #000; }
.gs-score.birdie { background: #e74c3c; color: #fff; }
.gs-score.par-score { background: #555; color: #fff; }
.gs-score.bogey { background: #3498db; color: #fff; }
.gs-score.double { background: #2c3e50; color: #95a5a6; }

.gs-save-btn {
  margin-top: 20px;
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
}