body {
  font-family: sans-serif;
  background-color: #111;
  color: white;
}

/* ─── Mobile adjustments (phones only) ───────────────────────── */
@media only screen and (max-width: 600px) {
  /* Add horizontal padding */
  body {
    padding: 0 1rem;
  }
  /* Stack combo and vehicle rows vertically & center */
  .combo-fields-row,
  .vehicle-entry-row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Center buttons, dropdowns, and sections */
  .combo-buttons,
  .upgrade-btn-row,
  .info-display,
  .input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* Make inputs/buttons fit the viewport */
  input[type="text"],
  input[type="number"],
  select,
  button {
    width: 90%;
    max-width: 300px;
    margin: 0.5rem 0;
  }
  /* Center titles & avatar */
  .title,
  .slogan,
  .avatar-container {
    text-align: center;
    margin: 0 auto 1rem auto;
  }
}