/* ClutchHub v154 — layouts rebuilt from the supplied 02–10 page references. */
:root {
  --ch154-orange: #ff4b16;
  --ch154-orange-dark: #eb3e08;
  --ch154-ink: #0d1b36;
  --ch154-copy: #536783;
  --ch154-line: #cfddeb;
  --ch154-line-soft: #e5edf5;
  --ch154-green: #0eaa5a;
  --ch154-shadow: 0 8px 22px rgb(27 53 84 / 7%);
}

body {
  background:
    linear-gradient(90deg, rgb(199 219 238 / 14%) 1px, transparent 1px),
    linear-gradient(rgb(199 219 238 / 12%) 1px, transparent 1px),
    #fff !important;
  background-size: 120px 120px, 120px 120px, auto !important;
}

:is(
  .lfg-match-page,.games-v2,.teams-page,.clips-page,.chat-page,
  .news-page,.profile-command-page,.premium-page,.management-console
) {
  width: min(1650px, calc(100% - 28px)) !important;
  max-width: 1650px !important;
  margin: 14px auto 42px !important;
  color: var(--ch154-ink);
}

:is(
  .lfg-match-hero,.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,
  .page-hero-chat,.news-radar-header,.profile-command-hero,.premium-hero,
  .management-console-hero
) {
  min-height: 124px !important;
  max-height: none !important;
  padding: 22px 36px !important;
  border: 1px solid var(--ch154-line) !important;
  border-radius: 0 !important;
  clip-path: polygon(
    18px 0, 37% 0, calc(37% + 14px) 12px, calc(100% - 20px) 12px,
    100% 32px, 100% calc(100% - 19px), calc(100% - 19px) 100%,
    18px 100%, 0 calc(100% - 18px), 0 18px
  ) !important;
  background:
    linear-gradient(90deg, #fff 0 35%, rgb(255 255 255 / 78%) 56%, rgb(255 255 255 / 18%) 82%),
    url("/assets/clutchhub-home-v3-hero-v2.webp") 66% 46% / cover no-repeat !important;
  box-shadow: var(--ch154-shadow) !important;
  overflow: hidden !important;
  position: relative !important;
}

:is(
  .lfg-match-hero,.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,
  .page-hero-chat,.news-radar-header,.profile-command-hero,.premium-hero,
  .management-console-hero
)::after {
  content: "";
  position: absolute;
  inset: auto 18px 0 auto;
  width: 80px;
  height: 16px;
  border-right: 3px solid var(--ch154-orange);
  border-bottom: 3px solid var(--ch154-orange);
  pointer-events: none;
}

:is(
  .lfg-match-hero,.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,
  .page-hero-chat,.news-radar-header,.profile-command-hero,.premium-hero,
  .management-console-hero
) h1 {
  color: var(--ch154-ink) !important;
  margin: 0 !important;
  font-size: clamp(29px, 3vw, 43px) !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

:is(
  .lfg-match-hero,.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,
  .page-hero-chat,.news-radar-header,.profile-command-hero,.premium-hero,
  .management-console-hero
) p {
  color: var(--ch154-copy) !important;
  margin: 10px 0 0 !important;
  font-size: 11px !important;
}

:is(
  .surface-panel,.games-v2-library,.games-v2-toolbar,.teams-d1-filters,
  .teams-d1-main,.teams-d1-new,.clips-d2-player,.clips-d2-comments,
  .clips-d2-next,.clips-d2-details,.community-chat-shell,.news-radar-sidebar,
  .news-radar-feed,.news-radar-aside,.profile-command-card,.profile-inbox,
  .premium-command-center,.premium-theme-center,.management-tabs,.management-card
) {
  border-color: var(--ch154-line) !important;
  box-shadow: var(--ch154-shadow) !important;
}

:is(
  .lfg-layout,.games-v2-toolbar,.games-v2-library,.teams-d1-filters,
  .teams-d1-main,.clips-d2-player,.clips-d2-comments,.clips-d2-next,
  .community-chat-shell,.news-radar-sidebar,.news-radar-feed,.news-radar-aside,
  .profile-command-card,.profile-inbox,.premium-command-center,.premium-theme-center,
  .management-tabs,.management-card
) {
  border-radius: 0 !important;
  clip-path: polygon(
    13px 0, calc(100% - 13px) 0, 100% 13px,
    100% calc(100% - 13px), calc(100% - 13px) 100%,
    13px 100%, 0 calc(100% - 13px), 0 13px
  );
}

/* LFG — left filters and dense live listing rows. */
.lfg-match-page { gap: 15px !important; }
.lfg-match-hero { background-position: 68% 42% !important; }
.lfg-match-hero > div:first-child { max-width: 650px !important; }
.lfg-match-shell,.lfg-layout {
  grid-template-columns: 315px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
.lfg-match-aside,.filter-panel {
  border: 1px solid var(--ch154-line) !important;
  background: #fff !important;
  padding: 18px !important;
}
.lfg-results { padding: 14px !important; background: #fff !important; }
.functional-lfg-list { gap: 10px !important; }
.functional-lfg-card {
  min-height: 92px !important;
  border: 1px solid var(--ch154-line-soft) !important;
  border-radius: 8px 2px !important;
  background: #fff !important;
  box-shadow: 0 4px 13px rgb(25 49 77 / 5%) !important;
}
.functional-lfg-card:hover { border-color: #ff9c73 !important; transform: translateY(-1px); }
.functional-game-mark { width: 62px !important; height: 62px !important; border-radius: 8px 2px !important; }
.join-button,.functional-lfg-action,.lfg-group-chat-button {
  border-radius: 7px 2px !important;
  color: var(--ch154-orange-dark) !important;
  border-color: var(--ch154-orange) !important;
  background: #fff !important;
}
.join-button:hover,.functional-lfg-action:hover { color: #fff !important; background: var(--ch154-orange) !important; }

/* Games — reference sidebar + four-column catalogue. */
.games-v2 {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
.games-v2-hero { grid-column: 1 / -1 !important; }
.games-v2-hero-covers { display: none !important; }
.games-v2-hero-copy { padding: 0 !important; align-content: center !important; }
.games-v2-toolbar {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-height: 650px !important;
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: #fff !important;
}
.games-v2-platforms,.games-v2-categories {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}
.games-v2-toolbar button {
  min-height: 40px !important;
  border: 1px solid var(--ch154-line) !important;
  border-radius: 7px 2px !important;
}
.games-v2-toolbar button.active { color: var(--ch154-orange-dark) !important; border-color: var(--ch154-orange) !important; }
.games-v2-toolbar > span { margin-top: auto !important; justify-content: center !important; }
.games-v2-library { grid-column: 2 !important; grid-row: 2 !important; padding: 14px !important; background: #fff !important; }
.games-v2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
.games-v2-card {
  grid-template-rows: 125px auto auto !important;
  border: 1px solid var(--ch154-line) !important;
  border-radius: 8px 2px !important;
}
.games-v2-card-art > img { object-fit: cover !important; background: #101a2a !important; }
.games-v2-card-action {
  min-height: 38px !important;
  justify-content: center !important;
  border: 1px solid var(--ch154-orange) !important;
  margin: 0 9px 9px !important;
  border-radius: 6px 2px !important;
}

/* Teams — filter rail and two-column active teams. */
.teams-d1-hero,.teams-hero { background-position: 66% 44% !important; }
.teams-d1-shell { grid-template-columns: 295px minmax(0,1fr) !important; gap: 18px !important; }
.teams-d1-filters { padding: 18px !important; background: #fff !important; }
.teams-d1-grid,.teams-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
.teams-d1-card,.team-card {
  min-height: 180px !important;
  border: 1px solid var(--ch154-line) !important;
  border-radius: 8px 2px !important;
  background: #fff !important;
}
.teams-d1-emblem,.team-emblem { border-radius: 8px 2px !important; }
.team-hub-link { border-radius: 6px 2px !important; }

/* Clips — large feature player, ranking rail, cards below. */
.clips-hero { background-position: 66% 43% !important; }
.clips-command-v1 .clips-d2-title { display: none !important; }
.clips-command-v1 .clips-d2-reference-layout,.clips-d2-reference-layout {
  grid-template-columns: minmax(0, 1fr) 390px !important;
  gap: 16px !important;
}
.clips-d2-discovery { display: none !important; }
.clips-d2-center-column { grid-column: 1 !important; min-width: 0 !important; }
.clips-d2-right-column { grid-column: 2 !important; min-width: 0 !important; }
.clips-d2-center-column > .clips-d2-player {
  grid-template-rows: min(40vw,500px) 62px !important;
  border: 1px solid var(--ch154-line) !important;
  padding: 10px !important;
}
.clips-d2-center-column .clips-d2-media { height: min(40vw,500px) !important; }
.clips-d2-right-column > .clips-d2-next {
  height: auto !important;
  min-height: 520px !important;
  padding: 14px !important;
}
.clips-d2-right-column .clips-d2-next > button { min-height: 78px !important; }
.clips-d2-details { display: none !important; }
.clips-d2-comments { max-height: none !important; height: auto !important; min-height: 240px !important; }

/* Chat — three clear columns and fixed-height message viewport. */
.page-hero-chat { background-position: 66% 43% !important; }
.community-chat-shell.chat-shell {
  grid-template-columns: 320px minmax(0,1fr) 320px !important;
  min-height: 650px !important;
  background: #fff !important;
}
.chat-channel-panel,.chat-members-panel { background: #fbfcfe !important; }
.chat-conversation { background: #fff !important; }
.chat-message-list { min-height: 455px !important; max-height: 560px !important; }
.chat-game-room-banner { min-height: 118px !important; }
.chat-message-body > p { border-radius: 3px 9px 9px !important; }
.chat-composer { border-radius: 7px 2px !important; }
.chat-send-button { min-width: 130px !important; border-radius: 6px 2px !important; }

/* News — feature feed, latest rail and popular topics. */
.news-radar-header { min-height: 98px !important; background-position: 68% 44% !important; }
.news-radar-layout {
  grid-template-columns: minmax(0,1fr) 365px !important;
  gap: 16px !important;
  align-items: start !important;
}
.news-radar-sidebar { grid-column: 1 / -1 !important; padding: 10px !important; }
.news-radar-feed { grid-column: 1 !important; padding: 14px !important; }
.news-radar-aside { grid-column: 2 !important; padding: 14px !important; }
.news-timeline { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 12px !important; }
.news-timeline-card {
  border: 1px solid var(--ch154-line) !important;
  border-radius: 8px 2px !important;
  overflow: hidden !important;
}
.news-timeline-card:first-child { grid-column: span 2 !important; }
.news-timeline-media { min-height: 112px !important; }

/* Profile — dashboard on the left, inbox on the right. */
.profile-command-hero { min-height: 190px !important; background-position: 64% 48% !important; }
.profile-command-cover { display: grid !important; grid-template-columns: minmax(0,1.7fr) minmax(340px,.9fr) !important; gap: 16px !important; }
.profile-command-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 12px !important; }
.profile-inbox { grid-column: 2 !important; grid-row: 1 / span 4 !important; min-height: 560px !important; }
.profile-command-metrics > article,.profile-command-game,.profile-inbox-list > button {
  border: 1px solid var(--ch154-line-soft) !important;
  border-radius: 7px 2px !important;
}

/* Premium — comparison, preview and FAQ visual hierarchy. */
.premium-hero { min-height: 170px !important; background-position: 65% 43% !important; }
.premium-feature-grid-expanded {
  grid-template-columns: 1.25fr .9fr .85fr !important;
  gap: 16px !important;
}
.premium-feature-grid article,.premium-command-center,.premium-theme-center,.verified-team-note {
  border: 1px solid #dfd5bd !important;
  border-radius: 0 !important;
  background: #fff !important;
}
.premium-command-center { border-color: #e0b44e !important; }
.premium-crown { color: #c58c1e !important; }

/* Management — compact command-center cards. */
.management-console-hero { min-height: 96px !important; background-position: 70% 47% !important; }
.management-overview-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 12px !important; }
.management-stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 12px !important; }
.management-card { background: #fff !important; }
.management-user-list article,.management-report-list article,.management-created-list article {
  border: 1px solid var(--ch154-line-soft) !important;
  border-radius: 7px 2px !important;
}
.management-quick-actions button { border-radius: 7px 2px !important; }

@media (width <= 1180px) {
  .games-v2-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .community-chat-shell.chat-shell { grid-template-columns: 270px minmax(0,1fr) !important; }
  .community-chat-shell .chat-members-panel { display: none !important; }
  .premium-feature-grid-expanded { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (width <= 900px) {
  :is(
    .lfg-match-page,.games-v2,.teams-page,.clips-page,.chat-page,
    .news-page,.profile-command-page,.premium-page,.management-console
  ) { width: calc(100% - 14px) !important; margin-top: 8px !important; }

  :is(
    .lfg-match-hero,.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,
    .page-hero-chat,.news-radar-header,.profile-command-hero,.premium-hero,
    .management-console-hero
  ) {
    min-height: 170px !important;
    padding: 24px 20px !important;
    background-position: 62% center !important;
  }

  .lfg-match-shell,.lfg-layout,.games-v2,.teams-d1-shell,
  .clips-command-v1 .clips-d2-reference-layout,.clips-d2-reference-layout,
  .news-radar-layout,.profile-command-cover {
    grid-template-columns: 1fr !important;
  }
  .games-v2-hero,.games-v2-toolbar,.games-v2-library { grid-column: 1 !important; grid-row: auto !important; }
  .games-v2-toolbar { min-height: 0 !important; }
  .games-v2-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .teams-d1-grid,.teams-grid { grid-template-columns: 1fr !important; }
  .clips-d2-center-column,.clips-d2-right-column,.news-radar-sidebar,.news-radar-feed,.news-radar-aside,.profile-inbox {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .news-timeline { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .profile-command-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .premium-feature-grid-expanded,.management-overview-grid,.management-stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (width <= 580px) {
  .games-v2-grid,.news-timeline,.profile-command-grid,
  .premium-feature-grid-expanded,.management-overview-grid,.management-stat-grid {
    grid-template-columns: 1fr !important;
  }
  .news-timeline-card:first-child { grid-column: auto !important; }
  .clips-d2-center-column > .clips-d2-player {
    grid-template-rows: min(58vw,340px) 56px !important;
  }
  .clips-d2-center-column .clips-d2-media { height: min(58vw,340px) !important; }
}