.rank-milestone{--milestone-color:#ffd76c;box-sizing:border-box;width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:34px 28px 26px;overflow:auto;text-align:center;color:#fff4d7;border:1px solid var(--milestone-color);border-radius:20px;background:radial-gradient(ellipse at 50% 35%,#303335 0%,#10171d 55%,#080d13 100%);box-shadow:0 24px 100px #000c,0 0 30px #dca65622;isolation:isolate}
.rank-milestone{overflow-x:hidden}
.rank-milestone::backdrop{background:#020711d9;backdrop-filter:blur(5px)}
.rank-milestone .milestone-kicker{font:700 12px/1.5 system-ui;letter-spacing:.24em;color:var(--milestone-color);margin:0 0 8px}
.rank-milestone h2{font:600 clamp(28px,6vw,40px)/1.15 Georgia,serif;margin:0 0 24px;color:#fff4d7}
.milestone-seal{position:relative;display:grid;place-items:center;width:144px;height:164px;margin:0 auto 20px;clip-path:polygon(50% 0,94% 20%,94% 70%,50% 100%,6% 70%,6% 20%);background:linear-gradient(125deg,#fff6d8,var(--milestone-color) 28%,#58412b 49%,var(--milestone-color) 67%,#fff6df);filter:drop-shadow(0 0 18px #ffd46a50)}
.milestone-seal{overflow:hidden}
.milestone-seal::before{content:"";position:absolute;inset:4px;clip-path:inherit;background:linear-gradient(140deg,#3c3935,#0a111c 65%)}
.milestone-seal span{position:relative;font:700 96px/1 Georgia,serif;color:var(--milestone-color);text-shadow:1px 2px #000,0 0 22px #ffe2ab33}
.milestone-seal::after{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 40%,#fff8 49%,transparent 58%);transform:translateX(-100%);animation:milestone-shine 1.6s .2s both}
.rank-milestone .milestone-name{font:600 22px/1.3 system-ui;overflow-wrap:anywhere;margin:0 0 6px}
.rank-milestone .milestone-rank{font:700 17px/1.4 system-ui;letter-spacing:.1em;text-transform:uppercase;color:var(--milestone-color);margin:0 0 14px}
.rank-milestone #milestone-detail{font:400 16px/1.6 system-ui;color:#d5d2c8;max-width:340px;margin:0 auto 24px}
.milestone-actions{display:grid;gap:10px}
.rank-milestone button{min-height:48px;border:1px solid var(--milestone-color);border-radius:9px;font:700 16px/1.3 system-ui;cursor:pointer;padding:12px 18px}
.rank-milestone .milestone-continue{background:var(--milestone-color);color:#12171d}
.rank-milestone .milestone-vault{background:#141d26;color:#f4e5c3;border-color:#756448}
.rank-milestone button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.milestone-glow{position:absolute;inset:12% 8% 40%;z-index:-1;background:radial-gradient(ellipse,#eecb7320,transparent 67%);pointer-events:none}
.rank-milestone[open]{animation:milestone-arrive .5s ease-out}
@keyframes milestone-shine{to{transform:translateX(100%)}}
@keyframes milestone-arrive{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rank-milestone[open],.milestone-seal::after{animation:none}.milestone-seal::after{display:none}}
@media(max-height:650px){.rank-milestone{padding:20px}.rank-milestone h2{margin-bottom:12px}.milestone-seal{width:105px;height:120px;margin-bottom:12px}.milestone-seal span{font-size:72px}}