/* Feature typography roles; colors and fonts use the existing game theme. */
.top-traders{
  --top-text:400 14px/1.5 var(--sans);
  --top-small:400 12px/1.45 var(--sans);
  --top-number:600 13px/1.4 var(--mono);
  --top-weight:600;
  width:calc(100% - 24px);max-width:430px;max-height:calc(100dvh - 24px);
  padding:0;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);background:var(--surface);overflow:hidden;
  font:var(--top-text);
}
.top-traders[open]{display:flex;flex-direction:column}
.top-traders::backdrop{background:color-mix(in srgb,var(--chrome) 55%,transparent)}
.top-traders .fills-head{flex:none;padding:14px 16px;border-bottom:1px solid var(--line)}
.top-traders .fills-head h2{margin:0}
.top-traders .x{min-width:44px;min-height:44px;flex:none}
.top-traders-body{overflow-y:auto;min-height:0;padding:0 16px 16px;overscroll-behavior:contain}
.top-traders-periods{display:flex;gap:8px;padding:14px 0}
.top-traders-periods button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.top-traders-periods button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);font-weight:var(--top-weight)}
.top-traders p{font:var(--top-small);color:var(--dim)}
.top-traders ol{list-style:none;margin:0;padding:0}
.top-trader-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px 4px;border-bottom:1px solid var(--line-soft)}
.top-trader-row .num{font:var(--top-number);white-space:nowrap}
.top-trader-rank{color:var(--dim)}
.top-trader-detail{min-width:0}
.top-trader-detail strong{display:block;overflow-wrap:anywhere;font-weight:var(--top-weight)}
.top-trader-games{display:block;font:var(--top-small);color:var(--dim)}
.top-trader-row.is-you{background:var(--surface-2);border-radius:var(--r-sm)}
.top-traders-personal{margin:16px 0}
.top-traders-personal h3{font:var(--top-text);font-weight:var(--top-weight);margin:0 0 4px}
.top-trader-unranked{padding:12px;background:var(--surface-2);border-radius:var(--r-sm)}
.top-traders details{border-top:1px solid var(--line);padding-top:8px}
.top-traders summary{min-height:44px;padding:10px 0;cursor:pointer}
.top-traders details p{margin:8px 0}
.top-traders .top-traders-note{margin:16px 0 0}