/* CATEGORY PAGES STYLES - For category index pages (daily/, fandoms/, for-kids/) */
/* Common styles should be loaded via <link> tag in HTML: <link href="../assets/css/common.css" rel="stylesheet" /> */

/* Homepage: keep original single-column layout, prevent overflow */
.category-homepage main {
  max-width: 1200px;
  width: 100%;
  margin: 20px auto;
  padding: 0 20px;
  display: block;
  overflow-x: hidden;
}
.category-homepage #games,
.category-homepage section {
  max-width: 100%;
  overflow-x: hidden;
}
.category-homepage h1,
.category-homepage h2 {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Homepage: use responsive grid like original design (min respects viewport to avoid horizontal overflow) */
.category-homepage .game-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  padding: 15px;
}

/* Homepage: ensure quiz wrappers work correctly */
.category-homepage .quiz-wrapper {
  width: 100%;
  margin-bottom: 25px;
}

/* Game Card - Category pages specific */
.game-card {
  border: 3px solid var(--border-color, #E2E8F0);
}

/* Card Front - Category pages specific */
.card-front {
  /* border: 3px solid #282828; */
}

/* Daily category: use cover for background images */
.category-daily .card-front {
  background-size: cover;
}

/* Homepage: daily quizzes use cover, fandoms and for-kids use 200px */
.category-homepage .quiz-wrapper[data-category="daily"] .card-front {
  background-size: cover !important;
}

.category-homepage .quiz-wrapper[data-category="fandoms"] .card-front,
.category-homepage .quiz-wrapper[data-category="for-kids"] .card-front {
  background-size: 200px !important;
}

/* Card Back - Category pages specific */
.card-back {
  display: grid;
  /* width: calc(100% - 40px); */
}

/* Vibe Check Banner - Category pages specific */
.vibe_check_bunner {
  margin-top: 10px;
}

/* Vibe Check Homepage Banner - Between daily and fandom sections */
.vibe-check-homepage-banner {
  position: relative;
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  border: 3px solid var(--accent, #FF3E6D);
  border-radius: 16px;
}

.vibe-check-homepage-banner a {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 15px;
}

.vibe-check-homepage-banner img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.vibe-check-homepage-banner a:hover img {
  transform: scale(1.02);
}


.know_me-homepage-banner {
  position: relative;
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  border: 3px solid var(--accent, #FF3E6D);
  border-radius: 16px;
}

.know_me-homepage-banner a {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 15px;
}

.know_me-homepage-banner img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.know_me-homepage-banner a:hover img {
  transform: scale(1.02);
}