/* Promotion and the hangar badge share the same hexagon and tier colors. */
#main-menu .pilot-emblem .em-outer { fill:color-mix(in srgb,var(--rank-color) 13%,transparent); stroke:var(--rank-color); }
#main-menu .pilot-emblem .em-inner { stroke:var(--rank-color); opacity:.4; }
#main-menu .pilot-emblem .em-chev, #main-menu .pilot-emblem b { color:var(--rank-color); stroke:var(--rank-color); }
#main-menu .pilot-title { color:var(--rank-color); }
#main-menu .pilot-bar b { background:var(--rank-color); }
#main-menu .rank-promotion {
  position:fixed; inset:0; box-sizing:border-box; width:100%; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:24px; overflow:hidden; border:0; color:var(--ui-text);
  background:radial-gradient(ellipse at 50% 46%,#183239ba 0%,#071219eb 65%,#040b10f7 100%);
  font-family:var(--ui-font);
}
#main-menu .rank-promotion[open] { display:grid; place-items:center; }
.rank-promotion::backdrop { background:#020a1055; backdrop-filter:blur(5px); }
.rank-promotion-content { position:relative; z-index:1; display:flex; align-items:center; flex-direction:column; text-align:center; width:100%; }
.rank-promotion-eyebrow { margin:0 0 10px; color:var(--ui-muted); font:12px var(--ui-mono); letter-spacing:.28em; }
#main-menu .rank-promotion h2 { margin:0 0 12px; font:900 clamp(40px,6vw,68px)/1 var(--ui-display); text-transform:uppercase; letter-spacing:.06em; }
.rank-promotion-emblem { position:relative; flex:none; width:clamp(150px,28vh,252px); aspect-ratio:64/72; color:var(--rank-from-color); animation:rank-tier-change .8s .65s both; }
.rank-promotion-emblem svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 20px color-mix(in srgb,currentColor 24%,transparent)); }
.rank-promotion-emblem .em-outer { fill:color-mix(in srgb,currentColor 9%,transparent); stroke:currentColor; stroke-width:1; }
.rank-promotion-emblem .em-inner { fill:none; stroke:currentColor; stroke-width:.35; opacity:.5; }
.rank-promotion-emblem .em-chev { fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.rank-promotion-emblem b { position:absolute; inset:24% 0 auto; font:900 clamp(66px,12vh,110px)/1 var(--ui-display); font-variant-numeric:tabular-nums; }
.rank-promotion-from { animation:rank-number-leave .45s .7s both; }
.rank-promotion-to { animation:rank-number-arrive .65s .8s both; }
#rank-promotion-result { margin:20px 0 0; color:var(--ui-muted); font:500 clamp(18px,3vw,24px)/1.3 var(--ui-font); }
#rank-promotion-result span[aria-hidden] { padding:0 14px; color:var(--rank-color); }
#rank-promotion-result strong { color:var(--ui-text); }
.rank-promotion-tier { margin:12px 0 0; color:var(--rank-color); font:700 18px/1.3 var(--ui-font); letter-spacing:.1em; }
.rank-promotion-tier span { color:var(--ui-muted); font-size:13px; }
.rank-promotion-milestone { margin:10px 0 24px; color:var(--ui-muted); font:15px/1.3 var(--ui-font); }
#main-menu #rank-promotion-continue { min-height:52px; width:240px; max-width:100%; border:1px solid var(--rank-color); border-radius:2px; background:color-mix(in srgb,var(--rank-color) 16%,#102128); color:var(--ui-text); cursor:pointer; font:900 26px var(--ui-display); text-transform:uppercase; letter-spacing:.07em; }
#main-menu #rank-promotion-continue:hover { background:color-mix(in srgb,var(--rank-color) 30%,#102128); }
.rank-promotion-rays { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--rank-color) 15%,transparent),transparent 60%); animation:rank-promotion-flash 1.3s .7s both; }
.rank-promotion-chevrons { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.rank-promotion-chevrons span { position:absolute; bottom:-80px; width:44px; height:44px; border-top:3px solid var(--rank-color); border-left:3px solid var(--rank-color); opacity:0; transform:rotate(45deg); animation:rank-chevron-rise 2s calc(.25s + var(--i)*.16s) both; }
.rank-promotion-chevrons span:nth-child(even) { width:26px; height:26px; }
.rank-promotion-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@keyframes rank-tier-change { from { color:var(--rank-from-color); transform:scale(.96); } 60% { transform:scale(1.06); } to { color:var(--rank-color); transform:scale(1); } }
@keyframes rank-number-leave { to { opacity:0; transform:translateY(-35px); filter:blur(4px); } }
@keyframes rank-number-arrive { from { opacity:0; transform:translateY(45px) scale(.8); } 65% { opacity:1; transform:translateY(-4px) scale(1.04); } to { opacity:1; transform:none; } }
@keyframes rank-promotion-flash { from,to { opacity:0; } 30% { opacity:1; } }
@keyframes rank-chevron-rise { 20% { opacity:.45; } to { opacity:0; bottom:110%; } }
@media(max-height:550px) {
  #main-menu .rank-promotion { padding:12px; }
  .rank-promotion-eyebrow { margin-bottom:4px; font-size:10px; }
  #main-menu .rank-promotion h2 { margin-bottom:6px; font-size:36px; }
  .rank-promotion-emblem { width:112px; }
  .rank-promotion-emblem b { font-size:50px; }
  #rank-promotion-result { margin-top:8px; font-size:18px; }
  .rank-promotion-tier { margin-top:6px; font-size:15px; }
  .rank-promotion-milestone { margin:6px 0 12px; font-size:13px; }
  #main-menu #rank-promotion-continue { min-height:44px; font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .rank-promotion-emblem { animation:none; color:var(--rank-color); }
  .rank-promotion-from,.rank-promotion-rays,.rank-promotion-chevrons { display:none; }
  .rank-promotion-to { animation:none; }
}