/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/clubs-page.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================
   CLUBS PAGE — ISO MAQUETTE
========================================================= */

* {
  box-sizing: border-box;
}

.clubs-page {
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 22px 34px;
  background: #03070a;
  color: #f5f5f5;
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}

/* =========================================================
   TOPBAR
========================================================= */

.clubs-topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin: 0 -22px;
  padding: 0 32px;
}

.clubs-search {
  position: relative;
  width: 360px;
  height: 42px;
  display: flex;
  align-items: center;
  background: #0b0f12;
  border: 1px solid #1c2226;
  border-radius: 8px;
}

.clubs-search>span {
  position: absolute;
  left: 13px;
  color: #7f878d;
  font-size: 19px;
}

.clubs-search input {
  width: 100%;
  height: 100%;
  padding: 0 52px 0 40px;
  background: transparent;
  border: 0;
  outline: 0;
  color: #eee;
  font-size: 13px;
}

.clubs-search input::placeholder {
  color: #767d82;
}

.clubs-search kbd {
  position: absolute;
  right: 8px;
  top: 7px;
  height: 27px;
  min-width: 35px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: #151a1e;
  color: #a8adb0;
  font-size: 11px;
}

.clubs-top-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}

.top-icon {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f5f5;
  font-size: 23px;
  cursor: pointer;
}

.notification span {
  position: absolute;
  top: -7px;
  right: -8px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d99d21;
  color: #050505;
  font-size: 9px;
  font-weight: 800;
}

.invite-btn {
  height: 42px;
  padding: 0 21px;
  border: 1px solid #a67616;
  border-radius: 7px;
  background: transparent;
  color: #e7ac2c;
  font-size: 13px;
  font-weight: 700;
}

.user-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #403b2b;
  background: #1b2022;
  overflow: hidden;
}

/* =========================================================
   HERO
========================================================= */

.clubs-hero {
  position: relative;
  height: 310px;
  display: grid;
  grid-template-columns: 390px 1fr;
  margin: 0 -22px;
  padding-left: 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 45%, rgba(203, 143, 27, .16), transparent 31%),
    linear-gradient(90deg, #04080b 0%, #05090b 42%, #080a08 100%);
  border: 0;
  border-radius: 0;
}

.clubs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #03070a 0%,
      rgba(3, 7, 10, .82) 27%,
      rgba(3, 7, 10, .15) 59%,
      rgba(3, 7, 10, .42) 100%);
}

