/* Realms of Arkovia — Rankings visual-acceptance correction
   Page-scoped only. This file neutralizes the legacy synthetic button rule,
   contains Hall of Legends content, and improves desktop readability without
   changing leaderboard data, ranking logic, search behavior, or routes. */

/* Keep the championship board dominant while giving the Hall enough width for
   complete champion identity and score presentation. */
body.roa-rankings-command-page .roa-rankings-command-workspace {
  grid-template-columns: minmax(230px, 0.5fr) minmax(0, 1.86fr) minmax(330px, 0.72fr);
}

/* The legacy stylesheet targets every button. Explicit page-scoped rules are
   required so category controls do not become synthetic pink pills. */
body.roa-rankings-command-page button.roa-rankings-category-button {
  appearance: none !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 43px !important;
  gap: 6px;
  padding: 4px 8px !important;
  color: #d0c3aa !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-align: left;
  text-shadow: none !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('/roa-ui/frames/button-plain.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  filter: saturate(0.74) brightness(0.83) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.58));
  transform: none !important;
}

body.roa-rankings-command-page button.roa-rankings-category-button:hover,
body.roa-rankings-command-page button.roa-rankings-category-button:focus-visible {
  color: #eee2c7 !important;
  background-image: url('/roa-ui/frames/button-plain.png') !important;
  box-shadow: none !important;
  filter: saturate(0.92) brightness(0.98) drop-shadow(0 0 5px rgba(156, 67, 194, 0.24));
  transform: none !important;
}

body.roa-rankings-command-page button.roa-rankings-category-button.is-active,
body.roa-rankings-command-page button.roa-rankings-category-button[aria-selected='true'] {
  color: #fff0c5 !important;
  background-image: url('/roa-ui/frames/button-active.png') !important;
  box-shadow: none !important;
  filter: saturate(0.9) brightness(0.92) drop-shadow(0 0 6px rgba(170, 70, 213, 0.3));
  transform: none !important;
}

body.roa-rankings-command-page button.roa-rankings-category-button > img {
  width: 25px;
  height: 25px;
}

body.roa-rankings-command-page button.roa-rankings-category-button strong {
  font-size: 0.72rem;
  line-height: 1.08;
}

body.roa-rankings-command-page button.roa-rankings-category-button small {
  font-size: 0.58rem;
  line-height: 1.08;
}

body.roa-rankings-command-page button.roa-rankings-category-button b {
  font-size: 0.68rem;
}

body.roa-rankings-command-page .roa-rankings-category-list {
  gap: 3px;
}

body.roa-rankings-command-page .roa-rankings-category-group {
  gap: 2px;
}

body.roa-rankings-command-page .roa-rankings-category-group h3 {
  margin: 2px 4px 0;
  font-size: 0.55rem;
  line-height: 1;
}

/* Present search as one dark fantasy field. The input itself is intentionally
   borderless so browser focus styling cannot create the nested purple box seen
   during desktop acceptance. The clear control overlays the right edge and
   therefore leaves no empty grid column while it is hidden. */
body.roa-rankings-command-page .roa-rankings-search {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  width: min(330px, 42vw);
  min-width: 250px;
  height: 44px;
  gap: 7px;
  padding: 0 10px;
  overflow: hidden;
  border: 8px solid transparent !important;
  border-image: url('/roa-ui/frames/card-square.png') 48 fill / 8px / 0 stretch !important;
  border-radius: 0 !important;
  background-color: rgba(5, 4, 8, 0.97) !important;
  background-image: linear-gradient(180deg, rgba(20, 15, 24, 0.97), rgba(5, 4, 8, 0.99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(216, 184, 107, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.42) !important;
}

body.roa-rankings-command-page .roa-rankings-search:focus-within {
  filter: brightness(1.04) drop-shadow(0 0 5px rgba(166, 57, 211, 0.22));
}

body.roa-rankings-command-page .roa-rankings-search > img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  opacity: 0.68;
  filter: saturate(0.78) brightness(0.96);
}

body.roa-rankings-command-page .roa-rankings-search input,
body.roa-rankings-command-page .roa-rankings-search input:focus,
body.roa-rankings-command-page .roa-rankings-search input:focus-visible {
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 32px 0 0 !important;
  color: #e6ddce !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.roa-rankings-command-page .roa-rankings-search input::placeholder {
  color: #91877a;
  opacity: 1;
}

/* The custom clear control must remain hidden while the search is empty and
   must never inherit the legacy bright-pink global button treatment. */
body.roa-rankings-command-page .roa-rankings-search button {
  appearance: none !important;
  position: absolute !important;
  top: 50%;
  right: 8px;
  display: grid !important;
  place-items: center;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  color: #d7c69e !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 1px solid rgba(216, 184, 107, 0.26) !important;
  border-radius: 0 !important;
  background-color: rgba(8, 6, 11, 0.98) !important;
  background-image: linear-gradient(180deg, rgba(30, 22, 35, 0.98), rgba(7, 5, 9, 0.99)) !important;
  box-shadow: inset 0 0 0 1px rgba(154, 53, 213, 0.08) !important;
  filter: none !important;
  transform: translateY(-50%) !important;
}

body.roa-rankings-command-page .roa-rankings-search button:hover,
body.roa-rankings-command-page .roa-rankings-search button:focus-visible {
  color: #fff0c5 !important;
  border-color: rgba(184, 78, 224, 0.48) !important;
  background-image: linear-gradient(180deg, rgba(42, 27, 50, 0.99), rgba(9, 6, 12, 0.99)) !important;
  box-shadow: 0 0 6px rgba(166, 57, 211, 0.24) !important;
  transform: translateY(-50%) !important;
}

body.roa-rankings-command-page .roa-rankings-search button[hidden] {
  display: none !important;
}

/* Hall of Legends: allocate a dedicated score column instead of stacking six
   text lines into a short card. Every card clips its own content and can never
   write across a neighboring card boundary. */
body.roa-rankings-command-page .roa-rankings-hall {
  padding-right: 8px;
}

body.roa-rankings-command-page .roa-rankings-hall-list {
  gap: 4px;
  padding: 0 6px 0 0;
  scrollbar-color: rgba(166, 57, 211, 0.82) rgba(0, 0, 0, 0.34);
}

body.roa-rankings-command-page .roa-rankings-legend-card {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 82px;
  gap: 7px;
  padding: 6px 8px;
  overflow: hidden;
  contain: layout paint;
}

body.roa-rankings-command-page .roa-rankings-legend-card > img {
  width: 32px;
  height: 32px;
  align-self: center;
}

body.roa-rankings-command-page .roa-rankings-legend-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(62px, auto);
  grid-template-areas:
    'metric score'
    'title score'
    'player score'
    'active score'
    'wallet score';
  align-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
  column-gap: 8px;
  row-gap: 0;
  overflow: hidden;
}

body.roa-rankings-command-page .roa-rankings-legend-card p.eyebrow {
  grid-area: metric;
  margin: 0;
  overflow: hidden;
  color: #c28bce;
  font-size: 0.59rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.roa-rankings-command-page .roa-rankings-legend-card h3 {
  grid-area: title;
  margin: 1px 0;
  overflow: hidden;
  color: #ddcca3;
  font-size: 0.7rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.roa-rankings-command-page .roa-rankings-legend-card strong {
  grid-area: player;
  overflow: hidden;
  color: #eee5d5;
  font-size: 0.72rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.roa-rankings-command-page .roa-rankings-legend-card small {
  grid-area: active;
  overflow: hidden;
  color: #c47ce8;
  font-size: 0.61rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.roa-rankings-command-page .roa-rankings-legend-card code {
  grid-area: wallet;
  overflow: hidden;
  color: #938a7d;
  font-family: var(--roa-body-font);
  font-size: 0.6rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.roa-rankings-command-page .roa-rankings-legend-card b {
  grid-area: score;
  align-self: center;
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  color: var(--roa-gold-bright);
  font-size: 0.9rem;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.roa-rankings-command-page .roa-rankings-legend-card.is-empty strong {
  grid-row: player / wallet;
  align-self: center;
  white-space: normal;
}

body.roa-rankings-command-page .roa-rankings-hall-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(101, 30, 130, 0.94), rgba(179, 68, 219, 0.88));
  border: 1px solid rgba(216, 184, 107, 0.3);
}

/* Keep the center ledger comfortably contained after the right rail expands. */
body.roa-rankings-command-page .roa-rankings-ledger-scroll {
  padding-bottom: 6px;
}

body.roa-rankings-command-page .roa-rankings-podium-card {
  overflow: hidden;
}

@media (max-width: 1450px), (max-height: 820px) {
  body.roa-rankings-command-page .roa-rankings-command-workspace {
    grid-template-columns: minmax(210px, 0.48fr) minmax(0, 1.82fr) minmax(320px, 0.74fr);
  }

  body.roa-rankings-command-page .roa-rankings-search {
    width: min(300px, 35vw);
    min-width: 220px;
    height: 38px;
    border-width: 7px !important;
    border-image-width: 7px !important;
  }

  body.roa-rankings-command-page .roa-rankings-search input,
  body.roa-rankings-command-page .roa-rankings-search input:focus,
  body.roa-rankings-command-page .roa-rankings-search input:focus-visible {
    height: 27px !important;
    font-size: 0.7rem !important;
  }

  body.roa-rankings-command-page button.roa-rankings-category-button {
    grid-template-columns: 25px minmax(0, 1fr) 25px;
    min-height: 40px !important;
    padding: 3px 7px !important;
  }

  body.roa-rankings-command-page button.roa-rankings-category-button > img {
    width: 23px;
    height: 23px;
  }

  body.roa-rankings-command-page .roa-rankings-legend-card {
    min-height: 78px;
    padding: 5px 7px;
  }

  body.roa-rankings-command-page .roa-rankings-legend-card > div {
    grid-template-columns: minmax(0, 1fr) minmax(58px, auto);
    column-gap: 6px;
  }
}

@media (max-width: 1120px) {
  body.roa-rankings-command-page .roa-rankings-command-workspace {
    grid-template-columns: 1fr;
  }

  body.roa-rankings-command-page .roa-rankings-search {
    width: min(100%, 420px);
  }

  body.roa-rankings-command-page .roa-rankings-hall-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body.roa-rankings-command-page .roa-rankings-legend-card {
    min-height: 86px;
  }
}

@media (max-width: 680px) {
  body.roa-rankings-command-page .roa-rankings-search {
    width: 100%;
    min-width: 0;
  }

  body.roa-rankings-command-page .roa-rankings-hall-list {
    grid-template-columns: 1fr;
  }

  body.roa-rankings-command-page .roa-rankings-legend-card > div {
    grid-template-columns: minmax(0, 1fr) minmax(56px, auto);
  }
}