/* V32 / V73 — Ranking page aligned with the Sagroth graphite and burgundy theme. */
html[data-active-view="ranking"],
html[data-active-view="ranking"] body {
  background: #171719 !important;
}

html[data-active-view="ranking"] #inner-page-shell {
  isolation: isolate;
  background:
    radial-gradient(ellipse 34% 58% at 0% 34%, rgba(113,32,43,.12), transparent 72%),
    radial-gradient(ellipse 32% 54% at 100% 66%, rgba(99,29,39,.09), transparent 74%),
    radial-gradient(ellipse at 50% 0%, #2a2a2c 0%, #1e1e20 42%, #171719 100%) !important;
}

html[data-active-view="ranking"] #inner-page-shell::before {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(177,52,65,.24), transparent) left 11% top 190px / 76px 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(177,52,65,.19), transparent) right 11% top 70% / 76px 1px no-repeat,
    radial-gradient(circle at -5% 34%, transparent 0 215px, rgba(172,68,78,.045) 216px 217px, transparent 218px),
    radial-gradient(circle at 105% 68%, transparent 0 235px, rgba(172,68,78,.04) 236px 237px, transparent 238px);
}

html[data-active-view="ranking"] #inner-page-shell::after {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 0;
  inset: 104px max(26px, calc(50% - 610px)) 48px;
  pointer-events: none;
  border-right: 1px solid rgba(185,185,190,.04);
  border-left: 1px solid rgba(185,185,190,.04);
  background: linear-gradient(90deg, rgba(130,42,53,.02), transparent 9%, transparent 91%, rgba(130,42,53,.02));
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent);
}

html[data-active-view="ranking"] .inner-page-body {
  position: relative;
  z-index: 1;
}

body.s2-ranking-document {
  --rank-paper: #ededee;
  --rank-muted: #aaa9ae;
  --rank-wine: #99323e;
  --rank-wine-dark: #782630;
  --rank-surface: #272729;
  --rank-deep: #202022;
  --rank-ink: #19191b;
  --rank-line: #414146;
  color: var(--rank-paper);
}

.s2-ranking-document .rank-title {
  border-bottom-color: #3e3e42;
}