.clubs-hero-left {
  position: relative;
  z-index: 3;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-label {
  margin: 0 0 16px;
  color: #dda927;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .045em;
}

.clubs-hero-left h1 {
  margin: 0 0 9px;
  font-size: 54px;
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.025em;
}

.clubs-hero-left p {
  margin: 0 0 22px;
  max-width: 340px;
  color: #c3c5c5;
  font-size: 15px;
  line-height: 1.45;
}

.hero-button {
  width: 158px;
  height: 43px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #b17d16;
  border-radius: 6px;
  background: rgba(8, 10, 9, .58);
  color: #e6ad2e;
  font-size: 13px;
  font-weight: 700;
}

.hero-button span {
  font-size: 19px;
  font-weight: 300;
}

.clubs-hero-visual {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: hidden;
}

.hero-world {
  position: absolute;
  inset: 0;
  opacity: .85;
  background:
    radial-gradient(circle at 57% 35%, rgba(237, 172, 47, .62) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 25%, rgba(237, 172, 47, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 52%, rgba(237, 172, 47, .58) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 63%, rgba(237, 172, 47, .5) 0 2px, transparent 3px),
    radial-gradient(ellipse at center, rgba(126, 85, 14, .18), transparent 57%);
}

.hero-world::before,
.hero-world::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 240px;
  left: 70px;
  top: 35px;
  border: 1px solid rgba(199, 140, 28, .15);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.hero-world::after {
  transform: rotate(14deg);
  opacity: .7;
}

.hero-crest {
  position: absolute;
  left: 46%;
  top: 50%;
  width: 174px;
  height: 198px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0, 93% 17%, 87% 72%, 50% 100%, 13% 72%, 7% 17%);
  border: 0;
  background:
    linear-gradient(135deg, #e4b546, #5e3a08 45%, #c18b24 70%, #251706);
  filter: drop-shadow(0 0 24px rgba(211, 153, 38, .42));
}

.hero-crest::before {
  content: "";
  position: absolute;
  inset: 8px;
  clip-path: inherit;
  background: linear-gradient(145deg, #17130c, #060707);
}

.crest-ball {
  position: relative;
  z-index: 2;
  font-size: 69px;
  filter: sepia(1) saturate(.8);
}

.crest-stars {
  position: absolute;
  z-index: 3;
  top: 27px;
  color: #e5b548;
  font-size: 18px;
  letter-spacing: 6px;
}

/* =========================================================
   STATISTICS
========================================================= */

.clubs-stats {
  height: 112px;
  margin: 0;
  padding: 0 21px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: center;
  background:
    linear-gradient(180deg, #0b0f11 0%, #090d0f 100%);
  border: 1px solid #151b1e;
  border-radius: 8px;
}

.club-stat-card {
  height: 72px;
  padding: 0 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid #202427;
  border-radius: 0;
  box-shadow: none;
}

.club-stat-card:last-child {
  border-right: 0;
}

.club-stat-card:hover {
  transform: none;
  border-color: #202427;
  box-shadow: none;
}

.club-stat-icon {
  flex: 0 0 auto;
  margin: 0;
  color: #e1a927;
  font-size: 31px;
  line-height: 1;
}

.club-stat-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.club-stat-card strong {
  margin: 0 0 4px;
  color: #f4f4f4;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

.club-stat-card span {
  margin: 0 0 7px;
  color: #c1c2c2;
  font-size: 12px;
  white-space: nowrap;
}

.club-stat-card small {
  color: #20c66b;
  font-size: 11px;
  line-height: 1;
}

/* =========================================================
   FILTER BAR
========================================================= */

.clubs-filters {
  min-height: 66px;
  margin: 18px 0;
  padding: 12px 15px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  background: #090d0f;
  border: 1px solid #141a1d;
  border-radius: 8px;
}

.clubs-filter-search-wrap {
  position: relative;
  width: 252px;
  flex: 0 0 252px;
}

.clubs-filter-search {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 38px 0 13px;
  border: 1px solid #23282b;
  border-radius: 6px;
  outline: none;
  background: #101416;
  color: white;
  font-size: 12px;
}

.clubs-filter-search-wrap>span {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #a9adaf;
  font-size: 18px;
}

.clubs-filters button {
  height: 40px;
  padding: 0 15px;
  border: 1px solid #23282b;
  border-radius: 6px;
  background: #101416;
  color: #dedede;
  font-size: 11px;
  white-space: nowrap;
}

.clubs-filters button:hover {
  background: #151a1d;
}

.clubs-filters .sort-button {
  margin-left: auto;
  min-width: 133px;
}

/* =========================================================
   MAIN GRID / SIDEBAR
========================================================= */

.clubs-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 20px;
  align-items: start;
}

.clubs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.clubs-sidebar {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =========================================================
   PAGINATION — placement ISO
========================================================= */

.clubs-pagination {
  height: 48px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.clubs-pagination button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #c5c6c6;
  font-size: 12px;
}

.clubs-pagination button.active {
  background: #dda72a;
  color: #090909;
  font-weight: 800;
}

.clubs-pagination span {
  padding: 0 4px;
  color: #777;
}

/* =========================================================
   RESPONSIVE — sans casser le desktop ISO
========================================================= */

@media (max-width: 1200px) {
  .clubs-content {
    grid-template-columns: 1fr;
  }

  .clubs-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clubs-stats {
    height: auto;
    grid-template-columns: repeat(3, 1fr);
  }

  .club-stat-card {
    border-right: 0;
  }
}

@media (max-width: 900px) {
  .clubs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clubs-hero {
    grid-template-columns: 1fr;
  }

  .clubs-hero-visual {
    position: absolute;
    inset: 0 0 0 40%;
  }

  .clubs-filters {
    flex-wrap: wrap;
  }

  .clubs-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   3/4 — CLUB CARDS ISO
========================================================= */

.club-card {
  position: relative;
  min-width: 0;
  height: 352px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, #0c1012 0%, #090d0f 100%);
  border: 1px solid #24292b;
  border-radius: 7px;
  transition: border-color .18s ease, transform .18s ease;
}

.club-card:hover {
  border-color: rgba(218, 164, 43, .58);
  transform: translateY(-1px);
}

.club-cover {
  position: relative;
  height: 108px;
  flex: 0 0 108px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .05) 0%,
      rgba(0, 0, 0, .12) 55%,
      #0b1011 100%),
    url("https://images.unsplash.com/photo-1522778119026-d647f0596c20?q=80&w=1200") center 54% / cover no-repeat;
}

.club-cover::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background:
    linear-gradient(to bottom,
      transparent,
      rgba(6, 10, 11, .62) 58%,
      #0b1011 100%);
  pointer-events: none;
}

.club-bookmark {
  position: absolute;
  z-index: 5;
  top: 9px;
  right: 9px;
  width: 27px;
  height: 31px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(5, 8, 9, .62);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  border-radius: 4px;
}

.club-logo {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 79px;
  height: 79px;
  transform: translate(-50%, -43%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.club-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .65));
}

.club-logo span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #d8ad4a, #7e5912 55%, #17130a);
  border: 2px solid #d4a531;
  color: #fff;
  font-size: 27px;
  font-weight: 900;
}

.club-body {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 11px 13px 10px;
  display: flex;
  flex-direction: column;
}

.verified {
  order: -1;
  margin: -2px 0 8px;
  color: #20d276;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}

.club-body h3 {
  margin: 0 0 7px;
  overflow: hidden;
  color: #f4f4f4;
  font-size: 17px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.club-country {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #c4c6c7;
  font-size: 11px;
  line-height: 1;
}

.club-country span {
  font-size: 14px;
}

.club-level {
  align-self: flex-start;
  margin-bottom: 9px;
  padding: 4px 7px;
  border-radius: 4px;
  background: #171b1d;
  color: #c9cbcc;
  font-size: 9px;
  line-height: 1;
}

.club-description {
  height: 33px;
  margin: 0 0 11px;
  overflow: hidden;
  color: #9fa4a6;
  font-size: 10px;
  line-height: 1.55;
}

.club-meta {
  margin-top: auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 19px;
  color: #ddd;
  font-size: 10px;
  line-height: 1;
}

.club-meta span:nth-child(2) {
  color: #d8d8d8;
}

.club-meta span::first-letter {
  color: #d9a527;
}

.club-profile-btn {
  width: 100%;
  height: 31px;
  padding: 0;
  border: 1px solid #9c711d;
  border-radius: 4px;
  background: transparent;
  color: #e5ae34;
  font-size: 10px;
  font-weight: 700;
  transition: background .15s ease;
}

.club-profile-btn:hover {
  background: rgba(210, 155, 36, .08);
}


/* =========================================================
   SIDEBAR COMMON
========================================================= */

.sidebar-card {
  padding: 17px 18px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #0c1012, #090d0f);
  border: 1px solid #252a2c;
  border-radius: 7px;
}

.sidebar-header {
  min-height: 22px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-header h3 {
  margin: 0;
  color: #e5aa29;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
}

.sidebar-header button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #dba32d;
  font-size: 9px;
  cursor: pointer;
}


/* =========================================================
   FEATURED CLUBS
========================================================= */

.featured-clubs {
  min-height: 267px;
}

.featured-club {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.featured-logo {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  font-size: 21px;
}

.featured-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-content strong {
  color: #f1f1f1;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.featured-content small {
  color: #999fa1;
  font-size: 9px;
  line-height: 1;
}

.verified-check {
  margin-left: 5px;
  color: #168cff;
  font-size: 8px;
}


/* =========================================================
   CLUBS AROUND THE WORLD
========================================================= */

.clubs-map {
  min-height: 215px;
}

.world-map {
  position: relative;
  height: 123px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.map-shape {
  transform: scaleX(1.65) scaleY(.82);
  opacity: .23;
  filter: grayscale(1) sepia(.7);
  font-size: 105px;
}

.map-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4a725;
  box-shadow:
    0 0 6px #e4a725,
    0 0 15px rgba(228, 167, 37, .65);
}

.map-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(225, 167, 41, .28);
  border-radius: 50%;
}

.d1 {
  left: 26%;
  top: 41%;
}

.d2 {
  left: 48%;
  top: 35%;
}

.d3 {
  left: 56%;
  top: 51%;
}

.d4 {
  left: 69%;
  top: 43%;
}

.d5 {
  left: 78%;
  top: 66%;
}

.map-stats {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #b8bbbc;
  font-size: 10px;
}

.map-stats strong {
  margin-right: 4px;
  color: #e5ab2c;
  font-size: 16px;
}


/* =========================================================
   RECENT ACTIVITY
========================================================= */

.clubs-activity {
  min-height: 264px;
}

.activity-item {
  min-height: 42px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.activity-logo {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111719;
  font-size: 17px;
}

.activity-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-copy strong {
  overflow: hidden;
  color: #e7e8e8;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.activity-copy small {
  overflow: hidden;
  color: #9da1a3;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.activity-item time {
  color: #696f72;
  font-size: 8px;
  white-space: nowrap;
}


/* =========================================================
   "IS YOUR CLUB NOT LISTED?" — ISO RIGHT CARD
========================================================= */

.club-join-card {
  position: relative;
  min-height: 235px;
  padding: 22px 19px;
  overflow: hidden;
  display: flex;
  border: 1px solid #594313;
  border-radius: 7px;
  background:
    radial-gradient(circle at 100% 45%,
      rgba(205, 146, 25, .15),
      transparent 43%),
    linear-gradient(135deg,
      #0d100e 0%,
      #10110d 55%,
      #171306 100%);
}

.club-join-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 43%;
  height: 100%;
  opacity: .22;
  background:
    linear-gradient(90deg, #0d100e, transparent),
    url("https://images.unsplash.com/photo-1522778119026-d647f0596c20?q=80&w=800") center / cover no-repeat;
}

.club-join-card>div:first-child {
  position: relative;
  z-index: 2;
}

.club-join-card h2 {
  margin: 0 0 13px;
  color: #e8ae2e;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 800;
}

.club-join-card p {
  margin: 0 0 20px;
  color: #b2b5b5;
  font-size: 10px;
  line-height: 1.55;
}

.club-join-card button {
  width: 153px;
  height: 39px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 5px;
  background:
    linear-gradient(180deg, #f0bc4c, #d59a20);
  box-shadow:
    0 5px 18px rgba(216, 156, 31, .17),
    inset 0 1px rgba(255, 255, 255, .3);
  color: #080808;
  font-size: 11px;
  font-weight: 800;
}

.club-join-card button span {
  font-size: 17px;
}

.join-decoration {
  position: absolute;
  z-index: 1;
  right: 15px;
  top: 35px;
  color: #d6a12c;
  font-size: 61px;
  opacity: .34;
}


/* =========================================================
   FORCE PROPORTIONS ISO DES 12 CARTES
========================================================= */

@media (min-width: 1201px) {
  .clubs-content>div:first-child {
    min-width: 0;
  }

  .clubs-grid {
    width: 100%;
  }

  .clubs-sidebar {
    width: 285px;
  }
}

/* =========================================================
   4/4 — CLUBS PAGE — FINAL ISO POLISH
========================================================= */

/* ---------- GLOBAL CONTENT ---------- */

.clubs-main {
  background:
    radial-gradient(circle at 72% 7%, rgba(180, 124, 18, .055), transparent 26%),
    #020607;
}

.clubs-content {
  gap: 18px;
}

.clubs-grid {
  gap: 12px;
}


/* =========================================================
   HERO — FINAL DETAILS
========================================================= */

.clubs-hero {
  position: relative;
  min-height: 282px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
}

.clubs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #030708 0%,
      rgba(3, 7, 8, .97) 24%,
      rgba(3, 7, 8, .58) 48%,
      rgba(3, 7, 8, .13) 74%,
      rgba(3, 7, 8, .32) 100%);
  z-index: 1;
}

.clubs-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70px;
  pointer-events: none;
  background: linear-gradient(to bottom,
      transparent,
      rgba(2, 6, 7, .94));
  z-index: 1;
}

.clubs-hero-content {
  position: relative;
  z-index: 2;
}

.clubs-eyebrow {
  color: #e4aa27;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .025em;
}

.clubs-hero h1 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: #f4f4f4;
  font-size: 48px;
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.025em;
}

.clubs-hero-description {
  max-width: 340px;
  color: #c1c4c5;
  font-size: 14px;
  line-height: 1.5;
}

.add-club-btn {
  height: 39px;
  margin-top: 19px;
  padding: 0 17px;
  gap: 20px;
  border: 1px solid #9d711a;
  border-radius: 5px;
  background: rgba(13, 14, 10, .54);
  color: #e7ac2a;
  font-size: 12px;
  font-weight: 700;
}

.add-club-btn:hover {
  border-color: #e0a92d;
  background: rgba(213, 155, 32, .08);
}

.add-club-btn span {
  font-size: 20px;
  font-weight: 300;
}


/* =========================================================
   STATS — FINITION
========================================================= */

.clubs-stats {
  min-height: 90px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 7px;
  background:
    linear-gradient(110deg,
      rgba(13, 17, 18, .98),
      rgba(8, 12, 13, .98));
}

.club-stat {
  min-height: 89px;
  position: relative;
  padding: 16px 14px;
}

.club-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 18px;
  width: 1px;
  background: rgba(255, 255, 255, .065);
}

.club-stat-icon {
  width: 38px;
  flex: 0 0 38px;
  color: #dda627;
  font-size: 28px;
}

.club-stat strong {
  color: #f1f2f2;
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
}

.club-stat-label {
  margin-top: 6px;
  color: #aaaeb0;
  font-size: 10px;
}

.club-stat-change {
  margin-top: 6px;
  color: #24c978;
  font-size: 9px;
}


/* =========================================================
   FILTER BAR
========================================================= */

.clubs-filters {
  min-height: 62px;
  padding: 12px 14px;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, .035);
  border-radius: 7px;
  background: #0a0e0f;
}

.clubs-search,
.club-filter-select,
.more-filters,
.clubs-sort {
  height: 38px;
  border: 1px solid #252a2c;
  border-radius: 5px;
  background:
    linear-gradient(180deg, #111516, #0d1112);
  color: #dedede;
  font-size: 10px;
}

.clubs-search {
  min-width: 190px;
}

.clubs-search input {
  color: #dedede;
  font-size: 10px;
}

.clubs-search input::placeholder {
  color: #a2a6a7;
}

.club-filter-select {
  padding: 0 13px;
}

.more-filters {
  padding: 0 14px;
}

.clubs-sort {
  margin-left: auto;
  padding: 0 14px;
}


/* =========================================================
   CLUB CARDS — FINAL ISO
========================================================= */

.club-card {
  height: 352px;
  border-color: #262b2d;
  border-radius: 7px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .015),
    0 2px 7px rgba(0, 0, 0, .12);
}

.club-card:hover {
  border-color: rgba(211, 156, 34, .58);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .02),
    0 5px 16px rgba(0, 0, 0, .22);
}

.club-cover {
  height: 105px;
  flex-basis: 105px;
}

.club-logo {
  width: 76px;
  height: 76px;
}

.club-body {
  padding: 10px 12px 9px;
}

.verified {
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 700;
}

.club-body h3 {
  margin-bottom: 7px;
  font-size: 16px;
}

.club-country {
  margin-bottom: 8px;
  font-size: 10px;
}

.club-level {
  margin-bottom: 9px;
  padding: 4px 6px;
  background: #171b1d;
  font-size: 8px;
}

.club-description {
  margin-bottom: 9px;
  color: #a3a6a7;
  font-size: 9px;
  line-height: 1.5;
}

.club-meta {
  margin-bottom: 9px;
  gap: 17px;
  font-size: 9px;
}

.club-profile-btn {
  height: 29px;
  border-color: #8e671a;
  color: #e4aa2b;
  font-size: 9px;
}


/* =========================================================
   SIDEBAR — DENSITÉ ISO
========================================================= */

.clubs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sidebar-card {
  padding: 16px 17px;
  border-color: #252a2c;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .018),
    0 3px 10px rgba(0, 0, 0, .13);
}

.sidebar-header {
  margin-bottom: 14px;
}

.sidebar-header h3 {
  color: #e4aa29;
  font-size: 12px;
}

.sidebar-header button {
  color: #dba42d;
  font-size: 8px;
}


/* FEATURED */

.featured-club {
  min-height: 42px;
}

.featured-logo {
  width: 30px;
  height: 30px;
}

.featured-content strong {
  font-size: 10px;
}

.featured-content small {
  color: #929799;
  font-size: 8px;
}


/* MAP */

.world-map {
  height: 118px;
}

.map-stats {
  padding-top: 4px;
}

.map-stats strong {
  color: #e3a82b;
}


/* ACTIVITY */

.activity-item {
  min-height: 41px;
}

.activity-item+.activity-item {
  margin-top: 1px;
}

.activity-logo {
  width: 26px;
  height: 26px;
}

.activity-copy strong {
  font-size: 9px;
}

.activity-copy small,
.activity-item time {
  font-size: 8px;
}


/* =========================================================
   JOIN CLUB CARD — GOLD PREMIUM
========================================================= */

.club-join-card {
  min-height: 218px;
  border-color: rgba(180, 128, 27, .47);
  background:
    radial-gradient(circle at 92% 52%,
      rgba(207, 148, 28, .15),
      transparent 42%),
    linear-gradient(130deg,
      #0b0f10 0%,
      #0c0f0d 58%,
      #171205 100%);
}

.club-join-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent 60%,
      rgba(218, 159, 32, .045));
}

