.community-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 auto clamp(22px, 4vw, 42px);
}
.community-filter-bar .community-filters {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 5px;
}
.community-filter-bar .filter { flex: none; white-space: nowrap; }
.community-filter-bar .community-filters[hidden],
.community-arrow[hidden], .community-carousel-controls[hidden],
#community-feature[hidden], #community-feature-status:empty { display: none; }
.community-arrow {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ffffff44;
  background: #101b26;
  color: #f4faf9;
  font: 1.6rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.community-arrow:hover:not(:disabled) { border-color: #9cf3da; }
.community-arrow:disabled { opacity: .35; cursor: default; }
.has-carousel {
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #0f111a, #0b151b14 23%, #09131c22 72%, #0f111a),
    #0c1620 url('/media/community-atmosphere.webp') center / cover no-repeat;
}
.has-carousel .wrap { max-width: 1480px; }
.has-carousel .section-head { justify-content: center; text-align: center; }
.has-carousel .section-head h2 { font-size: clamp(2rem, 5vw, 4.8rem); }
.has-carousel .community-filter-bar { width: fit-content; max-width: 100%; }
.has-carousel .community-grid {
  display: block;
  position: relative;
  height: clamp(255px, 35vw, 510px);
  perspective: 1000px;
  touch-action: pan-y;
}
.has-carousel .community-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25%;
  transform: translate(-50%, -50%);
  border-color: #809bad80;
  border-radius: 14px;
  background: #101824;
  box-shadow: 0 16px 40px #03080cb0;
}
.has-carousel .community-thumb { aspect-ratio: 4 / 3; }
.has-carousel .community-copy {
  position: absolute;
  inset: auto 0 0;
  background: linear-gradient(transparent, #070d17eb);
  text-align: left;
  padding: 18px 12px 9px;
  pointer-events: none;
}
.has-carousel .community-copy p,
.has-carousel [data-carousel-slot="0"] .community-copy { display: none; }
.has-carousel [data-carousel-slot="-2"] { left: 0; transform: translate(-50%, -50%) rotateY(16deg) scale(.84); }
.has-carousel [data-carousel-slot="2"] { left: 100%; transform: translate(-50%, -50%) rotateY(-16deg) scale(.84); }
.has-carousel [data-carousel-slot="-1"] { left: 17%; z-index: 1; transform: translate(-50%, -50%) rotateY(13deg); }
.has-carousel [data-carousel-slot="1"] { left: 83%; z-index: 1; transform: translate(-50%, -50%) rotateY(-13deg); }
.has-carousel [data-carousel-slot="0"] {
  z-index: 2;
  width: 46%;
  border: 2px solid #9cf3da;
  box-shadow: 0 14px 60px #000a, 0 0 30px #45cdbb33;
}
.has-carousel [data-carousel-slot="0"] .community-thumb { aspect-ratio: 16 / 10; }
.has-carousel .hover-preview { object-fit: cover; object-position: center 28%; }
.community-thumb.is-previewing .community-play-icon { visibility: visible; }
.community-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 36px);
}
.community-selection { width: min(64vw, 570px); }
.community-selection h3 { margin: 0; font-size: clamp(1.2rem, 3vw, 2.6rem); overflow-wrap: anywhere; }
.community-selection p { margin: 4px 0 0; color: #c0ced4; }
#community-feature { margin-top: 14px; }
.has-carousel #community-explore { margin-top: 24px; }
@media (max-width: 690px) {
  .has-carousel .community-grid { height: clamp(205px, 55vw, 390px); }
  .has-carousel .community-card { width: 47%; border-radius: 10px; }
  .has-carousel [data-carousel-slot="-1"] { left: 0; }
  .has-carousel [data-carousel-slot="1"] { left: 100%; }
  .has-carousel [data-carousel-slot="-2"], .has-carousel [data-carousel-slot="2"] { display: none; }
  .has-carousel [data-carousel-slot="0"] { width: 77%; }
  .has-carousel .community-copy { display: none; }
}

.has-carousel .community-thumb img {
  filter: saturate(1.12) brightness(1.09);
}
.has-carousel .community-play-icon {
  z-index: 1;
  border-color: #ffffffa0;
  box-shadow: 0 3px 18px #0009;
}
.has-carousel .community-thumb:hover .community-play-icon,
.has-carousel .community-thumb:focus-visible .community-play-icon {
  color: #0e1921;
  background: #a5f3dc;
  border-color: #a5f3dc;
}
.community-recent {
  max-width: 1120px;
  margin: clamp(30px, 5vw, 58px) auto 0;
  text-align: left;
}
.community-recent > h3 {
  margin: 0 0 14px;
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
}
.community-recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.has-carousel .community-recent .community-card {
  position: relative;
  inset: auto;
  width: auto;
  transform: none;
  border-color: #8ab4be55;
}
.community-recent .community-card:hover,
.community-recent .community-card:focus-within {
  box-shadow: 0 8px 25px #03080cb0, 0 0 0 1px #9cf3da;
}
.community-recent .community-thumb { aspect-ratio: 16 / 10; }
.has-carousel .community-recent .community-copy {
  display: block;
  padding: 26px 12px 10px;
  background: linear-gradient(transparent, #080e18f2);
}
.has-carousel .community-recent .community-copy p {
  display: block;
  color: #d2d9e5;
}
@media (max-width: 690px) {
  .community-recent-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 75%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 3px 3px 8px;
  }
  .community-recent-grid .community-card { scroll-snap-align: start; }
}