.hero-promotion-preview { padding: 3px 0 0; }
.hero-next-skill { display:flex; align-items:center; gap:9px; width:100%; margin:5px 0 8px; padding:8px 10px; border:1px solid #a4bae0; border-radius:8px; background:linear-gradient(115deg,#303d60,#3e496a); color:#f6f8ff; text-align:left; cursor:pointer; }
.hero-next-skill[hidden] { display:none; }
.hero-next-skill[data-immediate="true"] { border-color:#f0d274; background:linear-gradient(115deg,#3b4665,#52503e); }
.hero-next-skill>img { width:42px; height:42px; flex:none; border:1px solid #d7bd72; border-radius:5px; }
.hero-next-skill>span { display:grid; min-width:0; gap:2px; flex:1; }
.hero-next-skill small { color:#ffe698; font-size:10px; }
.hero-next-skill strong { font-size:12px; }
.hero-next-skill-effect,#hero-next-skill-effect { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#e0e7f4; font-size:10px; line-height:1.3; }
.hero-next-skill:focus-visible { outline:3px solid #f7d964; outline-offset:2px; }
.hero-growth-resource { position:absolute; z-index:2; top:9px; right:10px; display:flex; align-items:center; gap:5px; padding:3px 9px 3px 3px; border-radius:5px; background:#272a496e; font-size:12px; color:white; text-shadow:0 1px 2px #18202e; }
.hero-growth-resource img { width:24px; height:24px; }
.hero-growth-resource[hidden],.hero-promotion-rank[hidden] { display:none; }
.hero-promotion-rank { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 9px; font-size:12px; color:#e2e5f9; }
.hero-rank-gem { display:inline-block; width:24px; height:27px; clip-path:polygon(25% 0,75% 0,100% 40%,78% 90%,50% 100%,22% 90%,0 40%); background:linear-gradient(125deg,#c1c8d6,#7b879d 45%,#64718b 50%,#b7bfcb); box-shadow:inset 0 0 8px #394b6a; }
.hero-rank-gem.is-earned { background:linear-gradient(125deg,#cffaff,#64dbff 40%,#127ed8 45%,#82edff); }
.hero-promotion-rank:is([data-rank="4"],[data-rank="5"],[data-rank="6"]) .hero-rank-gem.is-earned { background:linear-gradient(125deg,#f4cfff,#d682ff 40%,#8126d8 45%,#d99aff); }
.hero-promotion-comparison { display:grid; gap:3px; width:min(100%,380px); margin:0 auto 8px; }
.hero-promotion-row { display:grid; grid-template-columns:1.8fr 1fr 20px 1fr; align-items:center; gap:4px; font-size:13px; line-height:1.25; font-weight:750; }
.hero-promotion-row b { text-align:center; font-variant-numeric:tabular-nums; }
.hero-promotion-row .promotion-arrow,.hero-promotion-row .promotion-next { color:#6bffc2; text-shadow:0 1px 2px #133938; }
.hero-promotion-benefit { margin:6px 0; color:#e7e4b9; font-size:11px; line-height:1.3; text-align:center; }
.hero-promotion-preview .hero-gold-button { min-height:48px; margin:8px auto 0; }
.hero-promotion-preview .hero-cost { display:flex; gap:18px; align-items:center; justify-content:center; }
.hero-promotion-preview .hero-cost span { display:flex; align-items:center; gap:5px; }
.hero-promotion-preview .hero-cost img { width:21px; height:21px; object-fit:contain; }
.hero-promotion-status { margin:5px 0 0; text-align:center; font-size:11px; line-height:1.3; color:#dde3f7; }
.hero-skill-rank { position:absolute; bottom:1px; right:1px; min-width:17px; padding:1px 3px; color:#fff5b8; background:#364f84; border:1px solid #a1b9ef; border-radius:4px; font-size:10px; line-height:1.2; }
@media (max-height:650px) { .hero-promotion-rank{margin-bottom:4px}.hero-rank-gem{width:18px;height:21px}.hero-promotion-row{font-size:11px}.hero-promotion-comparison{gap:1px;margin-bottom:3px}.hero-promotion-preview .hero-gold-button{min-height:42px;margin-top:4px}.hero-promotion-benefit{margin:3px 0}.hero-promotion-status{font-size:10px} }

/* A committed promotion receipt, visually separate from the next level action. */
.promotion-result { width:min(550px,calc(100vw - 26px)); height:min(780px,86dvh); max-height:calc(100dvh - 28px); padding:0; overflow:hidden; border:3px solid #a2b1d9; border-radius:12px; color:#f7fbff; background:#515773; box-shadow:0 6px 0 #303951,0 14px 40px #0009; }
.promotion-result[open] { display:flex; flex-direction:column; }
.promotion-result::backdrop { background:#071320b3; }
.promotion-result>header { position:relative; flex:none; display:flex; justify-content:center; align-items:center; min-height:52px; padding:10px 55px; border-bottom:4px solid #3c456a; background:linear-gradient(#949fcb,#656f9e); box-shadow:inset 0 3px 2px #dae5ff90; }
.promotion-result h2 { margin:0; color:#fff; font-weight:800; font-size:22px; line-height:1.2; font-family:inherit; text-shadow:0 2px 2px #25324b; }
.promotion-result>header button { position:absolute; right:9px; top:7px; width:36px; height:36px; padding:0; border:2px solid #f6b5d0; border-radius:7px; color:white; background:linear-gradient(#f68aac,#c82860); font-size:30px; line-height:1; box-shadow:0 3px 0 #643c63; }
.promotion-result-hero { flex:0 1 38%; min-height:140px; padding:14px 10px 0; text-align:center; background:radial-gradient(ellipse at 50% 85%,#9bdfff90,transparent 58%),linear-gradient(125deg,#656c91,#444b6c); display:flex; flex-direction:column; align-items:center; }
.promotion-result-hero h3 { margin:0 0 4px; font-size:17px; }
.promotion-result-stars { color:#ffe867; font-size:24px; letter-spacing:1px; text-shadow:0 2px 2px #574821; }
.promotion-result-aura { flex:1; min-height:0; width:100%; display:grid; place-items:center; background:radial-gradient(ellipse at center,#d1edff70 0,transparent 57%); }
.promotion-result-aura img { display:block; width:100%; height:100%; min-height:0; max-height:225px; object-fit:contain; filter:drop-shadow(0 0 12px #aeeaff); }
.promotion-result-aura img[hidden] { display:none; }
.promotion-result-body { flex:1; min-height:0; overflow:auto; background:#e0edf1; color:#20343c; }
.promotion-result .hero-promotion-comparison { width:100%; margin:0; gap:0; }
.promotion-result .hero-promotion-row { min-height:34px; padding:5px 22px; font-size:14px; grid-template-columns:1.7fr 1fr 26px 1fr; }
.promotion-result .hero-promotion-row:nth-child(even) { background:#bccbd2; }
.promotion-result .hero-promotion-row:nth-child(-n+2)>span { color:#796616; }
.promotion-result .hero-promotion-row .promotion-next { color:#087e4c; text-shadow:none; }
.promotion-result .hero-promotion-row .promotion-arrow { color:#17b976; text-shadow:0 1px #07714b; font-size:25px; }
#promotion-result-note { margin:14px 22px; color:#4a6168; font-size:12px; line-height:1.6; text-align:center; }
.promotion-result>footer { flex:none; padding:12px; display:flex; justify-content:center; background:linear-gradient(#8697b8,#647895); border-top:2px solid #d0e1ee; }
.promotion-result>footer button { width:180px; min-height:44px; font-size:18px; }
@media(prefers-reduced-motion:no-preference) { .promotion-result[open] .promotion-result-aura img { animation:promotion-reveal .55s ease-out; } @keyframes promotion-reveal { from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)} } }
@media(max-height:650px) { .hero-growth-resource{top:5px;right:7px;font-size:10px;padding:2px 5px}.hero-growth-resource img{width:19px;height:19px}.promotion-result-hero{padding-top:6px;min-height:100px;flex-basis:33%}.promotion-result-hero h3{font-size:14px}.promotion-result-stars{font-size:19px}.promotion-result>header{min-height:44px}.promotion-result h2{font-size:18px}.promotion-result .hero-promotion-row{min-height:27px;padding:2px 15px;font-size:12px}#promotion-result-note{margin:7px 12px;font-size:10px}.promotion-result>footer{padding:8px}.promotion-result>footer button{min-height:38px;font-size:16px} }