.club-join-card::after {
  opacity: .18;
  filter: saturate(.75) sepia(.2);
}

.club-join-card h2 {
  max-width: 145px;
  color: #e8ae2e;
  font-size: 19px;
  letter-spacing: -.015em;
}

.club-join-card p {
  max-width: 145px;
  color: #b3b5b5;
  font-size: 9px;
}

.club-join-card button {
  width: 145px;
  height: 37px;
  font-size: 10px;
}


/* =========================================================
   PAGINATION
========================================================= */

.clubs-pagination {
  min-height: 40px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.clubs-pagination button {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #b8bcbd;
  font-size: 10px;
}

.clubs-pagination button:hover {
  background: #121718;
}

.clubs-pagination button.active {
  background: #dda72f;
  color: #090909;
  font-weight: 800;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.clubs-bottom-cta {
  min-height: 105px;
  margin-top: 17px;
  padding: 20px 29px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(174, 124, 25, .42);
  border-radius: 7px;
  background:
    radial-gradient(circle at 88% 50%,
      rgba(206, 147, 27, .09),
      transparent 31%),
    linear-gradient(100deg, #0b0f10, #111007);
}

.clubs-bottom-cta-icon {
  width: 72px;
  flex: 0 0 72px;
  color: #dda629;
  font-size: 48px;
}

.clubs-bottom-cta-copy {
  flex: 1;
}

.clubs-bottom-cta-copy h2 {
  margin: 0 0 7px;
  color: #f0f0f0;
  font-size: 17px;
  font-weight: 700;
}

.clubs-bottom-cta-copy p {
  margin: 0;
  max-width: 390px;
  color: #a8acad;
  font-size: 10px;
  line-height: 1.5;
}

.clubs-bottom-cta button {
  width: 166px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #efbc4c, #d59b22);
  box-shadow:
    0 6px 20px rgba(209, 150, 27, .16),
    inset 0 1px rgba(255, 255, 255, .3);
  color: #080808;
  font-size: 11px;
  font-weight: 800;
}


/* =========================================================
   FINAL DESKTOP PROPORTIONS
========================================================= */

@media (min-width: 1200px) {
  .clubs-content {
    grid-template-columns:
      minmax(0, 1fr) 285px;
  }

  .clubs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clubs-sidebar {
    width: 285px;
  }
}

/* =========================================================
   CLUBS SIDEBAR — FINAL PREMIUM
========================================================= */

.clubs-sidebar {
  gap: 13px;
}


/* =========================================================
   FEATURED CLUBS — REAL LOGOS
========================================================= */

.featured-clubs {
  padding: 16px 17px 13px;
}

.featured-clubs-list {
  display: flex;
  flex-direction: column;
}

.featured-club {
  position: relative;

  min-height: 47px;

  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;

  padding: 5px 0;

  border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.featured-club:last-child {
  border-bottom: 0;
}

.featured-logo {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 3px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .055),
      rgba(255, 255, 255, .01));
}

.featured-logo img {
  display: block;

  width: 29px;
  height: 29px;

  object-fit: contain;

  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

.featured-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 4px;
}

.featured-content strong {
  display: flex;
  align-items: center;
  gap: 5px;

  overflow: hidden;

  color: #eceeed;

  font-size: 10px;
  line-height: 1.1;
  font-weight: 650;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.featured-content small {
  color: #858b8d;

  font-size: 8px;
  line-height: 1;
}

.verified-check {
  width: 13px;
  height: 13px;

  flex: 0 0 13px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #1886e8;
  color: #fff;

  font-size: 8px;
  line-height: 1;
  font-weight: 900;
}

.featured-arrow {
  color: #555c5f;

  font-size: 18px;
  line-height: 1;

  transition:
    color .15s ease,
    transform .15s ease;
}

.featured-club:hover .featured-arrow {
  color: #dba52c;
  transform: translateX(2px);
}


/* =========================================================
   REAL WORLD MAP
========================================================= */

.clubs-map {
  padding: 16px 17px 13px;
}

.clubs-map .sidebar-header {
  margin-bottom: 6px;
}

.world-map {
  position: relative;

  width: 100%;
  height: 145px;

  overflow: hidden;

  border-radius: 4px;

  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(187, 130, 20, .075),
      transparent 65%);
}


/* actual world silhouette */

.world-map-svg {
  position: absolute;

  top: 8px;
  left: 2%;

  width: 96%;
  height: 125px;

  overflow: visible;
}

.world-land {
  fill: rgba(124, 128, 126, .19);

  stroke: rgba(173, 175, 170, .14);
  stroke-width: 2;
}

.world-lines {
  fill: none;

  stroke: rgba(211, 154, 34, .17);
  stroke-width: 1.4;

  stroke-dasharray: 5 5;
}


/* =========================================================
   MAP MARKERS
========================================================= */

.map-marker {
  position: absolute;

  width: 14px;
  height: 14px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(230, 170, 42, .55);
  border-radius: 50%;

  background: rgba(222, 161, 35, .11);

  box-shadow:
    0 0 9px rgba(224, 165, 39, .14);
}

.map-marker i {
  width: 5px;
  height: 5px;

  display: block;

  border-radius: 50%;

  background: #e6aa29;

  box-shadow:
    0 0 6px #e6aa29,
    0 0 12px rgba(230, 170, 41, .65);
}

.marker-1 {
  left: 17%;
  top: 43%;
}

.marker-2 {
  left: 31%;
  top: 63%;
}

.marker-3 {
  left: 49%;
  top: 37%;
}

.marker-4 {
  left: 53%;
  top: 61%;
}

.marker-5 {
  left: 70%;
  top: 41%;
}

.marker-6 {
  left: 84%;
  top: 71%;
}


/* subtle map grid */

.world-map::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: .22;

  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255, 255, 255, .025) 1px,
      transparent 1px);

  background-size: 25px 25px;

  pointer-events: none;
}


