/* Full-screen ascension, scoped away from treasure and normal menu dialogs. */
#promotion-dialog.rankup-screen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;box-sizing:border-box;color:#fff6d7;background:radial-gradient(ellipse at 50% 42%,#4c3377 0%,#25244c 42%,#101426 100%);font-family:'Trebuchet MS',sans-serif;text-align:center;isolation:isolate}
#promotion-dialog.rankup-screen::backdrop{background:#101426;backdrop-filter:none}
.rankup-fx,.rankup-rays,.rankup-vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.rankup-fx{z-index:3}.rankup-rays{background:repeating-conic-gradient(from 10deg at 50% 42%,#b9a5ff0b 0deg 10deg,transparent 10deg 24deg);transform:scale(1.5);animation:rankup-rays 60s linear infinite}.rankup-vignette{box-shadow:inset 0 0 12vw #100d2b99;z-index:4}
.rankup-content{position:relative;z-index:5;box-sizing:border-box;height:100%;max-width:1100px;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.4vh,15px);padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.rankup-content header{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.rankup-kicker{font-weight:900;font-size:clamp(18px,3vh,30px);letter-spacing:.2em;color:var(--rank-light);text-shadow:0 3px #17132e}.rankup-queue{font-size:clamp(11px,1.7vh,15px);color:#cfc8ea}
.rankup-stage{position:relative;display:grid;place-items:center;width:clamp(190px,36vh,340px);height:clamp(170px,33vh,300px);flex-shrink:0}
#promotion-dialog.rankup-screen #promotion-icon{position:relative;display:grid;place-items:center;margin:0;width:74%;height:90%;font-size:initial;z-index:3;filter:drop-shadow(0 12px 5px #080d27aa) drop-shadow(0 0 18px #b8b4fa66)}
#promotion-dialog.rankup-screen #promotion-icon img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;animation:none}
.rankup-previous{position:absolute;inset:12%;display:grid;place-items:center;z-index:2}.rankup-previous img{width:80%;height:80%;object-fit:contain;filter:grayscale(.6);opacity:.65}
.rankup-orbit{position:absolute;inset:3%;border:1px solid var(--rank-light);border-radius:50%;opacity:.3;transform:rotateX(50deg) rotateZ(-20deg)}.orbit-two{inset:13% -6%;border-style:dashed;transform:rotateX(48deg) rotateZ(35deg);animation:rankup-orbit 14s linear infinite}
.rankup-impact{position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(ellipse,#feeec633,var(--rank-light) 3%,#b4a0ff22 24%,transparent 62%);opacity:0;pointer-events:none}
.rankup-laurels{position:absolute;width:120%;height:115%;color:var(--rank-light);opacity:.6;pointer-events:none}
#promotion-dialog.rankup-screen h2{font-size:clamp(26px,6vh,58px);line-height:1.04;letter-spacing:-.025em;margin:0;max-width:min(88vw,900px);overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 4px #14142d,0 0 30px #cab1ff33}
.rankup-title{display:flex;flex-direction:column;align-items:center;gap:9px;flex-shrink:1;min-height:0}#promotion-dialog.rankup-screen #promotion-text{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0;color:#dbd3ed;font-size:13px;line-height:1.2}.rankup-value{font-size:clamp(20px,3.3vh,30px);font-weight:900;color:var(--rank-light);font-variant-numeric:tabular-nums}.rankup-gain{color:#9af7f1;font-size:18px}
.rankup-trail{display:flex;align-items:center;gap:6px;font-size:12px;color:#d7cee8}.rankup-trail img{width:30px;height:30px}.rankup-unlock{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #ffeea577;border-radius:12px;background:#f6d38415;color:#ffe7a6;font-size:clamp(11px,2vh,16px)}.rankup-unlock svg{width:23px;height:23px}
.rankup-content footer{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:8px;flex-shrink:0}
#promotion-dialog.rankup-screen button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 24px;border:2px solid #fde8b2;border-bottom:6px solid #9d8951;border-radius:17px;background:linear-gradient(#fcde90,#f0cc6b);color:#373029;font:900 clamp(15px,2.4vh,21px) 'Trebuchet MS',sans-serif;box-shadow:0 5px #11172c;cursor:pointer;transition:transform .15s,filter .15s;touch-action:manipulation}#promotion-dialog.rankup-screen button:hover{filter:brightness(1.1);transform:translateY(-2px)}#promotion-dialog.rankup-screen button:active{transform:translateY(3px)}#promotion-dialog.rankup-screen button:focus-visible{outline:3px solid white;outline-offset:5px}#promotion-dialog.rankup-screen button svg{width:24px;height:24px;flex-shrink:0}
#promotion-dialog.rankup-screen #promotion-rewards{background:linear-gradient(#69548c,#403958);border-color:#bda4e6;border-bottom-color:#29223e;color:#f3e9ff}
#promotion-dialog.rankup-screen [hidden]{display:none!important}
.rankup-screen[data-phase="charging"] #promotion-icon{opacity:0;transform:scale(.3) rotate(-24deg)}.rankup-screen[data-phase="charging"] .rankup-previous{animation:rankup-gather 1.1s ease-in both}.rankup-screen[data-phase="charging"] .rankup-title{opacity:0;transform:translateY(18px)}.rankup-screen[data-phase="charging"] .rankup-laurels{opacity:0}
.rankup-screen:not([data-phase="charging"]) .rankup-previous{opacity:0;transform:scale(1.7);transition:opacity .25s,transform .5s}.rankup-screen[data-phase="revealing"] #promotion-icon{animation:rankup-badge .9s cubic-bezier(.16,.8,.2,1.2) both}.rankup-screen:not([data-phase="charging"]) .rankup-title{transition:opacity .4s,transform .5s}.rankup-screen[data-phase="revealing"] .rankup-impact{animation:rankup-impact 1.2s ease-out both}.rankup-screen[data-phase="crowned"] #promotion-icon{animation:rankup-float 3s ease-in-out infinite alternate}
@keyframes rankup-badge{0%{opacity:0;transform:scale(.25) rotate(-18deg)}65%{opacity:1;transform:scale(1.14) rotate(3deg)}100%{transform:scale(1) rotate(0)}}@keyframes rankup-gather{to{transform:scale(.3) rotate(20deg);opacity:0}}@keyframes rankup-impact{0%{opacity:.22;transform:scale(.5)}50%{opacity:.14}100%{opacity:0;transform:scale(1.65)}}@keyframes rankup-float{to{transform:translateY(-5px) rotate(1deg)}}@keyframes rankup-rays{to{transform:scale(1.5) rotate(360deg)}}@keyframes rankup-orbit{to{transform:rotateX(48deg) rotateZ(395deg)}}
html[data-motion="gentle"] .rankup-screen *,html[data-motion="gentle"] .rankup-screen *::before{animation:none!important;transition:none!important}
#promotion-dialog.rankup-screen{overflow:clip}
/* Rotate inside a clipped layer so autofocus cannot scroll toward decorative overflow. */
.rankup-rays{overflow:hidden;transform:none;animation:none;background:none}
.rankup-rays::before{content:"";position:absolute;inset:-65%;background:repeating-conic-gradient(from 10deg at 50% 47%,#b9a5ff0b 0deg 10deg,transparent 10deg 24deg);animation:rankup-rays 60s linear infinite}
@media(max-height:500px){.rankup-content{gap:5px;padding-top:9px;padding-bottom:12px}.rankup-content header{gap:2px}.rankup-kicker{font-size:16px}.rankup-stage{width:175px;height:135px}.rankup-title{gap:5px}#promotion-dialog.rankup-screen h2{font-size:30px}.rankup-content footer{margin-top:3px}#promotion-dialog.rankup-screen button{min-height:38px;padding:6px 17px;font-size:15px;border-bottom-width:4px}.rankup-trail img{width:21px;height:21px}.rankup-unlock{padding:3px 8px}.rankup-unlock svg{width:16px;height:16px}.rankup-queue{font-size:10px}.rankup-gain{font-size:14px}}

/* Layout fixes (owner, Oct 2: "make sure the rank is centered"). The game's global header/footer styles were
   leaking in (a 62px space-between header, wide side margins), which pushed the badge low and, on short phones,
   let the title squash to nothing under the Continue button. The heading, badge, name and buttons now form one
   centred column; the badge sits in the middle and nothing overlaps down to 640×300. */
#promotion-dialog.rankup-screen .rankup-content>header{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;height:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;width:auto;position:static}
#promotion-dialog.rankup-screen .rankup-content>footer{position:static;margin:clamp(4px,1.2vh,12px) 0 0;padding:0;border:0;background:none;box-shadow:none;width:auto}
#promotion-dialog.rankup-screen .rankup-title{flex-shrink:0;min-height:auto}
#promotion-dialog.rankup-screen .rankup-stage{flex-shrink:1;min-height:0;margin-inline:auto}
#promotion-dialog.rankup-screen #promotion-icon{margin:auto;place-self:center}
#promotion-dialog.rankup-screen #promotion-icon img{display:block;margin:auto;object-position:50% 50%}
/* Light rays radiate from the badge, not from a fixed point on the screen. */
#promotion-dialog.rankup-screen .rankup-rays::before{background:repeating-conic-gradient(from 10deg at 50% 50%,#b9a5ff0b 0deg 10deg,transparent 10deg 24deg)}
@media(max-height:500px){
 #promotion-dialog.rankup-screen .rankup-content{gap:3px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
 /* Kicker and queue share one line so the badge gets the height. */
 #promotion-dialog.rankup-screen .rankup-content>header{flex-direction:row;align-items:baseline;gap:10px}
 #promotion-dialog.rankup-screen .rankup-stage{width:min(175px,40vh);height:min(135px,36vh)}
 #promotion-dialog.rankup-screen h2{font-size:clamp(22px,8.5vh,30px)}
 #promotion-dialog.rankup-screen .rankup-title{gap:2px}
 #promotion-dialog.rankup-screen .rankup-content>footer{margin-top:2px}
 #promotion-dialog.rankup-screen button{min-height:36px;padding:4px 16px}
 #promotion-dialog.rankup-screen .rankup-trail img{width:18px;height:18px}
}
@media(max-height:340px){
 #promotion-dialog.rankup-screen .rankup-stage{width:min(150px,40vh);height:min(112px,34vh)}
 #promotion-dialog.rankup-screen .rankup-kicker{font-size:14px}
 #promotion-dialog.rankup-screen h2{font-size:22px}
 #promotion-dialog.rankup-screen .rankup-value{font-size:18px}
 #promotion-dialog.rankup-screen .rankup-trail b{font-size:10px}
 #promotion-dialog.rankup-screen button{min-height:34px;font-size:14px}
}