.ranking-controls{display:flex;align-items:end;flex-wrap:wrap;gap:14px;margin:18px 0;padding:16px;background:linear-gradient(110deg,#fff0cf,#ffe8f0);border:2px solid var(--line);border-radius:18px}
.ranking-controls label{display:grid;gap:7px;min-width:190px;flex:1;color:var(--muted)}
.ranking-controls select{width:100%;min-width:0}.ranking-controls button{flex:none}
.ranking-controls [hidden]{display:none!important}
.ranking-status{font-size:14px;color:var(--muted);min-height:1.5em}
.ranking-position{font-size:22px;color:#a05274;font-weight:bold}
.ranking-breakdown{display:block;white-space:normal;min-width:230px;max-width:360px;margin-top:6px;font-size:12px;color:var(--muted)}
@media(max-width:600px){.ranking-controls{padding:12px;gap:10px}.ranking-controls label{min-width:0;flex-basis:100%}.ranking-controls button{width:100%}.ranking-position{font-size:18px}}
/* osu!-style compact board: each player is one rounded bar, numbers line up, top three get a podium accent. */
#rankings-panel .graph-heading{padding-bottom:14px;border-bottom:1px solid var(--line)}
#rankings-panel .ranking-controls{gap:10px;margin:14px 0;padding:10px 12px;border-width:1px;border-radius:14px}
#rankings-panel .ranking-controls label{min-width:160px;gap:4px;font-size:13px}
#rankings-panel .ranking-controls>input{flex:1 1 200px;width:auto}
#rankings-panel .ranking-controls>select{flex:0 1 170px;width:auto}
#rankings-panel table{border-collapse:separate;border-spacing:0 4px;margin:6px 0}
html[data-theme] #rankings-panel thead th,#rankings-panel thead th{padding:4px 12px;border:0;font-size:12px;letter-spacing:.04em;color:var(--muted)}
html[data-theme] #rankings-panel tbody tr,#rankings-panel tbody tr{background:var(--surface,#fffef8);transition:background-color .12s}
html[data-theme] #rankings-panel tbody tr:hover,#rankings-panel tbody tr:hover{background:var(--soft,#fff0cf)}
html[data-theme] #rankings-panel tbody td,#rankings-panel tbody td{padding:7px 12px;border:0;vertical-align:middle;font-variant-numeric:tabular-nums}
#rankings-panel tbody td:first-child{border-radius:12px 0 0 12px;box-shadow:inset 4px 0 0 transparent}
#rankings-panel tbody td:last-child{border-radius:0 12px 12px 0}
#rankings-panel tbody td:only-child{border-radius:12px;padding:18px;text-align:center;color:var(--muted)}
#rankings-panel .ranking-position{width:4.5em;font-size:17px}
#rankings-panel tr[data-podium="1"] td:first-child{box-shadow:inset 4px 0 0 #e5b53b}
#rankings-panel tr[data-podium="2"] td:first-child{box-shadow:inset 4px 0 0 #a9b4c4}
#rankings-panel tr[data-podium="3"] td:first-child{box-shadow:inset 4px 0 0 #cf8a5a}
html[data-theme] #rankings-panel tr[data-podium="1"] .ranking-position{color:#c18d12}
html[data-theme=night] #rankings-panel tr[data-podium="1"] .ranking-position{color:#f3cd6a}
html[data-theme] #rankings-panel tbody td button,#rankings-panel tbody td button{margin:0;padding:2px 0;border:0;border-radius:4px;background:none;box-shadow:none;color:var(--text);font-size:16px;text-align:left;white-space:normal;overflow-wrap:anywhere;transform:none}
#rankings-panel tbody td button:hover{color:var(--accent,#97446b);text-decoration:underline;text-underline-offset:3px}
#rankings-panel .ranking-code,#rankings-panel tbody td:last-child{font-size:13px;color:var(--muted)}
#rankings-panel tbody td strong{font-size:16px}
#rankings-panel .ranking-breakdown{margin-top:2px}
@media(max-width:600px){html[data-theme] #rankings-panel tbody td,#rankings-panel tbody td{padding:6px 8px}#rankings-panel .ranking-position{width:auto;font-size:15px}#rankings-panel tbody td:nth-child(2){min-width:8em}#rankings-panel table:has(.ranking-code) :is(th,td):nth-child(3){display:none}#rankings-panel thead th{padding:4px 8px}}
@media(prefers-reduced-motion:reduce){html[data-theme] #rankings-panel tbody tr{transition:none}}