/* Puzzle Paths page-specific styles */

.hero-paths {
  margin-top: 2rem;
  text-align: center;
  background: linear-gradient(95deg, #f7dbf056 30%, #b7baf722 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-4) var(--space-6) var(--space-4);
}
.hero-paths-illustration {
  margin-inline: auto;
  max-width: 350px;
}
.hero-desc {
  font-size: 1.2rem;
  color: var(--color-gray-700);
}

.section-header {
  margin-bottom: var(--space-4);
}
.section-header h2 {
  margin-bottom: 0;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

.section-guide-play .guide-steps {
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-5);
}
.section-guide-play .game-steps {
  gap: var(--space-4);
  font-size: 1rem;
  color: var(--color-gray-900);
}
.section-guide-play .game-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-guide-play .game-demo-caption {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.section-choose-path .path-categories {
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-5);
}
.path-category-btn {
  border-radius: 32px;
  padding: 0.45em 1.4em;
  font-size: var(--font-size-base);
  opacity: 0.92;
  background: var(--color-gray-100);
  color: var(--color-primary);
  border: 2px solid var(--color-gray-300);
  font-weight: 600;
  box-shadow: none;
  margin: 2px 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.path-category-btn.active, .path-category-btn[aria-pressed=true] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  opacity: 1;
}
.path-category-btn:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}

.paths-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.path-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  gap: var(--space-4);
  padding: var(--space-5);
  min-height: 130px;
  transition: box-shadow 0.18s, transform 0.18s;
  position: relative;
}
.path-card:hover, .path-card:focus-within {
  box-shadow: var(--shadow-md);
  transform: scale(1.018);
  cursor: pointer;
}
.path-card img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: #f7dbf046;
}
.path-meta {
  flex: 1 1 0%;
}
.path-meta h3 {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
}
.path-difficulty {
  display: inline-block;
  border-radius: 20px;
  padding: 0.18em 0.9em;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
  margin-right: 0.6em;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}
.path-difficulty.beginner {
  background: var(--color-success);
  color: #fff;
}
.path-difficulty.medium {
  background: var(--color-warning);
  color: #fff;
}
.path-difficulty.hard {
  background: var(--color-danger);
  color: #fff;
}

.section-user-journey .journey-map {
  margin-top: var(--space-4);
}
.progression-map {
  width: 100%;
  max-width: 480px;
  margin-bottom: var(--space-4);
}
.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
}
.progress-steps .step {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: background 0.22s;
}
.progress-steps .step.completed {
  background: var(--color-success);
}
.progress-steps .step.active {
  background: var(--color-primary);
}
.progress-steps .step.upcoming {
  background: var(--color-gray-300);
  opacity: 0.45;
}
.progress-steps .step span {
  font-size: 1.33em;
  color: #fff;
  width: 100%;
  text-align: center;
  display: inline-block;
}
.badges {
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  margin-top: var(--space-2);
}
.badge {
  font-size: 2.2em;
  filter: drop-shadow(0 1px 3px #e7e3f7);
}
.badge-locked {
  filter: grayscale(1) opacity(0.5);
}
.journey-note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin-top: var(--space-1);
}

.section-community-challenges .community-challenges-list {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}
.challenge-card {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(98deg, #f7dbf0 54%, #f8e1be 180%);
  box-shadow: var(--shadow-sm);
  min-height: 115px;
}
.challenge-info h3 {
  margin-bottom: 0.25em;
  font-size: var(--font-size-base);
  color: var(--color-primary);
}
.challenge-info p {
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}
.join-btn {
  margin-left: auto;
  align-self: flex-end;
  background: var(--color-success);
  color: #fff;
  padding: 0.47em 1.4em;
  border-radius: 32px;
  box-shadow: none;
  font-weight: 700;
}
.join-btn:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}

.community-description {
  margin-top: var(--space-2);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}

.section-path-highlights .carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  max-width: 630px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  position: relative;
}
.carousel-track {
  display: flex;
  overflow: hidden;
  max-width: 300px;
  min-width: 180px;
}
.carousel-item {
  display: none;
  flex-direction: column;
  align-items: center;
  min-width: 220px;
  max-width: 260px;
  transition: opacity 0.3s;
  text-align: center;
}
.carousel-item.active {
  display: flex;
}
.carousel-caption {
  margin-top: var(--space-3);
  color: var(--color-gray-700);
}
.carousel-btn {
  font-size: 1.5rem;
  background: var(--color-gray-300);
  border: none;
  color: var(--color-primary);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  transition: background 0.17s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-btn:hover, .carousel-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

.section-rewards .rewards-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.reward-card {
  background: linear-gradient(110deg, #e7e3f7 18%, #b7baf755 145%);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 190px;
}
.reward-icon {
  font-size: 2.7rem;
  margin-bottom: var(--space-2);
}
.rewards-note {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

@media (max-width: 950px) {
  .section-guide-play .guide-steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
@media (max-width: 700px) {
  .hero-paths {padding: var(--space-6) var(--space-2) var(--space-5) var(--space-2);}
  .section-path-highlights .carousel { gap: var(--space-2); }
  .carousel-btn { width: 38px; height: 38px; font-size: 1.25rem; }
}
@media (max-width: 600px) {
  .paths-list, .community-challenges-list, .rewards-list {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }
}

/* A11y spacing improvement for anchors/buttons on touch devices */
@media (pointer: coarse) {
  .path-category-btn, .join-btn, .carousel-btn { min-height: 50px; }
}