/* ClutchHub v148 — unified white tactical system for all core pages. */
:root {
  --ch148-ink: #14223a;
  --ch148-muted: #68768b;
  --ch148-line: #d7e1ec;
  --ch148-orange: #ff5416;
  --ch148-shadow: 0 10px 28px rgb(25 43 68 / 9%);
}

:is(.games-v2,.teams-page,.clips-page,.chat-page,.news-page,.profile-command-page,.premium-page,.management-console) {
  width: min(1640px,calc(100% - 24px)) !important;
  max-width: 1640px !important;
  margin-inline: auto !important;
}

:is(.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,.page-hero-chat,.premium-hero,.management-console-hero,.profile-command-hero) {
  border: 1px solid var(--ch148-line) !important;
  border-radius: 0 !important;
  clip-path: polygon(18px 0,32% 0,calc(32% + 18px) 15px,calc(100% - 18px) 15px,100% 33px,100% calc(100% - 18px),calc(100% - 18px) 100%,17px 100%,0 calc(100% - 17px),0 18px);
  box-shadow: 0 12px 30px rgb(27 46 73 / 12%) !important;
}

:is(.surface-panel,.games-v2-library,.teams-d1-filters,.teams-d1-new,.teams-d1-main,.clips-d2-player,.clips-d2-comments,.clips-d2-right-column,.news-radar-sidebar,.news-radar-feed,.news-radar-aside) {
  border-color: var(--ch148-line) !important;
  box-shadow: var(--ch148-shadow) !important;
}

