.main-content {

  padding: 20px;

  text-align: center;

}



.game-links {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 25px;

  margin-top: 20px;

}



.game-card {

  background-color: #264d6a;

  border-radius: 12px;

  width: 200px;

  text-align: center;

  padding: 12px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);

  cursor: pointer;

}



.game-card:hover {

  transform: translateY(-5px) scale(1.03);

  box-shadow: 0 0 15px rgba(255, 165, 0, 0.6);

  background-color: #315f85;

}



.game-card img {

  max-width: 100%;

  border-radius: 8px;

  margin-bottom: 10px;

}



.game-card h3 {

  margin: 0;

  color: #72b8ff;

  font-size: 1rem;

}



.game-card a {

  display: block;

  text-decoration: none;

  color: inherit;

}



/* ----------------------- */

/* Petunia Bot Dashboard   */

/* ----------------------- */



.bot-dashboard {

  background-color: #263544;

  border: 2px solid #e75700;

  border-radius: 12px;

  padding: 20px;

  margin: 20px auto;

  max-width: 700px;

  text-align: center;

}



.dashboard-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 15px;

  margin-top: 20px;

}



.dashboard-button {

  background-color: #e75700;

  color: white;

  font-weight: bold;

  text-decoration: none;

  padding: 12px 20px;

  border-radius: 8px;

  transition: background-color 0.3s;

}



/* ---------------------------------- */

/* Mobile Responsive Tweaks (<= 600px) */

/* ---------------------------------- */

 @media (max-width: 500px) {

  #attendee-sections {

    grid-template-columns: 1fr; /* Stack vertically */

    justify-items: stretch;

    }



  .modal-content {

    padding: 20px;

    max-width: 95vw;

    margin: 10px;

    }

   .attendee-group {

    max-width: none;

    width: 100%;

    }

  .form-grid {

    grid-template-columns: 1fr;

    }



  .form-grid label {

    text-align: left;

    margin-bottom: 4px;

    }

  .pgv-button,

  .form-actions button {

    width: 100%;

    max-width: 100%;

    }

  .form-actions {

    flex-direction: column;

    align-items: stretch;

    }



  .pgv-button.alt {

    background: #555;

    }



  .pgv-button.alt:hover {

    background: #777;

    }

  #rsvp_limit_input_wrapper {

    display: grid;

    grid-template-columns: 150px 1fr;

    gap: 10px 15px;

    grid-column: span 2;

    align-items: center;

    }

  .calendar-controls {

    flex-direction: column;

    }

  }