.morality-rank-stars{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:2px;line-height:1}
.rank-star-mark{display:inline-grid;place-items:center;flex:none;width:14px;height:14px;color:var(--metal);opacity:.32;filter:saturate(.55)}
.rank-star-mark svg{display:block;width:100%;height:100%;overflow:visible}
.rank-star-mark .star-outline{fill:var(--depth);stroke:var(--shine);stroke-width:.9;stroke-linejoin:round}
.rank-star-mark .star-core{fill:var(--metal)}
.rank-star-mark .star-facet{fill:var(--shine);opacity:.8}
.rank-star-mark .star-cut{fill:none;stroke:var(--shine);stroke-width:.65;opacity:.75}
.rank-star-mark.is-earned{opacity:1;filter:drop-shadow(0 0 2px var(--shine)) drop-shadow(0 1px 1px var(--depth))}
.rank-promotion[open]{display:block;position:fixed;inset:0;width:100vw;min-width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:0;overflow:auto;background:#060c19;color:#fff;z-index:99999;transform:none;cursor:pointer;touch-action:manipulation}
.rank-promotion::backdrop{background:#060c19}
/* workspace.css scales large desktop pages; viewport-sized ceremonies must stay at 1:1. */
@media screen and (min-width:1181px){body:has(> .rank-promotion[open]){zoom:1}}
.promotion-stage{--metal:#aa7145;--shine:#f3d3a4;--depth:#6c442a;--gem:#d5a36e;position:relative;isolation:isolate;width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 24px 24px;overflow:hidden;text-align:center;box-sizing:border-box}
.rank-promotion .promotion-stage{position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;transform:none;padding-bottom:calc(24px + 10vh)}
.promotion-aura{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--gem) 27%,transparent),transparent 58%)}
.promotion-aura::after{content:'';position:absolute;left:50%;top:43%;width:300px;height:300px;border:1px solid var(--shine);border-radius:50%;transform:translate(-50%,-50%);opacity:0;animation:promotion-ring 2s 1.4s ease-out both}
.promotion-kicker{font-size:13px;font-weight:600;letter-spacing:4px;color:#e1d4b4;margin:0 0 12px;text-shadow:0 0 12px color-mix(in srgb,var(--gem) 50%,transparent)}
.promotion-stars{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.promotion-stars .rank-star-mark{position:relative;width:34px;height:34px;opacity:1;filter:drop-shadow(0 0 6px var(--gem)) drop-shadow(0 0 14px color-mix(in srgb,var(--gem) 45%,transparent));animation:promotion-star .55s 1.7s ease-out both}
.promotion-stars .rank-star-mark:nth-child(2){width:43px;height:43px;animation-delay:2.05s}
.promotion-stars .rank-star-mark:nth-child(3){animation-delay:2.4s}
.promotion-emblem{position:relative;isolation:isolate;width:clamp(180px,27vh,280px);height:clamp(180px,27vh,280px);display:grid;place-items:center;animation:promotion-crest 1s 1.3s both}.promotion-emblem>span{font-size:25px;font-weight:800;color:var(--shine);text-shadow:0 2px 12px #000}.promotion-emblem .rank-panel{fill:#0c172c}.promotion-emblem .rank-frame-art{filter:drop-shadow(0 0 2px var(--depth)) drop-shadow(0 0 12px color-mix(in srgb,var(--gem) 50%,transparent))}
.promotion-transform{position:relative;isolation:isolate;flex:none;width:clamp(180px,27vh,280px);height:clamp(180px,27vh,280px);margin:0 auto}
.promotion-transform .promotion-old,.promotion-transform .promotion-emblem,.promotion-shards,.promotion-shard{position:absolute;inset:0;width:100%;height:100%}
.promotion-transform .promotion-old,.promotion-shard,.promotion-transform .promotion-emblem{display:grid;place-items:center}
.promotion-transform .promotion-old,.promotion-shards{--metal:#aa7145;--shine:#f3d3a4;--depth:#6c442a;--gem:#d5a36e}
.promotion-transform .promotion-old,.promotion-shard{isolation:isolate}
.promotion-transform .promotion-old .rank-panel,.promotion-shard .rank-panel{fill:#0c172c}
.promotion-transform .promotion-old{animation:promotion-old-break 4.2s both}
.promotion-transform .promotion-old::after{content:'';position:absolute;inset:5%;pointer-events:none;background:linear-gradient(24deg,transparent 49.4%,#fff9 49.8%,transparent 50.4%),linear-gradient(133deg,transparent 49.5%,#fff9 50%,transparent 50.5%),linear-gradient(69deg,transparent 49.7%,#fff8 50%,transparent 50.3%);mix-blend-mode:screen;animation:promotion-cracks 4.2s both}
.promotion-transform .promotion-old>span,.promotion-shard>span{position:relative;color:var(--shine);font-size:25px;font-weight:800;text-shadow:0 2px 12px #000}
.promotion-shards{pointer-events:none}
.promotion-shard{display:grid;place-items:center;clip-path:var(--fragment);animation:promotion-shatter 4.2s cubic-bezier(.2,.7,.35,1) both}
.promotion-transform .promotion-emblem{animation:promotion-reform 4.2s cubic-bezier(.19,.8,.3,1) both}
.promotion-break-flash{position:absolute;z-index:3;left:50%;top:50%;width:14%;height:14%;border-radius:50%;pointer-events:none;background:#fff;box-shadow:0 0 38px 24px var(--shine),0 0 100px 65px var(--gem);animation:promotion-flash 4.2s both}
@keyframes promotion-old-break{0%,22%{opacity:1;transform:scale(1)}27%{opacity:1;transform:scale(1.04)}30%,100%{opacity:0;transform:scale(1.08)}}
@keyframes promotion-cracks{0%,19%{opacity:0}22%,27%{opacity:.85}30%,100%{opacity:0}}
@keyframes promotion-shatter{0%,26%{opacity:0;transform:translate(0,0) rotate(0)}27%{opacity:1;transform:translate(0,0) rotate(0)}31%{opacity:1}47%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.78)}}
@keyframes promotion-reform{0%,38%{opacity:0;transform:scale(.55);filter:blur(10px)}55%{opacity:1;transform:scale(1.08);filter:blur(0)}68%,100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes promotion-flash{0%,26%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:.85;transform:translate(-50%,-50%) scale(1)}39%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
.promotion-title{font-size:clamp(30px,5vw,46px);letter-spacing:10px;margin:20px 0 10px;color:var(--shine);animation:promotion-text .65s 1.7s both}.promotion-name{font-size:24px;font-weight:700;margin:0 0 10px;overflow-wrap:anywhere}.promotion-route{font-size:16px;color:#d6deee;margin:0}.promotion-route span{padding:0 15px;color:var(--shine)}.promotion-score{font-size:13px;color:#a9b6ca;margin:10px 0 0}
.promotion-tap-hint{font-size:12px;letter-spacing:2px;color:#b9c5d7;margin:20px 0 0;opacity:.8;animation:promotion-text .5s 2s both}
.rank-promotion:focus-visible{outline:2px solid var(--shine,#f1d8a0);outline-offset:-8px}
.promotion-rays{position:absolute;left:50%;top:43%;z-index:-1;pointer-events:none}.promotion-rays i{position:absolute;width:2px;height:90px;background:linear-gradient(transparent,var(--shine),transparent);opacity:0;transform:rotate(var(--angle)) translateY(-150px);animation:promotion-ray 1.6s calc(1.4s + var(--delay)) ease-out both}
@keyframes promotion-star{from{opacity:0;transform:scale(.2) translateY(12px)}70%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}
@keyframes promotion-crest{from{opacity:0;transform:scale(.65) translateY(20px)}65%{opacity:1;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes promotion-text{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes promotion-ring{from{opacity:.65;transform:translate(-50%,-50%) scale(.55)}to{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@keyframes promotion-ray{15%{opacity:.65}to{opacity:0;transform:rotate(var(--angle)) translateY(-400px)}}
@media(max-width:600px){.morality-rank-stars{gap:1px;margin-top:0}.morality-rank-stars .rank-star-mark{width:12px;height:12px}.promotion-stage{padding:24px 16px max(24px,env(safe-area-inset-bottom))}.rank-promotion .promotion-stage{position:relative;padding:24px 16px max(24px,env(safe-area-inset-bottom))}.promotion-kicker{letter-spacing:2px}.promotion-title{letter-spacing:6px}.promotion-stars .rank-star-mark{width:28px;height:28px}.promotion-stars .rank-star-mark:nth-child(2){width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.rank-promotion *{animation:none!important}.promotion-rays,.promotion-aura::after,.promotion-old,.promotion-shards,.promotion-break-flash{display:none!important}.promotion-transform .promotion-emblem{opacity:1;transform:none;filter:none}}

.promotion-stage.rank-silver, .promotion-old.rank-silver, .promotion-shards.rank-silver { --metal:#8197ac; --shine:#eef5ff; --depth:#445a72; --gem:#bddef2; }
.promotion-stage.rank-gold, .promotion-old.rank-gold, .promotion-shards.rank-gold { --metal:#d5a12a; --shine:#fff0a0; --depth:#846018; --gem:#f4c13a; }
.promotion-stage.rank-platinum, .promotion-old.rank-platinum, .promotion-shards.rank-platinum { --metal:#37a39a; --shine:#c4fff0; --depth:#256a74; --gem:#56ead6; }
.promotion-stage.rank-diamond, .promotion-old.rank-diamond, .promotion-shards.rank-diamond { --metal:#548fdd; --shine:#d9f5ff; --depth:#364987; --gem:#7bd8ff; }
.promotion-stage.rank-star, .promotion-old.rank-star, .promotion-shards.rank-star { --metal:#9165cf; --shine:#f0d9ff; --depth:#553274; --gem:#d09cff; }
.promotion-stage.rank-king, .promotion-old.rank-king, .promotion-shards.rank-king { --metal:#cc8324; --shine:#fff2be; --depth:#814822; --gem:#ef6354; }
.promotion-stage.rank-legend, .promotion-old.rank-legend, .promotion-shards.rank-legend { --metal:#d47836; --shine:#fff2ad; --depth:#9c3d32; --gem:#fa8b4e; }
.promotion-stage.rank-myth, .promotion-old.rank-myth, .promotion-shards.rank-myth { --metal:#b55798; --shine:#ffe1ac; --depth:#643065; --gem:#f69be3; }
.promotion-stage.rank-practice, .promotion-old.rank-practice, .promotion-shards.rank-practice { --metal:#9b9ba1; --shine:#e7e8ec; --depth:#676874; --gem:#aeb1bb; }
.promotion-stage.rank-warning, .promotion-old.rank-warning, .promotion-shards.rank-warning { --metal:#cc5252; --shine:#ffdddd; --depth:#9b3038; --gem:#e85454; }