.ranking-menu-icon {
width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 14px;
}

.ranking-panel h1 {
margin: 0;
  font-size: clamp(26px, 4vw, 34px);
}

.ranking-panel .muted {
margin-top: 8px;
}

.ranking-form {
margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.ranking-form label {
display: grid;
  gap: 6px;
}

.ranking-form label span {
color: #8a98af;
  font-size: 12px;
  font-weight: 700;
}

.ranking-form select, .ranking-form input {
height: 38px;
  border-radius: 10px;
  border: 1px solid #3a5174;
  background: rgba(11, 19, 33, 0.9);
  color: #e9f2ff;
  padding: 0 10px;
  font-size: 13px;
}

.ranking-form select:focus, .ranking-form input:focus {
outline: 2px solid rgba(120, 185, 255, 0.22);
  border-color: #69b2ff;
}

.ranking-form button {
height: 38px;
  border-radius: 10px;
  border: 1px solid #2ca488;
  background: linear-gradient(140deg, #2ed395, #28a977);
  color: #e9fff7;
  font-size: 13px;
  font-weight: 800;
}

.ranking-table-wrap {
width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ranking-table {
width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.ranking-table th, .ranking-table td {
border-bottom: 1px solid #2c3a52;
  text-align: left;
  padding: 10px 8px;
  font-size: 13px;
  vertical-align: top;
}

.ranking-table th {
white-space: nowrap;
  color: #91a7c7;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.03);
}

.ranking-table td {
color: #dce8ff;
}

.ranking-table tbody tr.is-target td {
background: color-mix(in srgb, var(--ui-primary) 18%, transparent);
}

.ranking-col-rank {
width: 78px;
}

.ranking-rank-badge {
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(132, 163, 204, 0.24);
  color: #d6e8ff;
}

.ranking-rank-badge.is-top {
background: linear-gradient(140deg, #f6c34f, #f0a73a);
  color: #402600;
}

.ranking-char-thumb-link {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #3a4f72;
  background: rgba(11, 18, 31, 0.9);
}

.ranking-char-thumb {
width: 42px;
  height: 42px;
  object-fit: contain;
}

.ranking-char-cell {
display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ranking-char-meta {
display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ranking-world-mini {
width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 16px;
}

.ranking-world {
display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ranking-world-icon {
width: 18px;
  height: 18px;
  object-fit: contain;
}

.ranking-guild {
display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ranking-guild-mark {
width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.ranking-char-link {
color: #9cc8ff;
  font-weight: 700;
  text-decoration: none;
}

.ranking-char-link:hover, .ranking-char-link:focus-visible {
text-decoration: underline;
  outline: none;
}

.ranking-table td.is-num {
text-align: left;
  font-variant-numeric: tabular-nums;
}

.ranking-value-highlight {
color: #4ace89 !important;
  font-weight: 800;
}

.ranking-grade-cell {
display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ranking-grade-icon {
width: 20px;
  height: 20px;
  object-fit: contain;
}

.ranking-icon {
width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.ranking-pagination {
margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ranking-page-buttons {
display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ranking-page-ellipsis {
color: #8ea2bf;
  font-size: 12px;
  font-weight: 700;
  padding: 0 2px;
}

.ranking-page-buttons button {
min-width: 32px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid #3a5174;
  background: rgba(11, 19, 33, 0.9);
  color: #dce8ff;
  font-size: 12px;
  font-weight: 700;
}

.ranking-page-buttons button.is-active {
border-color: #61c5ff;
  color: #d8f4ff;
  background: rgba(74, 167, 255, 0.24);
}

.ranking-page-jump {
display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ranking-page-jump label {
font-size: 12px;
  color: #8ea2bf;
  font-weight: 700;
}

.ranking-page-jump input {
width: 88px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid #3a5174;
  background: rgba(11, 19, 33, 0.9);
  color: #dce8ff;
  padding: 0 8px;
}

.ranking-page-jump button {
height: 30px;
  border-radius: 7px;
  border: 1px solid #2ca488;
  background: linear-gradient(140deg, #2ed395, #28a977);
  color: #e9fff7;
  font-size: 12px;
  font-weight: 800;
}

.ranking-title {
display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ranking-title-icon {
width: 16px;
  height: 16px;
  object-fit: contain;
}

@media (max-width: 980px) {
.ranking-form {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 620px) {
.ranking-form {
grid-template-columns: 1fr;
}

.ranking-table {
min-width: 560px;
}

.ranking-table th, .ranking-table td {
padding: 8px 6px;
    font-size: 12px;
}

.ranking-char-thumb-link {
width: 36px;
    height: 36px;
}

.ranking-char-thumb {
width: 32px;
    height: 32px;
}

.ranking-pagination {
align-items: stretch;
}

.ranking-page-jump {
width: 100%;
    justify-content: flex-start;
}
}

.ranking-form label span {
color: var(--ui-muted) !important;
}

.ranking-form select, .ranking-form input {
border-color: var(--ui-line) !important;
  background: var(--ui-panel-soft) !important;
  color: var(--ui-text) !important;
}

.ranking-form button {
border-color: color-mix(in srgb, var(--ui-primary) 80%, #1c78ff) !important;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ui-primary) 78%, #2fa5ff), color-mix(in srgb, var(--ui-primary) 92%, #1d67ea)) !important;
}

.ranking-table th, .ranking-table td {
border-color: var(--ui-line) !important;
}

.ranking-table th {
color: var(--ui-muted) !important;
}

.ranking-table td {
color: var(--ui-text) !important;
}

.ranking-char-link {
color: color-mix(in srgb, var(--ui-primary) 70%, var(--ui-text)) !important;
}

.ranking-rank-badge {
background: color-mix(in srgb, var(--ui-primary) 24%, var(--ui-panel)) !important;
  color: var(--ui-text) !important;
}

.ranking-char-thumb-link {
border-color: var(--ui-line) !important;
  background: var(--ui-panel-soft) !important;
}

.ranking-page-buttons button, .ranking-page-jump input {
border-color: var(--ui-line) !important;
  background: var(--ui-panel-soft) !important;
  color: var(--ui-text) !important;
}

.ranking-page-buttons button.is-active {
border-color: color-mix(in srgb, var(--ui-primary) 76%, var(--ui-line)) !important;
  background: color-mix(in srgb, var(--ui-primary) 22%, var(--ui-panel)) !important;
  color: var(--ui-text) !important;
}

.ranking-page-jump label {
color: var(--ui-muted) !important;
}

.ranking-page-ellipsis {
color: var(--ui-muted) !important;
}

.ranking-page-jump button {
border-color: color-mix(in srgb, var(--ui-primary) 80%, #1c78ff) !important;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ui-primary) 78%, #2fa5ff), color-mix(in srgb, var(--ui-primary) 92%, #1d67ea)) !important;
}

.ranking-char-thumb {
object-fit: contain !important;
  image-rendering: auto;
}

.ranking-char-thumb-link {
background: var(--ui-panel-soft) !important;
  border-color: var(--ui-line) !important;
}

.guild-master-link .ranking-char-link {
color: color-mix(in srgb, var(--ui-primary) 72%, var(--ui-text));
  font-weight: 900;
}

@media (max-width: 1024px) {
.ranking-form {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 820px) {
.ranking-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 620px) {
.ranking-form {
grid-template-columns: 1fr;
}

.ranking-table {
min-width: 680px;
}
}

@media (max-width: 620px) {
body[data-page="ranking"] .topbar, body[data-page="ranking"] .topbar__left, body[data-page="ranking"] .topbar__nav, body[data-page="ranking"] .topbar__dropdown {
overflow: visible;
}

body[data-page="ranking"] .topbar__dropdown-menu {
left: 0 !important;
    right: auto !important;
    min-width: min(88vw, 320px) !important;
    max-width: calc(100vw - 24px);
    z-index: 1200;
}

body[data-page="ranking"] .ranking-form {
gap: 6px;
}

body[data-page="ranking"] .ranking-form label {
gap: 4px;
}

body[data-page="ranking"] .ranking-form select, body[data-page="ranking"] .ranking-form input, body[data-page="ranking"] .ranking-form button {
height: 34px;
    font-size: 12px;
}

body[data-page="ranking"] .ranking-table {
min-width: 100%;
    table-layout: fixed;
}

body[data-page="ranking"] .ranking-table th, body[data-page="ranking"] .ranking-table td {
padding: 5px 4px;
    font-size: 11px;
    line-height: 1.2;
}

body[data-page="ranking"] .ranking-table th {
white-space: normal;
}

body[data-page="ranking"] .ranking-table td {
overflow-wrap: anywhere;
    word-break: break-word;
}

body[data-page="ranking"] .ranking-table th:nth-child(1), body[data-page="ranking"] .ranking-table td:nth-child(1) {
width: 38px;
}

body[data-page="ranking"] .ranking-table th:nth-child(2), body[data-page="ranking"] .ranking-table td:nth-child(2) {
width: 34%;
}

body[data-page="ranking"] .ranking-char-cell {
gap: 4px;
}

body[data-page="ranking"] .ranking-char-meta, body[data-page="ranking"] .ranking-world, body[data-page="ranking"] .ranking-guild, body[data-page="ranking"] .ranking-grade-cell {
gap: 3px;
}

body[data-page="ranking"] .ranking-char-thumb-link {
width: 28px;
    height: 28px;
    border-radius: 6px;
}

body[data-page="ranking"] .ranking-char-thumb {
width: 24px;
    height: 24px;
}

body[data-page="ranking"] .ranking-world-mini {
width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

body[data-page="ranking"] .ranking-world-icon, body[data-page="ranking"] .ranking-guild-mark, body[data-page="ranking"] .ranking-grade-icon {
width: 14px;
    height: 14px;
}

body[data-page="ranking"] .ranking-rank-badge {
min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: 10px;
}

body[data-page="ranking"] .ranking-pagination {
margin-top: 10px;
    gap: 6px;
}

body[data-page="ranking"] .ranking-page-buttons {
gap: 4px;
}

body[data-page="ranking"] .ranking-page-buttons button {
min-width: 26px;
    height: 24px;
    font-size: 11px;
}

body[data-page="ranking"] .ranking-page-jump {
gap: 4px;
}

body[data-page="ranking"] .ranking-page-jump label {
font-size: 11px;
}

body[data-page="ranking"] .ranking-page-jump input, body[data-page="ranking"] .ranking-page-jump button {
height: 24px;
    font-size: 11px;
}
}