/* ============================================================
   head-to-head.css — Head-to-head interaction styles
   ============================================================ */

.h2h-dims { display: flex; flex-direction: column; gap: 10px; }
.h2h-dim-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,0.5); margin-bottom: 5px;
}
.h2h-options { display: flex; gap: 8px; flex-wrap: wrap; }
.h2h-btn {
  padding: 7px 16px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 8px; color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; touch-action: manipulation;
}
@media (hover: hover) {
  .h2h-btn:hover { background: rgba(255,255,255,0.15); }
}
.h2h-btn.selected { background: rgba(0,201,177,0.20); border-color: var(--teal); color: white; }