.s2-ranking-document .rank-title-icon {
  border-color: #48484d;
  background: linear-gradient(145deg, #2b2b2e, #232326);
  color: #d7d7db;
}

.s2-ranking-document .rank-title h1,
.s2-ranking-document .rank-category-head h2,
.s2-ranking-document .rank-identity > strong {
  color: #ededee;
}

.s2-ranking-document .rank-title p,
.s2-ranking-document .rank-category-head p {
  color: #aaa9ae;
}

.s2-ranking-document .rank-tabs button {
  border-color: #414146;
  background: linear-gradient(145deg, #272729, #202022);
  color: #bbbabe;
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}

.s2-ranking-document .rank-tab-icon {
  stroke: #99999f;
}

.s2-ranking-document .rank-tabs button:hover {
  border-color: #68686e;
  background: linear-gradient(145deg, #2e2e31, #252527);
  color: #f0f0f1;
}

.s2-ranking-document .rank-tabs button:hover .rank-tab-icon {
  stroke: #d6d6da;
}

.s2-ranking-document .rank-tabs button.active {
  border-color: #ae535d;
  background: linear-gradient(#99323e, #782630);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.s2-ranking-document .rank-tabs button.active .rank-tab-icon {
  stroke: #fff;
}

.s2-ranking-document .rank-search {
  border-color: #414146;
  border-top-color: #48484d;
  background: linear-gradient(145deg, #272729, #202022);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}

.s2-ranking-document .rank-search input,
.s2-ranking-document .rank-class-trigger {
  border-color: #48484d;
  background: #19191b;
  color: #ededee;
}

.s2-ranking-document .rank-search input::placeholder {
  color: #85858a;
}

.s2-ranking-document .rank-class-trigger {
  color: #c9c8cc;
}

.s2-ranking-document .rank-class-trigger i {
  border-top-color: #bb737c;
}

.s2-ranking-document .rank-search input:focus,
.s2-ranking-document .rank-class-trigger:focus-visible,
.s2-ranking-document .rank-class-select.is-open .rank-class-trigger {
  border-color: #a15b65;
  background: #1e1d1f;
  box-shadow: 0 0 0 2px rgba(161,91,101,.15);
}

.s2-ranking-document .rank-class-menu {
  border-color: #55555b;
  background: #242426;
}

.s2-ranking-document .rank-class-menu button {
  color: #c9c8cc;
}

.s2-ranking-document .rank-class-menu button:hover,
.s2-ranking-document .rank-class-menu button:focus-visible {
  background: #303033;
  color: #fff;
}

.s2-ranking-document .rank-class-menu button[aria-selected="true"] {
  background: #3a292d;
  color: #f0e8e9;
}

.s2-ranking-document .rank-search-button {
  border-color: #ae535d;
  background: linear-gradient(#99323e, #782630);
  color: #fff;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.s2-ranking-document .rank-search-button:hover {
  border-color: #c27680;
  background: linear-gradient(#aa414d, #8d303b);
  filter: none;
}

.s2-ranking-document .rank-tabs button:focus-visible,
.s2-ranking-document .rank-search-button:focus-visible,
.s2-ranking-document .rank-pagination button:focus-visible {
  outline: 2px solid #d3a0a5;
  outline-offset: 3px;
}

.s2-ranking-document .rank-category-head,
.s2-ranking-document .rank-content {
  border-color: #414146;
  background: linear-gradient(145deg, #272729, #202022);
}

.s2-ranking-document .rank-result-count {
  border-color: #55555b;
  background: #1b1b1d;
  color: #c9c8cc;
}

.s2-ranking-document .rank-row {
  border-bottom-color: #3a3a3e;
}

.s2-ranking-document .rank-row:hover {
  background: rgba(255,255,255,.032);
}

.s2-ranking-document .rank-avatar,
.s2-ranking-document .rank-position,
.s2-ranking-document .rank-score-symbol,
.s2-ranking-document .rank-meta-chip {
  background-color: #19191b;
  border-color: #48484d;
}

.s2-ranking-document .rank-guild-avatar,
.s2-ranking-document .rank-score-symbol {
  color: #b8b8be;
}

.s2-ranking-document .rank-score-copy strong {
  color: #dedde0;
}

.s2-ranking-document .rank-score-copy small,
.s2-ranking-document .rank-meta-chip,
.s2-ranking-document .rank-identity small {
  color: #929196;
}

.s2-ranking-document .rank-guild-chip svg {
  stroke: #b9b7bc;
}

.s2-ranking-document .rank-exp b,
.s2-ranking-document .rank-playtime b,
.s2-ranking-document .rank-master b {
  color: #c8c6ca;
}

/* Medal colours remain meaningful only for the first three places. */
.s2-ranking-document .rank-row.place-1 .rank-score-copy strong { color: #d9bc87; }
.s2-ranking-document .rank-row.place-2 .rank-score-copy strong { color: #d3d3d5; }
.s2-ranking-document .rank-row.place-3 .rank-score-copy strong { color: #d3aa8a; }

.s2-ranking-document .rank-footer {
  border-color: #414146;
  background: #202022;
  color: #8f8e93;
}

.s2-ranking-document .rank-pagination button {
  border-color: #49494f;
  background: #19191b;
  color: #d2d1d5;
}

.s2-ranking-document .rank-pagination button:hover:not(:disabled) {
  border-color: #a15b65;
  background: #302326;
}

.s2-ranking-document .rank-range {
  color: #c3c1c5 !important;
}

@media (max-width: 1100px) {
  html[data-active-view="ranking"] #inner-page-shell {
    background: radial-gradient(ellipse at 50% 0%, #29292b 0%, #1e1e20 43%, #171719 100%) !important;
  }

  html[data-active-view="ranking"] #inner-page-shell::before,
  html[data-active-view="ranking"] #inner-page-shell::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s2-ranking-document .rank-tabs button,
  .s2-ranking-document .rank-search-button,
  .s2-ranking-document .rank-pagination button {
    transition: none !important;
  }
}