/* ClutchHub v196: one compact ClutchBot card, placed inside each page's own layout. */

.inline-clutchbot-v188 {
  --bot-orange: #ff5018;
  position: relative;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 154px !important;
  grid-template-rows: minmax(252px, auto) !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: min(390px, 100%) !important;
  min-height: 278px !important;
  margin: 15px 0 18px auto !important;
  padding: 21px 0 14px 22px !important;
  overflow: hidden !important;
  color: #14243d !important;
  border: 1px solid #ffd0bd !important;
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px) !important;
  background:
    radial-gradient(circle at 84% 38%, rgb(255 92 28 / 10%), transparent 36%),
    linear-gradient(135deg, #fff8f4, #fff 62%) !important;
  box-shadow: 0 11px 28px rgb(26 50 81 / 10%) !important;
}

.inline-clutchbot-v188::before {
  inset: 9px !important;
  border: 1px solid rgb(191 207 224 / 42%) !important;
  clip-path: polygon(0 0, 30% 0, 34% 3px, 100% 3px, 100% 100%, 70% 100%, 66% calc(100% - 3px), 0 calc(100% - 3px)) !important;
}

.inline-clutchbot-v188::after {
  top: 31px !important;
  left: 0 !important;
  width: 4px !important;
  height: 45px !important;
  background: var(--bot-orange) !important;
  box-shadow: none !important;
}

.inline-clutchbot-v188 .inline-clutchbot-copy {
  z-index: 2;
  align-self: stretch;
  align-content: start;
  display: grid;
  grid-template-rows: auto auto auto minmax(60px, auto) auto;
  min-width: 0;
  padding: 3px 0 8px !important;
}

.inline-clutchbot-v188 .inline-clutchbot-kicker {
  margin: 0 0 3px !important;
  color: var(--bot-orange) !important;
  font-size: 12px !important;
  line-height: 1.15;
  letter-spacing: .09em !important;
}

.inline-clutchbot-v188 .inline-clutchbot-copy h2 {
  margin: 0 0 4px !important;
  color: #10213b !important;
  font-size: 18px !important;
  line-height: 1.08 !important;
  text-transform: uppercase;
}

.inline-clutchbot-v188 .inline-clutchbot-live {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin: 0 !important;
  padding: 0 !important;
  color: #0b995a !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: 0 !important;
}

.inline-clutchbot-v188 .inline-clutchbot-live::before {
  width: 8px;
  height: 8px;
}

.inline-clutchbot-v188 .inline-clutchbot-copy p {
  display: -webkit-box;
  align-self: start;
  max-width: 205px !important;
  min-height: 0 !important;
  margin: 15px 0 10px !important;
  overflow: hidden;
  color: #64758b !important;
  font-size: 12px !important;
  line-height: 1.48 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.inline-clutchbot-v188 .inline-clutchbot-action {
  width: max-content;
  max-width: 190px;
  margin: 0 0 7px !important;
  color: #e64510 !important;
  font-size: 11px !important;
  line-height: 1.3;
}

.inline-clutchbot-v188 .inline-clutchbot-chat-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: end;
  width: max-content;
  max-width: 205px;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  color: #fff !important;
  cursor: pointer;
  border: 1px solid #ed430d !important;
  border-radius: 6px 2px !important;
  background: linear-gradient(135deg, #ff6123, #ed430d) !important;
  font-size: 11px !important;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgb(237 67 13 / 21%) !important;
}

.inline-clutchbot-v188 .inline-clutchbot-visual {
  z-index: 1;
  align-self: stretch;
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  height: auto !important;
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
}

.inline-clutchbot-v188 .inline-clutchbot-visual img {
  width: 176px !important;
  max-width: none;
  height: 232px !important;
  margin: 0 -7px -5px -28px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 12px 14px rgb(24 49 80 / 16%));
}

.inline-clutchbot-v188 .inline-clutchbot-tools {
  display: none !important;
}

/* Route-aware hosts: the card becomes part of the page column, never a full-width strip. */
.home-v3-middle-grid > .inline-clutchbot-v188,
.clips-d2-right-column > .inline-clutchbot-v188,
.news-radar-aside > .inline-clutchbot-v188,
.profile-inbox > .inline-clutchbot-v188,
.premium-theme-center > .inline-clutchbot-v188 {
  width: 100% !important;
  margin: 0 0 15px !important;
}

.home-v3-middle-grid > .inline-clutchbot-v188 {
  grid-column: 2;
  align-self: start;
}

.lfg-match-aside > .inline-clutchbot-v188,
.filter-panel > .inline-clutchbot-v188,
.games-v2-toolbar > .inline-clutchbot-v188,
.chat-members-panel > .inline-clutchbot-v188 {
  grid-template-columns: minmax(0, 1fr) 116px !important;
  grid-template-rows: minmax(232px, auto) !important;
  width: 100% !important;
  min-height: 250px !important;
  margin: 17px 0 0 !important;
  padding: 17px 0 12px 17px !important;
}

:is(.lfg-match-aside, .filter-panel, .games-v2-toolbar, .chat-members-panel) > .inline-clutchbot-v188 .inline-clutchbot-copy h2 {
  font-size: 16px !important;
}

:is(.lfg-match-aside, .filter-panel, .games-v2-toolbar, .chat-members-panel) > .inline-clutchbot-v188 .inline-clutchbot-copy p {
  max-width: 164px !important;
  font-size: 11px !important;
}

:is(.lfg-match-aside, .filter-panel, .games-v2-toolbar, .chat-members-panel) > .inline-clutchbot-v188 .inline-clutchbot-visual img {
  width: 142px !important;
  height: 198px !important;
  margin-right: -8px;
}

:is(.lfg-match-aside, .filter-panel, .games-v2-toolbar, .chat-members-panel) > .inline-clutchbot-v188 .inline-clutchbot-chat-button {
  min-height: 38px !important;
  padding-inline: 10px !important;
  font-size: 10px !important;
}

@media (width <= 980px) {
  .inline-clutchbot-v188,
  .home-v3-middle-grid > .inline-clutchbot-v188,
  .clips-d2-right-column > .inline-clutchbot-v188,
  .news-radar-aside > .inline-clutchbot-v188,
  .profile-inbox > .inline-clutchbot-v188,
  .premium-theme-center > .inline-clutchbot-v188 {
    width: min(390px, 100%) !important;
    margin: 14px 0 18px auto !important;
  }
}

@media (width <= 560px) {
  .inline-clutchbot-v188,
  :is(.lfg-match-aside, .filter-panel, .games-v2-toolbar, .chat-members-panel) > .inline-clutchbot-v188 {
    grid-template-columns: minmax(0, 1fr) 112px !important;
    grid-template-rows: minmax(230px, auto) !important;
    width: 100% !important;
    min-height: 246px !important;
    padding: 17px 0 12px 17px !important;
  }

  .inline-clutchbot-v188 .inline-clutchbot-copy p {
    max-width: 170px !important;
    font-size: 11px !important;
    -webkit-line-clamp: 3;
  }

  .inline-clutchbot-v188 .inline-clutchbot-visual img {
    width: 140px !important;
    height: 190px !important;
  }
}