/* ===== PLAYHELLGAME GAME HUB PAGE ===== */

.phg-gamehub-hero {
  padding: var(--space-12) 0 var(--space-8) 0;
  background: linear-gradient(135deg, var(--color-primary) 0 26%, #ffe066 90%);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.phg-gamehub-title {
  color: var(--color-text);
  font-size: var(--font-size-3xl);
  letter-spacing: 1px;
  margin-bottom: var(--space-3);
  line-height: var(--line-height-tight);
}
.phg-gamehub-desc {
  font-size: var(--font-size-lg);
  color: var(--gray-700);
  margin-inline: auto;
  max-width: 48ch;
}

.phg-gamehub-section {
  padding-block: var(--space-10);
  background: var(--color-background);
}

/* GAME SELECTION GRID */
.phg-devs-list {
  display: flex;
  justify-content: space-between;
}
.phg-guide-card,
.phg-dev-card {
  max-width: 300px;
}

.phg-community-btn {
  display: block;
  margin: 0 auto;
}

.phg-games-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.phg-game-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.phg-game-card:hover,
.phg-game-card:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px) scale(1.03);
}
.phg-game-thumb {
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-xs);
}
.phg-game-card h3 {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
}
.phg-play-btn {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  padding-inline: var(--space-6);
}

/* PLAYER BENEFITS */
.phg-player-benefits {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}
.phg-benefits-list {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-8);
  font-size: var(--font-size-base);
}
@media (max-width: 600px) {
  .phg-benefits-list { grid-template-columns: 1fr; }
}

/* TOURNAMENTS */
.phg-tournaments-list {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.phg-tournament-card {
  flex: 1 1 285px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  min-width: 250px;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.phg-guide-card h3, .phg-dev-card h3 {margin-top: 21px;}
.phg-tournament-card:hover, .phg-tournament-card:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-7px) scale(1.03);
}
.phg-tournament-card h3 {  margin-top: 21px;font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.phg-tournament-info {
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
}
.phg-cta {
  align-self: flex-start;
  font-size: var(--font-size-sm);
  width: 44%;
  text-align: center;
  margin: 21px auto 0 auto;
}

/* GUIDES AND TIPS */
.phg-testimonials-list {
  display: flex;
  justify-content: space-between;
}
.phg-testimonial {
  max-width: 300px;
}
#guides-tips-heading {text-align: center;}
.phg-community h2 {text-align: center;}
.phg-game-card p {text-align: center;} 
.phg-community p {margin: 0 auto;} 
#testimonials-heading {text-align: center;}
.phg-guides-list {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spatext-align: center;}
.phg-guides-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:ce-6);
  margin-top: var(--space-4);
}
@media (max-width: 900px) {
  .phg-guides-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .phg-guides-list { grid-template-columns: 1fr; }
}
.phg-guide-card {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: box-shadow var(--transition-fast);
}
.phg-guide-card:hover, .phg-guide-card:focus-within {
  box-shadow: var(--shadow-md);
}
.phg-guide-card h3 { font-size: var(--font-size-base); margin-bottom: var(--space-2); }
.phg-guide-card .phg-cta { margin-top: var(--space-2); }

/* COMMUNITY */
.phg-community {
  background: var(--color-primary-variant);
  color: #fff;
  text-align: center;
  border-radius: var(--radius-lg);
}
.phg-community-btn {
  margin-top: var(--space-2);
  background: #fff;
  color: var(--color-primary-variant);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.phg-community-btn:hover, .phg-community-btn:focus-visible {
  background: var(--gray-300);
  color: var(--color-primary);
}

/* DEVELOPER SPOTLIGHTS */
.phg-devs-list {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.phg-dev-card {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.phg-dev-card:hover, .phg-dev-card:focus-within {
  box-shadow: var(--shadow-md);
  transform: scale(1.035);
}
.phg-dev-avatar {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-2);
}
.phg-dev-link {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-primary-variant);
  text-decoration: underline;
}

/* TESTIMONIALS */
.phg-testimonials-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-3);
  justify-content: center;
}
.phg-testimonial {
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  font-size: var(--font-size-base);
  max-width: 340px;
  min-width: 210px;
  color: var(--gray-900);
  position: relative;
}
.phg-testimonial cite {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-align: right;
  margin-top: var(--space-2);
}

/* Responsive tweaks */
@media (max-width: 800px) {
  .phg-tournaments-list, .phg-devs-list, .phg-testimonials-list {
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
  }
  .phg-gamehub-hero { padding: var(--space-8) 0 var(--space-6) 0; }
  .phg-gamehub-desc { font-size: var(--font-size-base); }
}
@media (max-width: 480px) {
  .phg-game-card, .phg-tournament-card, .phg-guide-card, .phg-dev-card, .phg-testimonial {
    padding: var(--space-3);
  }
}