.rank-content { display:grid; gap:16px }
.rank-mode { display:flex; width:fit-content; max-width:100%; gap:5px; padding:4px; border:1px solid var(--border); border-radius:11px; background:#191a16 }
.rank-mode .btn { min-height:44px; min-width:104px; border-color:transparent; background:transparent; color:var(--muted) }
.rank-mode .btn[aria-pressed="true"] { border-color:#806541; color:#f0d5a3; background:#3a2f21 }
.rank-mode .btn:hover { color:var(--fg); border-color:#6e5a3b }
.rank-board-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px 22px; flex-wrap:wrap }
.rank-board-head h2 { margin:0 0 5px }
.rank-meta { margin:0; color:var(--muted); font-size:13px }
#rank-source-meta span { display:block; margin-top:3px }
.rank-leader { display:flex; align-items:center; gap:9px; padding:8px 11px; background:#25291f; border:1px solid #434833; border-radius:9px }
.rank-leader div > span { display:block; color:var(--muted); font-size:12px }
.rank-leader strong { color:#f0dc9e; font-size:21px; line-height:1.15; font-variant-numeric:tabular-nums }
.rank-leader strong small { font-size:11px; font-weight:600 }
.rank-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px 12px; margin:14px 0 8px }
.rank-controls .field select { min-height:44px }
.rank-options { display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; margin-bottom:10px }
.rank-experiment { min-height:44px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding-inline:2px 7px }
.rank-options .btn { min-height:44px }
#rank-count { margin-bottom:8px }
.rank-table { width:100%; table-layout:fixed; border-collapse:collapse; text-align:left }
.rank-table :is(th,td) { padding:9px 7px; border-bottom:1px solid var(--border) }
.rank-table thead th { font-weight:600; font-size:12px; color:var(--muted) }
.rank-table thead th:first-child { width:54px }
.rank-table thead th:nth-child(3) { width:24% }
.rank-table thead th:last-child { width:56px }
.rank-table :is(th,td):last-child { text-align:right }
.rank-place,.rank-value { font-variant-numeric:tabular-nums }
.rank-place { color:var(--muted) }
.rank-value { font-weight:660 }
.rank-meter { max-width:190px; height:4px; background:#3b3b2f; margin-top:4px; border-radius:3px; overflow:hidden }
.rank-meter span { display:block; height:100%; background:#b79859; border-radius:3px }
.rank-spec { display:flex; align-items:center; gap:8px; min-width:0 }
.rank-spec > span:last-child { min-width:0; overflow-wrap:anywhere }
.rank-spec strong,.rank-spec small { display:block }
.rank-spec small { color:var(--muted); font-size:11px; line-height:1.45; font-weight:500 }
.rank-class-icon { display:grid; place-items:center; width:32px; height:32px; border:1px solid #4d4635; border-radius:8px; flex:none; color:var(--rank-color,var(--gold)); background:#27261d }
.rank-tier { display:inline-grid; place-items:center; min-width:25px; min-height:24px; padding:2px 5px; font-weight:750; color:#cfcbc0; background:#34342c; border-radius:5px }
.rank-tier[data-tier="S"] { color:#ffcb93; background:#50331f }
.rank-tier[data-tier="A"] { color:#efd4a3; background:#453727 }
.rank-tier[data-tier="B"] { color:#e0d9d3; background:#343238 }
.rank-mine { background:#352f22 }
.rank-method { margin-top:14px; padding:0 11px; border:1px solid var(--border); background:#1b1c17; border-radius:8px }
.rank-method summary { min-height:44px; padding-block:10px; color:#ead4ad }
.rank-method summary svg { margin-inline:4px 5px; vertical-align:-3px }
#rank-method-body { padding:0 5px 12px; color:var(--muted); font-size:13px }
#rank-method-body ul { padding-inline-start:19px; margin:7px 0 }
#rank-method-body li + li { margin-top:4px }
#rank-method-body p { margin:7px 0 }
.rank-combat-controls { grid-template-columns:minmax(0,2fr) minmax(0,1fr) }
.rank-combat-summary { margin-top:12px; padding:14px; border:1px solid #554832; border-radius:10px; background:#292419 }
.rank-combat-summary[data-status="ready"] { background:#24291e; border-color:#505c3a }
.rank-combat-summary[data-status="stale"], .rank-combat-summary[data-status="unavailable"] { background:#2c2421; border-color:#65453a }
.rank-status-badge { display:inline-block; padding:2px 7px; border:1px solid currentColor; border-radius:5px; font-size:11px; font-weight:700; color:#e6c491 }
.rank-combat-summary[data-status="ready"] .rank-status-badge { color:#c5d8a2 }
.rank-combat-summary[data-status="stale"] .rank-status-badge,.rank-combat-summary[data-status="unavailable"] .rank-status-badge { color:#e8aaa1 }
.rank-combat-summary h3 { margin:8px 0 4px; font-size:16px }
.rank-combat-summary p { margin:0; color:var(--muted); overflow-wrap:anywhere }
.rank-combat-summary .rank-provider-note { margin-top:5px }
.rank-combat-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:13px 0 }
.rank-combat-facts > div { min-width:0; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:#1b1c17 }
.rank-combat-facts dt { color:var(--muted); font-size:12px }
.rank-combat-facts dd { margin:3px 0 0; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.rank-combat-facts .rank-fact-wide { grid-column:1/-1 }
.rank-combat-count,.rank-combat-citation { margin-top:11px }
.rank-combat-message:not(:empty) { margin:9px 0 0 }
.rank-combat-empty { margin:12px 0 0; color:var(--muted); padding:11px; border:1px dashed var(--border); border-radius:8px }
.rank-combat-method > div { padding:0 5px 11px; color:var(--muted); font-size:13px }
.rank-combat-method p { margin:6px 0 }
.rank-combat-table thead th:last-child { width:62px }
@media(max-width:980px) {
  .rank-controls { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .rank-combat-facts { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:490px) {
  .rank-table :is(th,td) { padding-inline:4px }
  .rank-table thead th:first-child { width:36px }
  .rank-table thead th:last-child { width:36px }
  .rank-class-icon { width:25px; height:25px; border-radius:6px }
  .rank-spec { gap:6px }
  .rank-class-icon svg { width:15px; height:15px }
  .rank-spec strong { font-size:13px }
  .rank-controls { column-gap:8px }
  .rank-combat-controls { grid-template-columns:minmax(0,1fr) }
  .rank-combat-table thead th:last-child { width:40px }
  .rank-combat-table .rank-value { font-size:12px; overflow-wrap:anywhere }
  .rank-combat-facts > div { padding:7px }
}