/* Character.swf's original medallion and amber glass. Both square layers
   retain their aspect ratio; only the numeric rank is live text. */
body[data-view=builder] .virtue-profile{grid-template-columns:160px minmax(0,1fr);align-items:center}
body[data-view=builder] .virtue-profile .envoy-rank-control{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:0}
body[data-view=builder] .envoy-rank-control>span:first-child{font:.8rem var(--heading);color:var(--ink,var(--text))}
body[data-view=builder] .envoy-rank-medallion{
  display:grid;place-items:center;width:96px;height:96px;flex:none;
  background:url('/assets/ui/envoy-rank-glass.webp') center/90% 90% no-repeat,
    url('/assets/ui/envoy-rank-medallion.webp') center/135% 135% no-repeat;
}
body[data-view=builder] .virtue-profile select.envoy-rank-value,
body[data-view=builder] .virtue-profile select.envoy-rank-value:is(:hover,:focus-visible){
  appearance:none;width:68%;height:68%;margin:0;padding:0;border:0;border-radius:50%;
  background:transparent;box-shadow:none;color:#e5a743;
  font:400 2.58rem/1 var(--display);font-variant-numeric:lining-nums tabular-nums;
  text-align:center;text-align-last:center;cursor:pointer;text-shadow:0 2px 3px #30140a66;
}
body[data-view=builder] .virtue-profile select.envoy-rank-value:focus-visible{outline:2px solid #f0c264;outline-offset:3px}
body[data-view=builder] .envoy-rank-value option{font:1rem var(--body);color:#ead3a1;background:#30231c}
@media(max-width:760px){
  body[data-view=builder] .virtue-profile{grid-template-columns:136px minmax(0,1fr);gap:.6rem}
  body[data-view=builder] .envoy-rank-medallion{width:81.6px;height:81.6px}
  body[data-view=builder] .virtue-profile select.envoy-rank-value,
  body[data-view=builder] .virtue-profile select.envoy-rank-value:is(:hover,:focus-visible){font-size:2.19rem}
}