/* Movement is out of flow: keep existing rank badges, cell widths and row height. */
.rank-movement {
  position:relative; display:inline-block; width:100%; vertical-align:baseline; padding:0;
  border:0; border-radius:4px; background:none; color:inherit; font:inherit;
  line-height:inherit; text-align:inherit; cursor:pointer;
}
.rank-movement-indicator {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; width:12px; height:16px;
  pointer-events:none;
}
.rank-movement-indicator.is-up { color:#80c6b0; }
.rank-movement-indicator.is-down { color:#d995a3; }
.rank-movement-chevron { display:block; flex:none; width:12px; height:16px; }
.is-down .rank-movement-chevron { transform:rotate(180deg); }
.rank-movement:focus-visible { outline:2px solid var(--accent,#a99aff); outline-offset:3px; }
.rank-movement-detail {
  position:fixed; inset:auto; margin:0; max-width:min(300px,calc(100vw - 16px));
  padding:10px 12px; border:1px solid var(--line,#465472); border-radius:10px;
  background:var(--surface,#182238); color:var(--text,#edf2ff);
  font-family:inherit; font-size:13px; line-height:1.5; font-weight:400;
  box-shadow:0 8px 28px #0004; overflow-wrap:anywhere;
}
@media(forced-colors:active) {
  .rank-movement-indicator.is-up,.rank-movement-indicator.is-down { color:ButtonText; }
  .rank-movement-detail { background:Canvas; color:CanvasText; border-color:CanvasText; }
}