/* ============================= */
/* Forum Category – Compact Card */
/* ============================= */

.category-link {
  display: inline-block; /* prevents full-row stretching */
}

.category-block {
  background-color: #16171b;
  border: 1px dashed #2a2b31;
  border-radius: 16px;
}

.category-block:hover {
  border-color: #FFDF00;
}

.category-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  width: fit-content;
  padding: 16px 18px;

  border-radius: 16px;
}

/* Image */
.category-image-wrap {
  display: block;
}

.category-image {
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Text under image */
.category-meta {
  text-align: center;
}

.category-name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}

.category-count {
  font-size: 0.8rem;
  opacity: 0.7;
}


/* ============================= */
/* Game Type Sections            */
/* ============================= */

.forum-game-type-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}


/* ============================= */
/* Carousel / Horizontal Scroll  */
/* ============================= */

.forum-carousel {
  position: relative;

  /*
    This is your "green bar" safe area.
    Increase/decrease until the cards start/end exactly where you want.
  */
  --inner-gutter: 72px;
}

/* Scroll viewport */
.forum-category-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-behavior: smooth;

  /* Snap per card */
  scroll-snap-type: x mandatory;

  /*
    Critical: snap should respect the safe area on both sides
    (so the snapped card aligns AFTER the gutter).
  */
  scroll-padding-left: var(--inner-gutter);
  scroll-padding-right: var(--inner-gutter);

  /* Hide scrollbar UI but keep scrolling */
  scrollbar-width: none; /* Firefox */
}
.forum-category-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Track */
.forum-category-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 25px;
  align-items: stretch;
}

/*
  Critical: REAL scrollable buffer inside the scroll content,
  so cards never travel into the arrow zones (your green bars).
*/
.forum-category-row::before,
.forum-category-row::after {
  content: "";
  flex: 0 0 var(--inner-gutter);
}

/* Ensure cards don’t shrink + snap correctly */
.forum-category-row .category-card {
  flex: 0 0 auto;
  width: 190px;
  scroll-snap-align: start;
}


/* ============================= */
/* Carousel controls (arrows)    */
/* ============================= */

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid #2a2b31;
  background: #0f0f12;
  color: #FFDF00;

  display: grid;
  place-items: center;

  opacity: 0; /* hidden until hover (desktop) */
  transition: opacity 120ms ease;
}

.forum-carousel:hover .carousel-nav {
  opacity: 0.95;
}

.carousel-nav:hover {
  border-color: #FFDF00;
}

.carousel-nav[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

/* Arrow positioning: keep arrows where you like them visually */
.carousel-prev {
  left: 14px;
}
.carousel-next {
  right: 14px;
}


/* ============================= */
/* Dots (hidden)                 */
/* ============================= */

.carousel-dots {
  display: none;
}


/* ============================= */
/* Mobile tweaks                 */
/* ============================= */

@media (max-width: 576px) {
  /* show arrows on mobile without needing hover */
  .carousel-nav {
    opacity: 0.95;
  }

  /* slightly smaller safe area */
  .forum-carousel {
    --inner-gutter: 52px;
  }

  /* optional: pull arrows a bit inward on mobile */
  .carousel-prev {
    left: 6px;
  }
  .carousel-next {
    right: 6px;
  }
}