/* fade map borders */

.world-map::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(90deg,
      #0b0f10 0%,
      transparent 13%,
      transparent 87%,
      #0b0f10 100%),
    linear-gradient(180deg,
      #0b0f10 0%,
      transparent 16%,
      transparent 84%,
      #0b0f10 100%);
}


/* markers must stay over fade */

.map-marker {
  z-index: 3;
}


/* =========================================================
   MAP STATS
========================================================= */

.map-stats {
  min-height: 42px;

  margin-top: 1px;
  padding-top: 10px;

  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;

  border-top: 1px solid rgba(255, 255, 255, .045);
}

.map-stats>div:not(.map-stat-divider) {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 4px;
}

.map-stats strong {
  margin: 0;

  color: #e2a82b;

  font-size: 15px;
  line-height: 1;
  font-weight: 750;
}

.map-stats span {
  color: #898e90;

  font-size: 8px;
  line-height: 1;
}

.map-stat-divider {
  width: 1px;
  height: 28px;

  background: rgba(255, 255, 255, .07);
}


/* =========================================================
   SIDEBAR GOLD DEPTH
========================================================= */

.featured-clubs,
.clubs-map,
.clubs-activity {
  background:
    radial-gradient(circle at 92% 4%,
      rgba(206, 148, 30, .045),
      transparent 36%),
    linear-gradient(145deg,
      #0c1012,
      #090d0f);

  border-color: rgba(255, 255, 255, .105);
}

.featured-clubs:hover,
.clubs-map:hover,
.clubs-activity:hover {
  border-color: rgba(211, 158, 39, .24);
}


/* =========================================================
   SIDEBAR TITLES — MICRO POLISH
========================================================= */

.clubs-sidebar .sidebar-header h3 {
  position: relative;

  padding-left: 10px;

  color: #e5aa2b;

  font-size: 12px;
  font-weight: 750;
}

.clubs-sidebar .sidebar-header h3::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 3px;
  height: 13px;

  transform: translateY(-50%);

  border-radius: 4px;

  background: #dfa62a;

  box-shadow:
    0 0 7px rgba(223, 166, 42, .28);
}

.activity-logo {
  width: 30px;
  height: 30px;
  padding: 3px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
}

.activity-logo img {
  width: 25px;
  height: 25px;

  display: block;
  object-fit: contain;

  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

.world-map {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
  border-radius: 4px;
  background: #0b0f10;
}

.world-map-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: .72;
  filter:
    brightness(.72) contrast(1.12) saturate(.85);

  -webkit-mask-image:
    linear-gradient(90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);

  mask-image:
    linear-gradient(90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);
}

.world-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(180deg,
      #0b0f10 0%,
      transparent 18%,
      transparent 82%,
      #0b0f10 100%);
}

.map-marker {
  z-index: 3;
}

.world-map {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.world-map-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  opacity: 1;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.world-map::before,
.world-map::after {
  display: none !important;
}

.map-marker {
  z-index: 3;
}


/* SIDEBAR LAYOUT */

.clubs-shell {
  min-height: 100vh;
  display: flex;
  background: #03070a;
}

.clubs-main {
  flex: 1;
  min-width: 0;
  margin-left: 220px;
}

.clubs-main .clubs-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width: 1050px) {
  .clubs-main {
    margin-left: 78px;
  }
}

@media (max-width: 700px) {
  .clubs-main {
    margin-left: 0;
  }
}

/* =========================================================
   ARENALL CLUBS — PREMIUM CLEANUP OVERRIDES
   Global visual language
   CONCATENATE AT END OF clubs-page.css
   ========================================================= */

.clubs-page {
  --clubs-bg: #030405;
  --clubs-surface: #08090b;
  --clubs-surface-2: #0c0d10;
  --clubs-border: rgba(255, 255, 255, .075);
  --clubs-border-strong: rgba(255, 255, 255, .12);
  --clubs-text: #f5f5f5;
  --clubs-muted: #a3a7af;
  --clubs-soft: #747982;
  --clubs-accent: #8b5cf6;
  --clubs-accent-light: #b9a4ff;
  --clubs-accent-soft: rgba(139, 92, 246, .12);

  max-width: none;
  background: var(--clubs-bg);
  color: var(--clubs-text);
}


/* =========================================================
     GLOBAL
     ========================================================= */

.clubs-main {
  background:
    radial-gradient(circle at 70% 4%,
      rgba(139, 92, 246, .045),
      transparent 25%),
    #030405;
}

.clubs-page button,
.clubs-page input {
  font-family: inherit;
}

.clubs-page button {
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


/* =========================================================
     TOPBAR
     ========================================================= */

.clubs-topbar {
  height: 76px;

  border-bottom: 1px solid var(--clubs-border);

  background: rgba(3, 4, 5, .94);
}

.clubs-search {
  width: 390px;
  height: 44px;

  border: 1px solid var(--clubs-border);
  border-radius: 10px;

  background: rgba(255, 255, 255, .035);
}

.clubs-search>span {
  color: #8c9199;
}

.clubs-search input {
  color: #f2f2f3;
  font-size: 13px;
}

.clubs-search input::placeholder {
  color: #777c84;
}

.clubs-search kbd {
  top: 8px;

  background: rgba(255, 255, 255, .065);
  color: #aaaeb5;

  font-size: 10px;
}

.clubs-top-actions {
  gap: 12px;
}

.top-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 1px solid transparent;
  border-radius: 10px;

  color: #dfe1e4;
  font-size: 18px;
}

.top-icon:hover {
  border-color: var(--clubs-border);
  background: rgba(255, 255, 255, .035);
}

.notification span {
  background: var(--clubs-accent);
  color: #fff;

  border: 2px solid #040506;
}

.invite-btn {
  height: 42px;
  padding: 0 17px;

  border: 1px solid rgba(139, 92, 246, .24);
  border-radius: 9px;

  background: rgba(139, 92, 246, .09);
  color: #c4b2fb;

  font-size: 12px;
  font-weight: 750;
}

.invite-btn:hover {
  background: rgba(139, 92, 246, .15);
  border-color: rgba(139, 92, 246, .35);
}

.user-avatar {
  width: 40px;
  height: 40px;

  border: 1px solid var(--clubs-border-strong);
}


/* =========================================================
     HERO — CLEAN / EDITORIAL / PREMIUM
     ========================================================= */

.clubs-hero {
  height: 350px;
  min-height: 350px;

  grid-template-columns: 430px 1fr;

  padding-left: 46px;

  border-bottom: 1px solid var(--clubs-border);

  background:
    radial-gradient(circle at 73% 45%,
      rgba(139, 92, 246, .11),
      transparent 29%),
    linear-gradient(90deg,
      #030405 0%,
      #050608 46%,
      #07070a 100%);
}

.clubs-hero::before {
  background:
    linear-gradient(90deg,
      #030405 0%,
      rgba(3, 4, 5, .96) 25%,
      rgba(3, 4, 5, .58) 48%,
      rgba(3, 4, 5, .12) 74%,
      rgba(3, 4, 5, .32) 100%);
}

.clubs-hero::after {
  height: 90px;

  background:
    linear-gradient(to bottom,
      transparent,
      rgba(3, 4, 5, .95));
}

.clubs-hero-left {
  z-index: 4;
}

.hero-label,
.clubs-eyebrow {
  margin-bottom: 17px;

  color: var(--clubs-accent-light);

  font-size: 12px;
  line-height: 1;
  font-weight: 850;

  letter-spacing: .10em;
  text-transform: uppercase;
}

.clubs-hero-left h1,
.clubs-hero h1 {
  margin: 0 0 13px;

  color: #fff;

  font-size: clamp(58px, 5vw, 76px);
  line-height: .88;
  font-weight: 950;
  letter-spacing: -.045em;
}

.clubs-hero-left p,
.clubs-hero-description {
  max-width: 390px;
  margin-bottom: 23px;

  color: #b9bdc4;

  font-size: 16px;
  line-height: 1.55;
}

.hero-button,
.add-club-btn {
  width: auto;
  min-width: 160px;
  height: 46px;

  padding: 0 18px;

  border: 0;
  border-radius: 9px;

  background: var(--clubs-accent);
  color: #fff;

  font-size: 12px;
  font-weight: 800;

  box-shadow:
    0 12px 32px rgba(124, 58, 237, .16);
}

.hero-button:hover,
.add-club-btn:hover {
  border: 0;
  background: #9566f7;
  transform: translateY(-1px);
}


/* =========================================================
     HERO VISUAL
     Remove fake gold overload
     ========================================================= */

.hero-world {
  opacity: .55;

  background:
    radial-gradient(circle at 57% 35%,
      rgba(183, 163, 244, .65) 0 2px,
      transparent 3px),
    radial-gradient(circle at 70% 25%,
      rgba(183, 163, 244, .58) 0 2px,
      transparent 3px),
    radial-gradient(circle at 80% 52%,
      rgba(183, 163, 244, .52) 0 2px,
      transparent 3px),
    radial-gradient(circle at 48% 63%,
      rgba(183, 163, 244, .45) 0 2px,
      transparent 3px),
    radial-gradient(ellipse at center,
      rgba(139, 92, 246, .10),
      transparent 57%);
}

.hero-world::before,
.hero-world::after {
  border-color: rgba(167, 139, 250, .10);
}

.hero-crest {
  width: 180px;
  height: 204px;

  background:
    linear-gradient(145deg,
      #b7a2f4,
      #594286 44%,
      #8b5cf6 70%,
      #221b31);

  filter:
    drop-shadow(0 18px 40px rgba(0, 0, 0, .4));
}

.hero-crest::before {
  background:
    linear-gradient(145deg,
      #15131b,
      #060607);
}

.crest-stars {
  color: #b9a5f3;
}

.crest-ball {
  filter: grayscale(.25) saturate(.65);
}


/* =========================================================
     STATS — remove dashboard feeling
     ========================================================= */

.clubs-stats {
  min-height: 116px;
  height: auto;

  margin-top: 20px;
  padding: 0 14px;

  border: 1px solid var(--clubs-border);
  border-radius: 12px;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .035),
      rgba(255, 255, 255, .012));
}

.club-stat-card,
.club-stat {
  min-height: 78px;
  height: auto;

  padding: 0 20px;
}

.club-stat-card {
  border-right: 1px solid var(--clubs-border);
}

.club-stat-card:last-child {
  border-right: 0;
}

.club-stat-icon {
  width: auto;

  color: var(--clubs-accent-light);

  font-size: 27px;
}

.club-stat-card strong,
.club-stat strong {
  margin-bottom: 5px;

  color: #f6f6f7;

  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.club-stat-card span,
.club-stat-label {
  margin-bottom: 5px;

  color: #b3b7be;

  font-size: 12px;
  font-weight: 650;
}

.club-stat-card small,
.club-stat-change {
  color: #737981;

  font-size: 10px;
}


/* =========================================================
     FILTER BAR — cleaner, less boxy
     ========================================================= */

.clubs-filters {
  min-height: 68px;

  margin: 20px 0;
  padding: 12px 14px;

  gap: 10px;

  border: 1px solid var(--clubs-border);
  border-radius: 11px;

  background: rgba(255, 255, 255, .018);
}

.clubs-filter-search-wrap {
  width: 270px;
  flex-basis: 270px;
}

.clubs-filter-search,
.clubs-filters button,
.club-filter-select,
.more-filters,
.clubs-sort {
  height: 42px;

  border: 1px solid var(--clubs-border);
  border-radius: 8px;

  background: rgba(255, 255, 255, .03);
  color: #d7d9dd;

  font-size: 12px;
}

.clubs-filter-search {
  padding-left: 14px;
}

.clubs-filter-search::placeholder {
  color: #777c84;
}

.clubs-filter-search-wrap>span {
  color: #8d929a;
}

.clubs-filters button {
  padding: 0 15px;
}

.clubs-filters button:hover {
  border-color: var(--clubs-border-strong);
  background: rgba(255, 255, 255, .055);
}


/* =========================================================
     MAIN
     ========================================================= */

.clubs-content {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}

.clubs-grid {
  gap: 16px;
}


/* =========================================================
     CLUB CARDS
     Biggest cleanup
     ========================================================= */

.club-card {
  height: 390px;

  border: 1px solid var(--clubs-border);
  border-radius: 13px;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .037),
      rgba(255, 255, 255, .012));

  box-shadow: none;

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.club-card:hover {
  transform: translateY(-4px);

  border-color: rgba(139, 92, 246, .23);

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .052),
      rgba(255, 255, 255, .016));

  box-shadow:
    0 18px 45px rgba(0, 0, 0, .22);
}

