/* =========================================================
   D20 — RANKINGS: AJUSTE FINAL
   Este arquivo é carregado POR ÚLTIMO nas páginas de ranking.

   Objetivos:
   1) patrocinadores ocupam toda a lateral disponível;
   2) elimina a faixa preta entre anúncio e ranking;
   3) mantém a arte inteira preenchendo a lateral;
   4) tabela individual cabe inteira, sem a antiga coluna Situação;
   5) não altera a Home.
   ========================================================= */


/* =========================================================
   DESKTOP — PATROCINADOR | CONTEÚDO 1180px | PATROCINADOR
   ========================================================= */
@media (min-width: 1181px) {

  html,
  body.individual-ranking-page {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden !important;
  }

  .ranking-page-shell.individual-ranking-shell {
    display: grid !important;

    /* todo o espaço que sobra vai para os patrocinadores */
    grid-template-columns:
      minmax(0, 1fr)
      1180px
      minmax(0, 1fr) !important;

    width: 100vw !important;
    max-width: none !important;
    min-width: 1180px !important;

    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;
  }

  /* miolo */
  .ranking-page-shell.individual-ranking-shell > .ranking-hltv-main {
    grid-column: 2 !important;

    width: 1180px !important;
    max-width: 1180px !important;
    min-width: 1180px !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
      radial-gradient(circle at 50% 0, rgba(187,255,35,.055), transparent 420px),
      #020402 !important;
  }

  /* patrocinadores */
  .ranking-page-shell.individual-ranking-shell > .ranking-side-ad.left {
    grid-column: 1 !important;
  }

  .ranking-page-shell.individual-ranking-shell > .ranking-side-ad.right {
    grid-column: 3 !important;
  }

  .ranking-page-shell.individual-ranking-shell > .ranking-side-ad {
    position: sticky !important;
    top: 0 !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 100vh !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;
    outline: 0 !important;
    background: #000 !important;
  }

  .ranking-page-shell .ranking-side-ad-inner,
  .ranking-page-shell .ranking-side-ad-inner.has-sponsor-image {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;
    outline: 0 !important;
    background: #000 !important;
  }

  /* remove qualquer fundo duplicado */
  .ranking-page-shell .ranking-side-ad-inner::before,
  .ranking-page-shell .ranking-side-ad-inner::after,
  .ranking-page-shell .ranking-side-ad-inner.has-sponsor-image::before,
  .ranking-page-shell .ranking-side-ad-inner.has-sponsor-image::after {
    content: none !important;
    display: none !important;

    background: none !important;
    background-image: none !important;

    filter: none !important;
    transform: none !important;
  }

  /* a própria imagem preenche a lateral inteira */
  .ranking-page-shell .ranking-side-ad-inner img,
  .ranking-page-shell .ranking-side-ad-inner.has-sponsor-image img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: fill !important;
    object-position: center top !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    transform: none !important;
    filter: none !important;
  }


  /* =======================================================
     CONTEÚDO INTERNO
     ======================================================= */

  .ranking-hltv-topbar-inner {
    width: 100% !important;
    max-width: 1180px !important;

    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;

    box-sizing: border-box !important;
  }

  .individual-ranking-content {
    width: 100% !important;
    max-width: 1180px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 12px !important;

    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns:
      170px
      minmax(0, 1fr)
      190px !important;

    gap: 12px !important;
  }

  .individual-ranking-main-panel,
  .individual-filter-panel,
  .individual-ranking-side,
  .individual-table-card,
  .individual-ranking-list {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .individual-ranking-main-panel {
    width: 100% !important;
    overflow: hidden !important;
  }


  /* =======================================================
     TABELA — CABE INTEIRA
     ======================================================= */

  .individual-table-card {
    width: 100% !important;
    overflow: hidden !important;
  }

  .individual-table-head,
  .individual-ranking-row {
    display: grid !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    /* posição | participante | clube | modalidade | pontos */
    grid-template-columns:
      52px
      minmax(190px, 2fr)
      minmax(110px, 1fr)
      minmax(110px, 1fr)
      82px !important;

    column-gap: 8px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    box-sizing: border-box !important;
  }

  .individual-table-head {
    font-size: 10px !important;
  }

  .individual-ranking-row {
    min-height: 70px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .individual-position,
  .individual-player,
  .individual-player > div,
  .individual-team,
  .individual-category,
  .individual-points,
  .individual-accuracy {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .individual-position {
    font-size: 25px !important;
  }

  .individual-player {
    gap: 8px !important;
  }

  .individual-avatar {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }

  .individual-player strong,
  .individual-team,
  .individual-category {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .individual-player strong {
    font-size: 14px !important;
  }

  .individual-player span {
    font-size: 10px !important;
  }

  .individual-team,
  .individual-category {
    font-size: 12px !important;
  }

  .individual-points {
    font-size: 13px !important;

    white-space: nowrap !important;
    text-align: right !important;

    overflow: visible !important;
  }
}


/* =========================================================
   RESPONSIVO — abaixo de 1180px, sem skins laterais
   ========================================================= */
@media (max-width: 1180px) {

  .ranking-page-shell.individual-ranking-shell {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ranking-page-shell.individual-ranking-shell > .ranking-side-ad {
    display: none !important;
  }

  .ranking-page-shell.individual-ranking-shell > .ranking-hltv-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* Ranking sem a antiga coluna "Situação" */
@media (max-width: 920px){
  .individual-ranking-row{
    grid-template-columns:56px minmax(0,1fr) auto !important;
    grid-template-areas:
      "position player points"
      "position team team"
      "position category category" !important;
  }
  .individual-position{grid-area:position !important}
  .individual-player{grid-area:player !important}
  .individual-team{grid-area:team !important}
  .individual-category{grid-area:category !important}
  .individual-points{
    grid-area:points !important;
    grid-column:auto !important;
    text-align:right !important;
  }
}