/* Games */
.games-v2 { gap: 16px !important; margin-top: 16px !important; }
.games-v2-hero {
  min-height: 218px !important;
  padding: 34px 42px !important;
  background:
    linear-gradient(90deg,rgb(255 255 255 / 98%) 0 36%,rgb(255 255 255 / 70%) 58%,rgb(255 255 255 / 15%) 78%),
    url("/assets/page-heroes/games-hero.webp") 70% center / cover no-repeat !important;
}
.games-v2-hero-copy h1 { color: var(--ch148-ink) !important; font-size: clamp(38px,4vw,60px) !important; }
.games-v2-hero-copy p { color: var(--ch148-muted) !important; }
.games-v2-toolbar {
  min-height: 66px; padding: 12px 16px !important;
  border: 1px solid var(--ch148-line) !important; border-radius: 10px 3px !important;
  background: rgb(255 255 255 / 95%) !important; box-shadow: 0 6px 20px rgb(25 43 68 / 7%);
}
.games-v2-categories button,.games-v2-platforms button { border-radius: 7px 2px !important; }
.games-v2-grid { gap: 13px !important; }
.games-v2-card {
  border: 1px solid var(--ch148-line) !important; border-radius: 9px 2px !important;
  background: #fff !important; box-shadow: 0 7px 20px rgb(25 43 68 / 8%) !important; overflow: hidden;
}
.games-v2-card:hover { border-color: #ffad88 !important; transform: translateY(-3px); box-shadow: 0 14px 28px rgb(25 43 68 / 13%) !important; }
.games-v2-card-action { color: #e84910 !important; border-color: #ff9d73 !important; border-radius: 7px 2px !important; background: #fff !important; }

/* Teams */
.teams-page { margin-top: 16px !important; }
.teams-design-one { gap: 16px !important; }
.teams-d1-hero,.teams-hero {
  min-height: 190px !important;
  background:
    linear-gradient(90deg,rgb(255 255 255 / 98%) 0 38%,rgb(255 255 255 / 72%) 60%,rgb(255 255 255 / 18%) 82%),
    url("/assets/page-heroes/teams-hero.webp") 72% center / cover no-repeat !important;
}
.teams-d1-shell { grid-template-columns: 305px minmax(0,1fr) !important; gap: 17px !important; }
.teams-d1-filters,.teams-d1-new,.teams-d1-main {
  border-radius: 0 !important;
  clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
.teams-d1-card,.team-card {
  border: 1px solid var(--ch148-line) !important; border-radius: 9px 2px !important;
  background: #fff !important; box-shadow: 0 6px 18px rgb(25 43 68 / 7%) !important;
}
.teams-d1-card:hover,.team-card:hover { border-color: #ffad88 !important; transform: translateY(-2px); }
.team-creation-gate { border: 1px dashed #c7d4e1 !important; background: linear-gradient(145deg,#fbfcfe,#f3f6fa) !important; }
.team-create-trigger:disabled { color: #7d899a !important; background: #edf1f5 !important; border-color: #cfd9e4 !important; box-shadow: none !important; }

/* Clips */
.clips-page { margin-top: 16px !important; }
.clips-hero {
  min-height: 190px !important; padding: 32px 42px !important;
  background:
    linear-gradient(90deg,rgb(255 255 255 / 98%) 0 38%,rgb(255 255 255 / 72%) 60%,rgb(255 255 255 / 16%) 82%),
    url("/assets/page-heroes/clips-hero.webp") 70% center / cover no-repeat !important;
}
.clips-toolbar { border-radius: 9px 2px !important; background: #fff !important; }
.clips-grid { gap: 12px !important; }
.clip-card {
  border: 1px solid var(--ch148-line) !important; border-radius: 9px 2px !important;
  background: #fff !important; box-shadow: 0 7px 20px rgb(25 43 68 / 8%) !important;
}
.clip-card:hover { border-color: #ffad88 !important; transform: translateY(-3px); }
.clip-preview { border-radius: 8px 2px 0 0 !important; }
.clip-play { color: #fff !important; background: rgb(255 84 22 / 92%) !important; border-color: #fff !important; }
.clips-d2-reference-layout { gap: 14px !important; }
.clips-d2-player,.clips-d2-comments,.clips-d2-right-column {
  border-radius: 0 !important;
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}

/* Chat */
.chat-page { margin-top: 16px !important; }
.page-hero-chat {
  min-height: 150px !important; margin-bottom: 15px !important; padding: 27px 40px !important;
  background:
    linear-gradient(90deg,rgb(255 255 255 / 98%) 0 38%,rgb(255 255 255 / 70%) 62%,rgb(255 255 255 / 12%) 84%),
    url("/assets/page-heroes/chat-hero.webp") 70% center / cover no-repeat !important;
}
.community-chat-shell {
  gap: 0 !important; border: 1px solid var(--ch148-line) !important; border-radius: 0 !important;
  clip-path: polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);
  background: #fff !important; box-shadow: var(--ch148-shadow) !important;
}
.chat-channel-panel,.chat-members-panel {
  background: linear-gradient(rgb(224 233 242 / 32%) 1px,transparent 1px),#f9fbfd !important;
  background-size: 30px 30px,auto !important;
}
.chat-conversation { border-inline: 1px solid #dde6ef !important; background: #fff !important; }
.chat-channel-list button,.chat-member-row { border-radius: 7px 2px !important; }
.chat-channel-list button.active { color: #e84910 !important; background: #fff3ec !important; box-shadow: inset 3px 0 var(--ch148-orange); }
.chat-message-body { border-radius: 8px 2px !important; }
.chat-composer {
  border: 1px solid #d6e1ec !important; border-radius: 9px 2px !important;
  background: #fff !important; box-shadow: 0 5px 16px rgb(25 43 68 / 7%);
}
.chat-send-button { border-radius: 7px 2px !important; background: linear-gradient(135deg,#ff651f,#ed430c) !important; }
.chat-lfg-invite { border-radius: 5px 12px 12px 5px !important; box-shadow: 0 7px 20px rgb(25 43 68 / 8%) !important; }

/* News */
.news-page { margin-top: 16px !important; }
.news-radar-header {
  border: 1px solid var(--ch148-line) !important; border-radius: 0 !important;
  clip-path: polygon(18px 0,32% 0,calc(32% + 18px) 15px,calc(100% - 18px) 15px,100% 33px,100% calc(100% - 18px),calc(100% - 18px) 100%,17px 100%,0 calc(100% - 17px),0 18px);
  background:
    linear-gradient(90deg,rgb(255 255 255 / 98%) 0 42%,rgb(255 255 255 / 68%) 65%,rgb(255 255 255 / 12%) 85%),
    url("/assets/page-heroes/news-hero.webp") 72% center / cover no-repeat !important;
  box-shadow: 0 12px 30px rgb(27 46 73 / 12%) !important;
}
.news-radar-layout { gap: 14px !important; }
.news-radar-sidebar,.news-radar-feed,.news-radar-aside {
  border-radius: 0 !important;
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  background: #fff !important;
}
.news-timeline-card {
  border: 1px solid #dde5ee !important; border-radius: 9px 2px !important;
  background: #fff !important; box-shadow: 0 6px 17px rgb(25 43 68 / 7%) !important;
}
.news-timeline-card:hover { border-color: #ffad88 !important; transform: translateX(2px); }

/* Profile and private messages */
.profile-command-page { margin-top: 16px !important; }
.profile-command-hero {
  background:
    linear-gradient(90deg,rgb(255 255 255 / 98%) 0 38%,rgb(255 255 255 / 60%) 70%,rgb(255 255 255 / 16%)),
    var(--profile-cover-image,linear-gradient(135deg,#f7f9fc,#fff)) !important;
}
.profile-command-cover,.profile-command-grid { gap: 14px !important; }
.profile-command-card,.profile-inbox,.profile-command-program-editor {
  border-radius: 0 !important;
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  background: #fff !important;
}
.profile-command-avatar-shell { border-color: var(--ch148-orange) !important; box-shadow: 0 0 0 5px #fff,0 0 0 6px #ffb18c !important; }
.profile-command-metrics > article,.profile-command-game,.profile-inbox-list > button { border-radius: 8px 2px !important; background: #f8fafc !important; }
.profile-inbox-list > button.active { background: #fff3ec !important; border-color: #ffad88 !important; }

/* Premium */
.premium-page { margin-top: 16px !important; }
.premium-hero {
  min-height: 285px !important;
  background:
    linear-gradient(90deg,rgb(255 255 255 / 98%) 0 42%,rgb(255 255 255 / 65%) 68%,rgb(255 255 255 / 12%)),
    url("/assets/page-heroes/premium-hero.webp") 72% center / cover no-repeat !important;
}
.premium-crown { color: #b87418 !important; background: #fffaf0 !important; border-color: #efc878 !important; }
.premium-feature-grid article,.premium-command-center,.premium-theme-center,.verified-team-note {
  border-radius: 0 !important;
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.premium-feature-grid article { border: 1px solid #eadfca !important; background: linear-gradient(145deg,#fff,#fffaf1) !important; }
.premium-cta:disabled { color: #788496 !important; background: #edf1f5 !important; border-color: #ccd7e2 !important; box-shadow: none !important; }

/* Management */
.management-console { margin-top: 16px !important; }
.management-console-hero {
  min-height: 180px !important;
  background: linear-gradient(90deg,rgb(255 255 255 / 98%) 0 50%,rgb(255 255 255 / 64%) 75%,rgb(255 255 255 / 8%)),linear-gradient(135deg,#f8fafc,#eef3f8) !important;
}
.management-tabs,.management-card,.management-permission-strip {
  border-radius: 0 !important;
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.management-tabs { background: #fff !important; box-shadow: var(--ch148-shadow) !important; }
.management-tabs button.active { color: #e84910 !important; background: #fff3ec !important; box-shadow: inset 3px 0 var(--ch148-orange); }
.management-stat-grid > article,.management-quick-actions button,.management-user-list article,.management-report-list article,.management-created-list article {
  border-radius: 8px 2px !important; border-color: #dce5ee !important;
}
.management-quick-actions button:hover { border-color: #ffad88 !important; transform: translateY(-2px); }
.management-role-badge { border-radius: 6px 2px !important; }

@media (width < 1100px) {
  .teams-d1-shell { grid-template-columns: 260px minmax(0,1fr) !important; }
  .premium-feature-grid-expanded { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (width < 900px) {
  :is(.games-v2,.teams-page,.clips-page,.chat-page,.news-page,.profile-command-page,.premium-page,.management-console) { width: calc(100% - 14px) !important; }
  .teams-d1-shell { grid-template-columns: 1fr !important; }
  :is(.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,.page-hero-chat,.premium-hero,.management-console-hero) {
    min-height: 230px !important; padding: 25px 20px !important;
  }
  .premium-feature-grid-expanded { grid-template-columns: 1fr !important; }
}

@media (width < 560px) {
  :is(.games-v2-hero,.teams-d1-hero,.teams-hero,.clips-hero,.page-hero-chat,.premium-hero,.management-console-hero) { min-height: 260px !important; }
  .games-v2-hero-copy h1 { font-size: 38px !important; }
  .games-v2-grid { grid-template-columns: 1fr !important; }
}