.club-cover {
  height: 128px;
  flex-basis: 128px;

  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .03),
      rgba(0, 0, 0, .14) 55%,
      #0a0b0d 100%),
    url("https://images.unsplash.com/photo-1522778119026-d647f0596c20?q=80&w=1200") center 54% / cover no-repeat;

  filter: saturate(.76);
}

.club-cover::after {
  background:
    linear-gradient(to bottom,
      transparent,
      rgba(7, 8, 10, .54) 55%,
      #0a0b0d 100%);
}


/* actions */

.club-card-actions {
  z-index: 6;
}

.club-bookmark,
.club-card .arenall-follow-btn {
  border: 1px solid rgba(255, 255, 255, .11);

  background: rgba(4, 5, 7, .55);
  color: #f4f4f5;

  backdrop-filter: blur(10px);
}

.club-bookmark:hover,
.club-card .arenall-follow-btn:hover {
  border-color: rgba(139, 92, 246, .25);

  background: rgba(139, 92, 246, .13);
  color: #cbbcff;
}


/* logo */

.club-logo {
  width: 86px;
  height: 86px;
}

.club-logo img {
  filter:
    drop-shadow(0 8px 15px rgba(0, 0, 0, .55));
}

.club-logo span {
  width: 70px;
  height: 70px;

  border: 1px solid rgba(139, 92, 246, .28);

  background:
    radial-gradient(circle at 35% 30%,
      #a990eb,
      #5c4489 55%,
      #17131f);

  color: #fff;

  font-size: 28px;
}


/* body */

.club-body {
  padding: 15px 16px 14px;
}

.verified {
  margin: 0 0 9px;

  color: #5dd99a;

  font-size: 10px;
  font-weight: 750;
}

.club-body h3 {
  margin-bottom: 8px;

  color: #f7f7f8;

  font-size: 19px;
  line-height: 1.15;
  font-weight: 800;

  letter-spacing: -.02em;
}

.club-country {
  margin-bottom: 10px;

  color: #b3b7be;

  font-size: 12px;
}

.club-country span {
  font-size: 15px;
}

.club-level {
  margin-bottom: 11px;
  padding: 5px 8px;

  border: 1px solid var(--clubs-border);
  border-radius: 6px;

  background: rgba(255, 255, 255, .035);
  color: #bbbfc6;

  font-size: 10px;
  font-weight: 650;
}

.club-description {
  height: auto;
  min-height: 42px;

  margin-bottom: 14px;

  color: #969ba4;

  font-size: 12px;
  line-height: 1.55;
}

.club-meta {
  margin-bottom: 13px;

  gap: 18px;

  color: #a4a9b1;

  font-size: 11px;
}

.club-meta span::first-letter {
  color: var(--clubs-accent-light);
}


/* profile CTA */

.club-profile-btn {
  height: 40px;

  border: 1px solid var(--clubs-border-strong);
  border-radius: 8px;

  background: rgba(255, 255, 255, .025);
  color: #e1e2e5;

  font-size: 11px;
  font-weight: 750;
}

.club-profile-btn:hover {
  border-color: rgba(139, 92, 246, .25);

  background: rgba(139, 92, 246, .10);
  color: #cbb9ff;
}


/* =========================================================
     SIDEBAR — much quieter
     ========================================================= */

.clubs-sidebar {
  gap: 16px;
}

.sidebar-card {
  padding: 18px;

  border: 1px solid var(--clubs-border);
  border-radius: 12px;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .034),
      rgba(255, 255, 255, .012));
}

