/* Ranking Hero: keep the live summary beside the Hero so it cannot cover the
   full artwork. The supplied wide frame is the exact attached reference. */
html body.rfv-page-ranking .rfv-ranking-hero {
  clear: both !important;
  min-height: 720px !important;
  padding: 80px 0 !important;
}

html body.rfv-page-ranking .rfv-ranking-hero .rfv-ranking-hero__layout {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 600px) !important;
  gap: 48px !important;
  align-items: center !important;
  min-height: 560px !important;
}

html body.rfv-page-ranking .rfv-ranking-hero .rfv-ranking-hero__copy {
  min-width: 0 !important;
  max-width: 620px !important;
}

html body.rfv-page-ranking .rfv-ranking-hero .rfv-ranking-status {
  justify-self: end !important;
  width: 100% !important;
  max-width: 600px !important;
  min-height: 500px !important;
  padding: 50px !important;
  background-image: url('../images/rf-assets/panels/supplied/home-dashboard-frame.png') !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  html body.rfv-page-ranking .rfv-ranking-hero .rfv-ranking-hero__layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  html body.rfv-page-ranking .rfv-ranking-hero .rfv-ranking-status {
    justify-self: stretch !important;
    max-width: none !important;
  }
}

@media (max-width: 600px) {
  html body.rfv-page-ranking .rfv-ranking-hero {
    padding: 58px 0 !important;
  }

  html body.rfv-page-ranking .rfv-ranking-hero .rfv-ranking-status {
    min-height: 480px !important;
    padding: 50px !important;
  }
}

/* Ranking filter only: this asset is byte-for-byte identical to the supplied
   ChatGPT Image 24 ส.ค. 2569 23_08_17 (2).png reference. */
html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) minmax(180px, .9fr) minmax(300px, 1.55fr) 180px !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 72px clamp(70px, 6vw, 92px) !important;
  background-image: url('../images/rf-assets/panels/supplied/panel-slim-a.png') !important;
  background-color: transparent !important;
  background-size: 100% 120% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter > label {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 0 40px !important;
  color: #692044 !important;
  font: 700 14px/1.25 "Chakra Petch", sans-serif !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255, 255, 255, .9) !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter select,
html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  color: #fff !important;
  background: #171421 !important;
  border: 2px solid rgba(113, 37, 81, .72) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 6px 14px rgba(96, 20, 62, .1) !important;
  font: 600 15px/1.25 "Chakra Petch", sans-serif !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter input::placeholder {
  color: rgba(255, 255, 255, .72) !important;
  opacity: 1 !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter select {
  position: relative !important;
  top: -20px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 38px 0 18px !important;
  background-color: transparent !important;
  background-image: url('../images/rf-assets/buttons/rank-filter-button.png') !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter select option {
  color: #fff !important;
  background: #171421 !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter select:focus,
html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter input:focus {
  border-color: #ed2387 !important;
  box-shadow: 0 0 0 3px rgba(237, 35, 135, .16), 0 8px 18px rgba(126, 22, 78, .12) !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter > button {
  box-sizing: border-box !important;
  position: relative !important;
  top: -20px !important;
  align-self: center !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  color: #fff !important;
  background-color: transparent !important;
  background-image: url('../images/rf-assets/buttons/rank-filter-button.png') !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 700 14px/1.2 "Chakra Petch", sans-serif !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-shadow: 0 1px 2px rgba(70, 0, 37, .45) !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter > button:hover,
html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter > button:focus-visible {
  transform: translateY(-1px) !important;
  filter: brightness(1.07) drop-shadow(0 0 9px rgba(237, 35, 135, .35)) !important;
}

/* Ranking Community only: use the exact supplied wide frame. */
html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-ranking-community {
  padding: 80px 30px 30px 100px !important;
  background-image: url('../images/rf-assets/panels/supplied/panel-wide-c.png') !important;
  background-color: transparent !important;
  background-size: 100% 110% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Desktop reference: add exactly 40px to the rendered filter and podium
   heights without changing the shared card system or other pages. */
@media (min-width: 761px) {
  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter {
    min-height: 360px !important;
    align-items: center !important;
  }

  html body.rfv-page-ranking .rfv-podium .rfv-podium-card {
    min-height: 258px !important;
  }

  html body.rfv-page-ranking .rfv-podium .rfv-podium-card--1 {
    min-height: 260px !important;
  }

  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-tables {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  html body.rfv-page-ranking .rfv-rank-tables > .rfv-rank-table:nth-child(5) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 24px) / 2) !important;
  }

  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-ranking-community {
    box-sizing: border-box !important;
    min-height: 271px !important;
    height: 271px !important;
  }
}

/* Ranking tables: equal panels, continuous reading order and tables contained
   at the horizontal centre of every panel. Scoped to Ranking only. */
html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-table {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 50px !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-image:
    url('../images/rf-assets/panels/supplied/rank-table-top.png'),
    url('../images/rf-assets/panels/supplied/rank-table-bottom.png'),
    url('../images/rf-assets/panels/supplied/rank-table-middle.png') !important;
  background-position: center top, center bottom, center top !important;
  background-size: 100% auto, 100% auto, 100% auto !important;
  background-repeat: no-repeat, no-repeat, repeat-y !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-table > header {
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-table > header h2 {
  justify-content: center !important;
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-table > table {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  table-layout: fixed !important;
}

@media (min-width: 761px) {
  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-tables > .rfv-rank-table:nth-child(5) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 24px) / 2) !important;
  }
}

html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-table th,
html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-table td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 760px) {
  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 520px !important;
    padding: 68px 42px !important;
  }

  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter > label {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }

  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter .rfv-rank-search-label,
  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter > button {
    grid-column: auto !important;
  }

  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-tables {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  html body.rfv-page-ranking .rfv-rank-tables > .rfv-rank-table:nth-child(5) {
    grid-column: auto !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter {
    padding: 58px 30px !important;
  }

  html body.rfv-page-ranking .rfv-content.rfv-ranking-page .rfv-rank-filter > label {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* Ranking podium: compact icon at left, all player text contained beside it. */
body.rfv-page-ranking .rfv-podium .rfv-podium-card {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  align-items: center !important;
  gap: 7px 15px !important;
  min-height: 142px !important;
  padding: 22px 30px !important;
  overflow: hidden !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-medal {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: center !important;
  transform: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-card--1 .rfv-podium-medal {
  font-size: 16px !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-avatar {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  align-self: start !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-avatar img {
  width: 56px !important;
  height: 56px !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-card > div:not(.rfv-podium-avatar) {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  min-width: 0 !important;
  align-self: center !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-card h2 {
  margin: 0 0 5px !important;
  font-size: clamp(15px, 1.25vw, 19px) !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-card p {
  margin: 0 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body.rfv-page-ranking .rfv-podium .rfv-podium-card strong {
  margin-top: 6px !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  line-height: 1.15 !important;
}