.rank-promotion-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; overflow: auto; }
.rank-promotion-dialog .dialog-heading { gap: 12px; }
.rank-promotion-dialog h2 { font-size: 20px; }
.rank-promotion-route { margin: 14px 0 0; color: var(--muted); text-align: center; font-size: 12px; overflow-wrap: anywhere; }
.rank-promotion-stage { position: relative; width: min(300px, 100%); height: 208px; margin: 0 auto; }
.rank-promotion-stage .rank-insignia { --insignia-width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.rank-promotion-stage .rank-insignia__board { overflow: visible; }
.rank-promotion-stage img { transform-origin: center; }
.rank-promotion-caption { text-align: center; margin-top: -4px; }
.rank-promotion-caption strong { display: block; font-size: 24px; font-weight: 600; line-height: 1.4; }
.rank-promotion-caption span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.rank-promotion-experience { margin: 16px 0 6px; text-align: center; font-size: 13px; color: var(--green); font-variant-numeric: tabular-nums; }
.rank-promotion-phase { min-height: 20px; margin: 0 0 20px; text-align: center; font-size: 12px; color: var(--muted); }
.rank-promotion-actions { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.rank-promotion-actions .primary-button { margin-left: auto; min-width: 106px; justify-content: center; }
.rank-table .rank-preview-button { width: 100%; padding: 6px 0; text-align: left; border-radius: 4px; }
.rank-table .rank-preview-button:hover { background: var(--green-soft); }
.rank-preview-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.rank-preview-button > svg { flex: 0 0 14px; width: 14px; height: 14px; margin-left: auto; color: var(--muted); }
@media (max-width: 650px) {
  .rank-promotion-dialog { padding: 20px; }
  .rank-promotion-stage { width: min(260px, 100%); height: 190px; }
  .rank-table .rank-preview-button { position: relative; padding-right: 18px; }
  .rank-preview-button > svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}