.sidebar-header {
  min-height: 27px;
  margin-bottom: 16px;
}

.sidebar-header h3 {
  color: #f0f1f2;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.sidebar-header button {
  color: #999ea6;

  font-size: 10px;
  font-weight: 650;
}

.sidebar-header button:hover {
  color: #c7b5ff;
}


/* =========================================================
     FEATURED CLUBS
     ========================================================= */

.featured-club {
  min-height: 52px;
  gap: 12px;

  border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.featured-club:last-child {
  border-bottom: 0;
}

.featured-logo {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.featured-logo img {
  max-width: 100%;
  max-height: 100%;
}

.featured-content {
  gap: 5px;
}

.featured-content strong {
  color: #f0f1f2;

  font-size: 12px;
  font-weight: 700;
}

.featured-content small {
  color: #898e96;

  font-size: 10px;
}

.verified-check {
  color: #8b9dff;

  font-size: 9px;
}


/* sidebar follow */

.featured-club .arenall-follow-btn {
  margin-left: auto;

  border: 1px solid var(--clubs-border);
  border-radius: 7px;

  background: rgba(255, 255, 255, .025);
  color: #aaaeb5;

  font-size: 10px;
}

.featured-club .arenall-follow-btn:hover {
  background: var(--clubs-accent-soft);
  color: #c9b8ff;
}


/* =========================================================
     MAP
     ========================================================= */

.clubs-map {
  min-height: 235px;
}

.world-map {
  height: 140px;
}

.world-map-image {
  opacity: .35;

  filter:
    grayscale(1) contrast(1.05);
}

.map-marker i,
.map-dot {
  background: #a78bfa !important;

  box-shadow:
    0 0 7px rgba(167, 139, 250, .55),
    0 0 16px rgba(139, 92, 246, .22) !important;
}

.map-dot::after {
  border-color: rgba(167, 139, 250, .25);
}

.map-stats {
  color: #9da2aa;

  font-size: 10px;
}

.map-stats strong {
  color: #f2f2f3;

  font-size: 18px;
}

.map-stats span {
  color: #888d95;
}


/* =========================================================
     ACTIVITY
     ========================================================= */

.clubs-activity {
  min-height: 280px;
}

.activity-item {
  min-height: 48px;
}

.activity-logo {
  width: 31px;
  height: 31px;

  background: rgba(255, 255, 255, .035);
}

.activity-copy {
  gap: 5px;
}

.activity-copy strong {
  color: #e8e9eb;

  font-size: 11px;
  font-weight: 650;
}

.activity-copy small {
  color: #898e96;

  font-size: 9px;
}

.activity-item time {
  color: #6f747c;

  font-size: 9px;
}


/* =========================================================
     "IS YOUR CLUB NOT LISTED?"
     ========================================================= */

.club-join-card {
  min-height: 255px;
  padding: 26px 22px;

  border: 1px solid rgba(139, 92, 246, .16);
  border-radius: 12px;

  background:
    radial-gradient(circle at 100% 45%,
      rgba(139, 92, 246, .12),
      transparent 45%),
    linear-gradient(135deg,
      #0b0c0f,
      #090a0c);
}

.club-join-card::after {
  opacity: .15;

  filter:
    grayscale(.6) saturate(.55);
}

.club-join-card h2 {
  margin-bottom: 13px;

  color: #f5f5f6;

  font-size: 23px;
  line-height: 1.08;
  font-weight: 850;

  letter-spacing: -.025em;
}

.club-join-card p {
  margin-bottom: 21px;

  color: #9da2aa;

  font-size: 11px;
  line-height: 1.6;
}

.club-join-card button {
  width: 155px;
  height: 42px;

  border-radius: 8px;

  background: var(--clubs-accent);
  color: #fff;

  box-shadow: none;

  font-size: 11px;
  font-weight: 800;
}

.club-join-card button:hover {
  background: #9566f7;
  transform: translateY(-1px);
}

.join-decoration {
  color: #9d82e7;

  opacity: .18;
}


/* =========================================================
     PAGINATION
     ========================================================= */

.clubs-pagination {
  height: 60px;
  margin-top: 14px;

  gap: 6px;
}

.clubs-pagination button {
  width: 34px;
  height: 34px;

  border-radius: 8px;

  color: #969ba3;

  font-size: 11px;
}

.clubs-pagination button:hover {
  background: rgba(255, 255, 255, .045);
  color: #fff;
}

.clubs-pagination button.active {
  background: var(--clubs-accent);
  color: #fff;

  font-weight: 800;
}

.clubs-pagination span {
  color: #656a72;
}


/* =========================================================
     FINAL KILL SWITCH
     Suppress remaining old gold visual language
     ========================================================= */

.clubs-page .hero-label,
.clubs-page .clubs-eyebrow,
.clubs-page .club-stat-icon,
.clubs-page .crest-stars {
  color: var(--clubs-accent-light);
}

.clubs-page .sidebar-header h3 {
  color: #f1f1f2;
}


/* =========================================================
     RESPONSIVE
     ========================================================= */

@media (max-width: 1200px) {

  .clubs-content {
    grid-template-columns: 1fr;
  }

  .clubs-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clubs-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .club-stat-card {
    border-right: 0;
  }
}


@media (max-width: 900px) {

  .clubs-page {
    padding-left: 14px;
    padding-right: 14px;
  }

  .clubs-hero {
    height: 380px;
    min-height: 380px;

    grid-template-columns: 1fr;

    padding-left: 28px;
  }

  .clubs-hero-visual {
    position: absolute;
    inset: 0 0 0 35%;

    opacity: .55;
  }

  .clubs-hero-left h1 {
    font-size: 58px;
  }

  .clubs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clubs-filters {
    flex-wrap: wrap;
  }

  .clubs-filter-search-wrap {
    width: 100%;
    flex-basis: 100%;
  }

  .clubs-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.club-request-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
}

.club-request-form label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #ddd;
  font-size: 13px;
  font-weight: 700;
}

.club-request-form input,
.club-request-form select {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid #272d31;
  border-radius: 9px;
  outline: none;
  background: #111619;
  color: #fff;
}

.club-request-info {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(218, 164, 43, .2);
  border-radius: 9px;
  background: rgba(218, 164, 43, .05);
}

.club-request-info strong {
  color: #e5ad32;
}

.club-request-info span {
  color: #92999d;
  font-size: 12px;
}

.club-request-submit {
  height: 54px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #efbb49, #d79b20);
  color: #080808;
  font-weight: 800;
  cursor: pointer;
}

.club-request-success {
  margin: 0 28px 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid rgba(32, 198, 107, .3);
  border-radius: 9px;
  background: rgba(32, 198, 107, .08);
  color: #20c66b;
  font-size: 13px;
  font-weight: 700;
}

.club-request-success span {
  color: #a7ada9;
  font-size: 11px;
  font-weight: 400;
}