/* Legacy — ranks (js/ranks.js): titles, trophy sets, Ascend, rank cosmetics and the rank-up cinematic */
@property --rk-sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- the title tag ---------- */
.rk-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 99px; font: 800 10.5px/1.5 var(--f-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle;
  color: #fff; background: var(--rk-tg, linear-gradient(135deg, #8a6a4a, #5a4030)); box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 2px 6px rgb(0 0 0 / .2); position: relative; overflow: hidden; white-space: nowrap; }
.rk-tag i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; flex: none; }
.rk-tag b { font-weight: 900; color: #ffe066; text-shadow: 0 0 6px rgb(255 210 80 / .8); margin-left: 2px; letter-spacing: 0; }
.rk-tag::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%); background-size: 260% 100%; animation: rkShine 4.5s ease-in-out infinite; }
.rk-f0 { --rk-tg: linear-gradient(135deg, #c07a3e, #7a4520); } .rk-f1 { --rk-tg: linear-gradient(135deg, #2fae7a, #1b5fae); } .rk-f2 { --rk-tg: linear-gradient(135deg, #9a5cff, #d9a520); }
.rk-f3 { --rk-tg: linear-gradient(135deg, #ff7a1a, #2e9bd6); } .rk-f4 { --rk-tg: linear-gradient(135deg, #2a3c8a, #ffc23d); } .rk-f5 { --rk-tg: linear-gradient(135deg, #3b1a6b, #c04fd8); }
.rk-f6 { --rk-tg: linear-gradient(135deg, #8a0e00, #e3b22e); } .rk-f7 { --rk-tg: linear-gradient(135deg, #ff3cac, #2bd2ff 50%, #b45cff); background-size: 200% 200%; animation: rkSlide 5s linear infinite; }
.rk-f8 { --rk-tg: linear-gradient(135deg, #0b0b14, #3a2a10 40%, #ffd84a 70%, #ff3cac); background-size: 220% 220%; animation: rkSlide 4s linear infinite; box-shadow: 0 0 0 1px #ffd84a inset, 0 0 12px rgb(255 216 74 / .55); }
.who-txt .rk-tag { margin: 2px 0 1px; font-size: 9.5px; }
@keyframes rkShine { 0%, 60% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes rkSlide { to { background-position: 200% 0; } }

/* ---------- name styles ---------- */
.rk-nm { background-size: 220% 100%; }
.rk-nm:not(.rk-nm-plain) { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.rk-nm-steel { background-image: linear-gradient(90deg, #f4f7fb, #9aa6b4 30%, #ffffff 50%, #8592a2 70%, #f4f7fb); animation: rkSlide 7s linear infinite; }
.rk-nm-gilt { background-image: linear-gradient(90deg, #fff4b8, #e3b22e 30%, #fffbe6 50%, #b8860b 70%, #fff4b8); animation: rkSlide 5s linear infinite; filter: drop-shadow(0 1px 0 rgb(120 70 0 / .45)); }
.rk-nm-verdant { background-image: linear-gradient(90deg, #d8ffb0, #3fae78, #c9f7a8, #1f7a3a, #d8ffb0); animation: rkSlide 8s linear infinite; filter: drop-shadow(0 0 4px rgb(80 220 120 / .45)); }
.rk-nm-ember { background-image: linear-gradient(0deg, #ff2d00, #ff8a00 40%, #ffe066 75%, #fff6c8); background-size: 100% 200%; animation: rkFire 1.4s ease-in-out infinite alternate, rkGlowFire 0.9s steps(3) infinite; }
.rk-nm-frost { background-image: linear-gradient(90deg, #ffffff, #a8e4ff 25%, #ffffff 45%, #5ab4e8 70%, #ffffff); animation: rkSlide 6s linear infinite, rkGlowIce 2.6s ease-in-out infinite; }
.rk-nm-nebula { background-image: linear-gradient(90deg, #7fe0ff, #c04fd8, #ff8adf, #6a3cff, #7fe0ff); animation: rkSlide 6s linear infinite; filter: drop-shadow(0 0 6px rgb(192 79 216 / .55)); }
.rk-nm-arcane { background-image: linear-gradient(90deg, #e08bff, #7fd8ff, #e08bff); animation: rkSlide 3.5s linear infinite, rkGlowArc 2.2s ease-in-out infinite; letter-spacing: .02em; }
.rk-nm-royal { background-image: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .95) 50%, transparent 60%), linear-gradient(90deg, #b8860b, #ffe680, #d4a017, #fff6c8, #b8860b); background-size: 300% 100%, 100% 100%; animation: rkRoyal 3.2s ease-in-out infinite; filter: drop-shadow(0 0 5px rgb(255 205 70 / .6)); }
.rk-nm-prism { background-image: linear-gradient(90deg, #ff3cac, #ffe66d, #2bd2ff, #7cff6b, #b45cff, #ff3cac); animation: rkSlide 2.4s linear infinite; filter: drop-shadow(0 0 6px rgb(255 255 255 / .5)); }
.rk-nm-mythic { background-image: linear-gradient(100deg, transparent 42%, #fff 50%, transparent 58%), linear-gradient(90deg, #ffd84a, #ff3cac, #7fd8ff, #ffd84a); background-size: 300% 100%, 200% 100%; animation: rkMythic 3s linear infinite; filter: drop-shadow(0 0 8px rgb(255 216 74 / .7)) drop-shadow(0 0 2px #fff); }
.rk-nm-ascend { background-image: linear-gradient(100deg, transparent 40%, #fff 50%, transparent 60%), linear-gradient(90deg, #fffbe6, #ffe8a3, #ffffff, #ffd84a, #fffbe6); background-size: 300% 100%, 200% 100%; animation: rkMythic 2.6s linear infinite, rkGlowAsc 2.4s ease-in-out infinite; }
@keyframes rkFire { to { background-position: 0 100%; } }
@keyframes rkGlowFire { 0% { filter: drop-shadow(0 0 4px #ff6a00); } 50% { filter: drop-shadow(0 -2px 7px #ffb000); } 100% { filter: drop-shadow(0 0 5px #ff3d00); } }
@keyframes rkGlowIce { 50% { filter: drop-shadow(0 0 7px #a8e4ff); } 0%, 100% { filter: drop-shadow(0 0 2px #a8e4ff); } }
@keyframes rkGlowArc { 50% { filter: drop-shadow(0 0 9px #b05cff); } 0%, 100% { filter: drop-shadow(0 0 3px #b05cff); } }
@keyframes rkGlowAsc { 50% { filter: drop-shadow(0 0 10px #fff6c8) drop-shadow(0 0 3px #ffd84a); } 0%, 100% { filter: drop-shadow(0 0 4px #fff6c8); } }
@keyframes rkRoyal { 0% { background-position: 150% 0, 0 0; } 100% { background-position: -150% 0, 0 0; } }
@keyframes rkMythic { 0% { background-position: 150% 0, 0 0; } 100% { background-position: -150% 0, 200% 0; } }

/* ---------- profile banners (behind a friend's portrait, and in the style window) ---------- */
.rk-bn { position: relative; overflow: hidden; isolation: isolate; }
.rk-bn::before, .rk-bn::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rk-bn-dawn { background: linear-gradient(180deg, #2b2a6b 0%, #ff7eb3 55%, #ffd29a 100%); } .rk-bn-dawn::after { background: radial-gradient(40% 50% at 50% 100%, rgb(255 240 180 / .9), transparent 70%); animation: rkBreath 5s ease-in-out infinite; }
.rk-bn-ocean { background: linear-gradient(180deg, #0a2a5a, #0b4a78 50%, #04223e); }
.rk-bn-ocean::before { background: repeating-radial-gradient(circle at 50% 120%, rgb(143 227 255 / .18) 0 6px, transparent 6px 22px); animation: rkRise 6s linear infinite; }
.rk-bn-ocean::after { background: linear-gradient(115deg, transparent 30%, rgb(160 230 255 / .18) 45%, transparent 60%); background-size: 300% 100%; animation: rkRoyal 7s ease-in-out infinite; }
.rk-bn-forest { background: linear-gradient(180deg, #0e2a14, #1f4a1c 60%, #0b1a0c); }
.rk-bn-forest::before { background: radial-gradient(2px 2px at 20% 30%, #d6ff8a, transparent), radial-gradient(2px 2px at 70% 60%, #d6ff8a, transparent), radial-gradient(2px 2px at 40% 80%, #fff6a8, transparent), radial-gradient(2px 2px at 85% 25%, #d6ff8a, transparent), radial-gradient(2px 2px at 10% 70%, #fff6a8, transparent); animation: rkFireflies 4s ease-in-out infinite alternate; }
.rk-bn-lava { background: linear-gradient(180deg, #1a0300, #3a0a00 55%, #7a1a00); }
.rk-bn-lava::before { background: radial-gradient(60% 40% at 30% 110%, #ff6a00, transparent 70%), radial-gradient(50% 35% at 75% 110%, #ffb000, transparent 70%); animation: rkLava 3s ease-in-out infinite alternate; }
.rk-bn-lava::after { background: radial-gradient(1.5px 1.5px at 20% 80%, #ffd84a, transparent), radial-gradient(1.5px 1.5px at 60% 90%, #ff8a00, transparent), radial-gradient(2px 2px at 80% 70%, #ffd84a, transparent); animation: rkRise 3s linear infinite; }
.rk-bn-aurora { background: linear-gradient(180deg, #021024, #0b2a4a); }
.rk-bn-aurora::before { background: linear-gradient(100deg, transparent 10%, rgb(46 230 176 / .55) 30%, rgb(124 92 255 / .45) 55%, rgb(46 230 176 / .35) 75%, transparent 90%); filter: blur(10px); transform-origin: 50% 0; animation: rkAurora 7s ease-in-out infinite alternate; }
.rk-bn-stars { background: radial-gradient(ellipse at 50% 120%, #3a1f5c, #0a0620 60%); }
.rk-bn-stars::before { background: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 30%, #fff, transparent), radial-gradient(1px 1px at 75% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent), radial-gradient(1px 1px at 45% 85%, #fff, transparent), radial-gradient(1px 1px at 20% 90%, #fff, transparent);
  background-size: 120px 120px; animation: rkTwinkle 3s ease-in-out infinite alternate; }
.rk-bn-stars::after { background: linear-gradient(135deg, transparent 47%, rgb(255 255 255 / .9) 50%, transparent 53%); background-size: 40px 40px; background-repeat: no-repeat; animation: rkShoot 5s linear infinite; }
.rk-bn-runes { background: radial-gradient(circle, #1a2a5a, #070b1c 70%); }
.rk-bn-runes::before { inset: -40%; background: repeating-conic-gradient(rgb(127 216 255 / .45) 0 2deg, transparent 2deg 15deg); -webkit-mask: radial-gradient(circle, transparent 38%, #000 39% 41%, transparent 42% 50%, #000 51% 52%, transparent 53%); mask: radial-gradient(circle, transparent 38%, #000 39% 41%, transparent 42% 50%, #000 51% 52%, transparent 53%); animation: spin 18s linear infinite; }
.rk-bn-throne { background: linear-gradient(180deg, #2a0505, #5a0a14 50%, #1a0303); }
.rk-bn-throne::before { background: repeating-linear-gradient(90deg, transparent 0 18%, rgb(227 178 46 / .25) 18% 19%), radial-gradient(60% 50% at 50% 0%, rgb(255 216 74 / .45), transparent 70%); }
.rk-bn-throne::after { background: linear-gradient(105deg, transparent 40%, rgb(255 230 140 / .35) 50%, transparent 60%); background-size: 300% 100%; animation: rkRoyal 4s ease-in-out infinite; }
.rk-bn-cosmos { background: conic-gradient(from 0deg at 50% 50%, #0a0630, #4a3cff, #ff3cac, #0a0630, #2bd2ff, #0a0630); }
.rk-bn-cosmos::before { inset: -50%; background: conic-gradient(from 0deg, transparent, rgb(255 255 255 / .25), transparent 30%); animation: spin 6s linear infinite; }
.rk-bn-cosmos::after { background: radial-gradient(circle, transparent 30%, rgb(5 3 20 / .75) 75%); }
.rk-bn-mythic { background: linear-gradient(135deg, #0b0b14, #2a1a05 40%, #3a0a2a); }
.rk-bn-mythic::before { inset: -50%; background: repeating-conic-gradient(rgb(255 216 74 / .35) 0 3deg, transparent 3deg 12deg, rgb(255 60 172 / .25) 12deg 14deg, transparent 14deg 24deg); animation: spin 14s linear infinite; }
.rk-bn-mythic::after { background: radial-gradient(circle, rgb(255 246 200 / .55), transparent 45%); animation: rkBreath 2.6s ease-in-out infinite; }
.rk-bn-ascend { background: radial-gradient(circle at 50% 40%, #fffbe6, #ffe8a3 35%, #c99a2e 80%); }
.rk-bn-ascend::before { inset: -50%; background: repeating-conic-gradient(rgb(255 255 255 / .8) 0 2deg, transparent 2deg 10deg); animation: spin 20s linear infinite; opacity: .6; }
.rk-bn-ascend::after { background: radial-gradient(2px 2px at 20% 80%, #fff, transparent), radial-gradient(2px 2px at 60% 90%, #fff, transparent), radial-gradient(2px 2px at 80% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 60%, #fff, transparent); animation: rkRise 4s linear infinite; }
@keyframes rkBreath { 50% { opacity: .55; transform: scale(1.06); } }
@keyframes rkRise { from { transform: translateY(20%); } to { transform: translateY(-20%); } }
@keyframes rkFireflies { 0% { opacity: .3; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(6px, -8px); } }
@keyframes rkLava { to { filter: brightness(1.4); transform: scaleY(1.15); } }
@keyframes rkAurora { 0% { transform: skewX(-12deg) translateX(-10%); } 100% { transform: skewX(12deg) translateX(10%); } }
@keyframes rkTwinkle { to { opacity: .45; } }
@keyframes rkShoot { 0% { background-position: -40px -40px; } 30%, 100% { background-position: 120% 120%; } }

/* the banner behind a friend's portrait */
.rk-profile { margin: -6px -6px 10px; padding: 26px 0 18px; border-radius: 20px; }
.rk-profile .big-avatar { margin: 0 auto; }
.rk-profile .rk-tag { display: table; margin: 12px auto 0; }

/* ---------- gravestones ---------- */
.rk-gv-marble .tomb { background: radial-gradient(120% 80% at 30% 15%, #ffffff 0%, #eef0f2 50%, #cfd4da 100%), linear-gradient(120deg, transparent 40%, rgb(150 160 175 / .35) 42%, transparent 46%); color: #3b3f46; }
.rk-gv-granite .tomb { background: radial-gradient(120% 80% at 30% 15%, #4a4d55 0%, #24262c 55%, #0f1014 100%); }
.rk-gv-granite .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause) { color: #e8d9a8; text-shadow: 0 1px 0 #000; }
.rk-gv-jade .tomb { background: radial-gradient(120% 80% at 30% 15%, #c9f7d8 0%, #3fae78 50%, #145c3a 100%); }
.rk-gv-jade .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause) { color: #f0fff5; text-shadow: 0 1px 0 rgb(0 50 20 / .7); }
.rk-gv-rose .tomb { background: radial-gradient(120% 80% at 30% 15%, #fff0f6 0%, #f4b6cf 50%, #c36a92 100%); }
.rk-gv-rose .tomb :is(.tomb-name, .tomb-years) { color: #6a1f42; }
.rk-gv-obsidian .tomb { background: radial-gradient(120% 80% at 30% 15%, #3a2a3a 0%, #120a12 60%, #000 100%); box-shadow: inset 0 0 0 2px #ff6a00, 0 0 22px rgb(255 106 0 / .55), 0 18px 30px -12px #000; animation: tombRise .9s cubic-bezier(.2, .9, .3, 1) both, rkObs 1.6s ease-in-out infinite alternate; }
.rk-gv-obsidian .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause) { color: #ffcf8a; text-shadow: 0 0 8px rgb(255 106 0 / .7); }
.rk-gv-crystal .tomb { background: linear-gradient(135deg, rgb(255 255 255 / .9), rgb(168 228 255 / .75) 40%, rgb(200 180 255 / .7) 70%, rgb(255 255 255 / .9)); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .8), 0 0 26px rgb(168 228 255 / .8); }
.rk-gv-crystal .tomb::before { opacity: 1; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .9) 48%, transparent 60%); background-size: 300% 100%; animation: rkRoyal 3.4s ease-in-out infinite; }
.rk-gv-gold .tomb { background: radial-gradient(120% 80% at 30% 15%, #fff6c8 0%, #e3b22e 45%, #8a5a00 100%); box-shadow: inset 0 0 0 4px rgb(255 246 200 / .5), 0 0 24px rgb(255 205 70 / .6), 0 18px 30px -12px rgb(0 0 0 / .55); }
.rk-gv-gold .tomb::before { opacity: 1; background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / .85) 50%, transparent 62%); background-size: 300% 100%; animation: rkRoyal 3s ease-in-out infinite; }
.rk-gv-gold .tomb :is(.tomb-name, .tomb-years) { color: #5a3a00; text-shadow: 0 1px 0 rgb(255 250 220 / .9); }
.rk-gv-celestial .tomb { background: radial-gradient(circle at 50% 30%, #3a2a8a, #0a0630 70%); box-shadow: inset 0 0 0 2px #b6a8ff, 0 0 28px rgb(124 92 255 / .7); }
.rk-gv-celestial .tomb::before { opacity: 1; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 22%, #fff, transparent), radial-gradient(1px 1px at 40% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 82% 64%, #fff, transparent), radial-gradient(1px 1px at 12% 82%, #fff, transparent); animation: rkTwinkle 2s ease-in-out infinite alternate; }
.rk-gv-celestial .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause) { color: #e8e2ff; text-shadow: 0 0 8px #7c5cff; }
.rk-gv-ascend .tomb { background: radial-gradient(circle at 50% 25%, #ffffff, #fff3c4 45%, #e8c25a 100%); box-shadow: 0 0 0 2px #fff, 0 0 40px 6px rgb(255 240 190 / .9), 0 18px 30px -12px rgb(0 0 0 / .4); }
.rk-gv-ascend .tomb::before { opacity: .9; inset: -40%; border-radius: 50%; background: repeating-conic-gradient(rgb(255 255 255 / .7) 0 3deg, transparent 3deg 14deg); animation: spin 16s linear infinite; z-index: -1; }
.rk-gv-ascend .tomb :is(.tomb-name, .tomb-years) { color: #6a4a00; }
@keyframes rkObs { to { box-shadow: inset 0 0 0 2px #ffb000, 0 0 34px rgb(255 140 0 / .8), 0 18px 30px -12px #000; } }

/* ---------- the ascension halo (outside the ring) ---------- */
.rk-halo { position: absolute; inset: -42%; border-radius: 50%; pointer-events: none; z-index: 0; }
.rk-halo i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--hc, #ffd84a) 15%, transparent 30%, transparent 50%, var(--hc, #ffd84a) 65%, transparent 80%);
  -webkit-mask: radial-gradient(farthest-side, transparent 86%, #000 88% 92%, transparent 94%); mask: radial-gradient(farthest-side, transparent 86%, #000 88% 92%, transparent 94%); animation: spin 3.2s linear infinite; filter: drop-shadow(0 0 3px var(--hc, #ffd84a)); }
.rk-halo i + i { inset: 6%; animation-direction: reverse; animation-duration: 4.6s; opacity: .7; }
.rk-h1 { --hc: #ffd84a; } .rk-h2 { --hc: #ff3b5c; } .rk-h3 { --hc: #b05cff; } .rk-h4 { --hc: #2bd2ff; } .rk-h5 { --hc: #7cff6b; } .rk-h6 { --hc: #ffffff; }
.rk-h7 i { background: conic-gradient(#ff3cac, #ffe66d, #2bd2ff, #7cff6b, #b45cff, #ff3cac); }

/* ---------- the rank panel in the Prestige window ---------- */
.rk-panel { margin: 4px 0 12px; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, rgb(127 127 127 / .08), rgb(127 127 127 / .15)); box-shadow: inset 0 0 0 1px rgb(127 127 127 / .18); display: grid; gap: 10px; }
.rk-panel-top { display: flex; justify-content: center; align-items: center; gap: 10px; } .rk-panel-top .rk-tag { font-size: 12px; padding: 4px 12px; }
.rk-asc-n { font-weight: 800; font-size: .8rem; color: #d9a520; }
.rk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rk-btns small { opacity: .7; margin-left: 4px; }
.rk-ascend-btn { display: grid; gap: 2px; padding: 12px; border: 0; border-radius: 14px; color: #3a2400; font-weight: 900; background: linear-gradient(135deg, #fff6c8, #ffd84a 50%, #ffb000); box-shadow: 0 0 0 2px #fff6c8 inset, 0 6px 22px rgb(255 190 40 / .55); position: relative; overflow: hidden; animation: rkPulse 2s ease-in-out infinite; }
.rk-ascend-btn small { font-weight: 600; color: #5a3a00; opacity: 1; } .rk-ascend-btn span { color: #3a2400; } .rk-ascend-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .8) 50%, transparent 65%); background-size: 260% 100%; animation: rkShine 2.8s ease-in-out infinite; }
@keyframes rkPulse { 50% { box-shadow: 0 0 0 2px #fff6c8 inset, 0 6px 34px rgb(255 190 40 / .85); } }

/* trophy sets */
.rk-sets { display: grid; gap: 8px; margin-top: 8px; }
.rk-set { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgb(127 127 127 / .1); }
.rk-set.done { background: linear-gradient(135deg, rgb(255 216 74 / .22), rgb(255 150 60 / .12)); box-shadow: inset 0 0 0 1.5px rgb(255 200 60 / .7); }
.rk-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgb(127 127 127 / .2); filter: grayscale(1); opacity: .6; }
.rk-set.done .rk-badge { filter: none; opacity: 1; background: radial-gradient(circle at 35% 30%, #fff6c8, #e3b22e 60%, #8a5a00); box-shadow: 0 0 14px rgb(255 205 70 / .6); animation: rkPulse2 2.4s ease-in-out infinite; }
@keyframes rkPulse2 { 50% { transform: scale(1.06) rotate(-3deg); } }
.rk-set-txt b { display: block; font-size: .9rem; } .rk-set-txt small { font-size: .7rem; opacity: .7; }
.rk-bar { position: relative; height: 7px; margin-top: 6px; border-radius: 9px; background: rgb(127 127 127 / .22); }
.rk-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: linear-gradient(90deg, #ffb000, #ffe066); }
.rk-bar em { position: absolute; top: -2px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; background: rgb(127 127 127 / .55); } .rk-bar em.on { background: #fff; box-shadow: 0 0 5px #ffd84a; }
.rk-set-xp { font-weight: 900; font-size: .85rem; color: #d98a00; text-align: right; } .rk-set-xp small { display: block; font-size: .6rem; opacity: .7; }

/* style picker */
.rk-h { margin: 14px 4px 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.rk-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rk-look { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 14px; cursor: pointer; color: inherit; font: inherit; background: rgb(127 127 127 / .1); box-shadow: inset 0 0 0 1px rgb(127 127 127 / .2); min-width: 0; }
.rk-look.on { box-shadow: inset 0 0 0 2px rgb(255 200 60 / .9), 0 0 14px rgb(255 200 60 / .3); background: rgb(255 216 74 / .14); }
.rk-look.locked { cursor: default; opacity: .5; } .rk-look.locked > :first-child { filter: grayscale(.9); }
.rk-look b { font-size: .7rem; } .rk-look small { font-size: .6rem; opacity: .75; white-space: nowrap; }
.rk-prev-name { font: 900 1.05rem Georgia, serif; min-height: 28px; display: grid; place-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rk-prev-bn { width: 100%; height: 40px; border-radius: 10px; }
.rk-prev-gv { width: 100%; height: 46px; display: grid; place-items: end center; border-radius: 10px; overflow: hidden; background: rgb(127 127 127 / .12); }
.rk-prev-gv .tomb { width: 30px; height: 38px; min-height: 0; margin: 0; padding: 0; animation: none !important; border-radius: 15px 15px 3px 3px; }
.rk-prev-gv .tomb::after { display: none; }

/* ---------- the rank-up cinematic ---------- */
.rk-cine { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; overflow: hidden; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rk-a) 30%, #0a0614) 0%, #05030c 70%); animation: rkIn .5s ease-out both; }
.rk-cine.out { animation: rkOut .45s ease-in forwards; }
@keyframes rkIn { from { opacity: 0; } } @keyframes rkOut { to { opacity: 0; transform: scale(1.04); } }
.rk-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 40%, transparent 40%, rgb(0 0 0 / .65) 100%); }
.rk-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 38%, #fff, color-mix(in srgb, var(--rk-a) 70%, #fff) 30%, transparent 70%); opacity: 0; }
.rk-cine.hit .rk-flash { animation: rkFlash 1s ease-out; }
@keyframes rkFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.rk-stage { position: absolute; left: 50%; top: 38%; width: 0; height: 0; }
.rk-ringbox { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; animation: rkRingIn .8s .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.rk-cine.hit .rk-ringbox { animation: rkRingPop .9s cubic-bezier(.2, 1.6, .3, 1) forwards; }
@keyframes rkRingIn { to { opacity: 1; transform: translate(-50%, -50%) scale(.85); } }
@keyframes rkRingPop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.85); filter: brightness(2.2); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1); } }
.rk-big { width: min(34vmin, 170px); height: min(34vmin, 170px); }
.rk-big .av { width: 100%; height: 100%; font-size: min(18vmin, 90px); }
/* the ring is drawn in a sweep, before the impact */
.rk-ringbox .pr-svg { -webkit-mask: conic-gradient(#000 var(--rk-sweep), transparent 0); mask: conic-gradient(#000 var(--rk-sweep), transparent 0); animation: rkSweep .9s .5s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes rkSweep { from { --rk-sweep: 0deg; } to { --rk-sweep: 360deg; } }
.rk-ringbox .pfw2 { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--rk-a) 80%, transparent)); }
.rk-wave { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 3px solid var(--rk-a); opacity: 0; box-shadow: 0 0 22px var(--rk-a), inset 0 0 22px var(--rk-a); }
.rk-cine.hit .rk-wave { animation: rkWave 1.3s cubic-bezier(.1, .7, .3, 1) forwards; } .rk-cine.hit .rk-wave.w2 { animation-delay: .18s; border-color: #fff; }
@keyframes rkWave { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(90); border-width: .2px; } }
.rk-text { position: absolute; left: 0; right: 0; top: calc(38% + min(17vmin, 85px) + 34px); z-index: 2; text-align: center; padding: 0 16px; }
.rk-kick { display: block; font: 800 12px var(--f-body, sans-serif); letter-spacing: .5em; text-transform: uppercase; color: color-mix(in srgb, var(--rk-a) 60%, #fff); opacity: 0; }
.rk-cine.hit .rk-kick { animation: rkKick .9s .15s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes rkKick { from { opacity: 0; letter-spacing: 1.2em; } to { opacity: 1; letter-spacing: .5em; } }
.rk-lvl { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0 2px; opacity: 0; }
.rk-lvl span { font: 800 14px var(--f-body, sans-serif); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.rk-lvl b { font: 900 64px/1 Georgia, serif; background: linear-gradient(180deg, #fff, var(--rk-c) 60%, var(--rk-a)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px var(--rk-a)); min-width: 1.3em; font-variant-numeric: tabular-nums; }
.rk-cine.hit .rk-lvl { animation: rkUp .7s .1s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes rkUp { from { opacity: 0; transform: translateY(26px) scale(.8); } to { opacity: 1; transform: none; } }
.rk-name { margin: 0; font: 900 clamp(28px, 8vw, 44px)/1.1 Georgia, serif; letter-spacing: .04em; }
.rk-name span { display: inline-block; opacity: 0; background: linear-gradient(100deg, #fff 40%, var(--rk-c) 50%, #fff 60%), linear-gradient(#fff, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 300% 100%; }
.rk-cine.hit .rk-name span { animation: rkLetter .6s calc(.45s + var(--i) * .045s) cubic-bezier(.2, 1.5, .3, 1) forwards, rkNameShine 3s calc(1.4s + var(--i) * .045s) linear infinite; }
@keyframes rkLetter { from { opacity: 0; transform: translateY(30px) rotateX(80deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rkNameShine { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
.rk-sub { margin: 10px 0 0; font-weight: 700; opacity: 0; color: rgb(255 255 255 / .85); }
.rk-cine.hit .rk-sub { animation: rkUp .6s 1.1s ease-out forwards; }
.rk-tier { display: inline-block; margin: 14px 0 0; padding: 6px 22px; border-radius: 99px; font: 900 15px var(--f-body, sans-serif); letter-spacing: .35em; text-transform: uppercase; background: var(--rk-tg); opacity: 0; box-shadow: 0 0 30px color-mix(in srgb, var(--rk-a) 70%, transparent); }
.rk-cine.hit .rk-tier { animation: rkTier 1s 1s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes rkTier { from { opacity: 0; transform: scale(2.4); letter-spacing: 1.4em; filter: blur(8px); } to { opacity: 1; transform: none; letter-spacing: .35em; filter: none; } }
.rk-star { margin: 4px 0; font: 900 48px/1 Georgia, serif; color: #ffe066; text-shadow: 0 0 22px #ffd84a, 0 0 4px #fff; opacity: 0; letter-spacing: .1em; } .rk-star b { font-size: 34px; margin-left: 6px; }
.rk-cine.hit .rk-star { animation: rkUp .8s .2s cubic-bezier(.2, 1.4, .3, 1) forwards; }
.rk-cine-asc { background: radial-gradient(circle at 50% 38%, #fff6d8 0%, #c99a2e 30%, #2a1a05 75%); }
.rk-cine-asc .rk-flash { background: #fff; }
.rk-tap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; z-index: 2; margin: 18px 0 calc(28px + env(safe-area-inset-bottom)); font: 700 12px var(--f-body, sans-serif); letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .6s; }
.rk-cine.can .rk-tap { opacity: .7; animation: rkBlink 1.6s ease-in-out infinite; }
@keyframes rkBlink { 50% { opacity: .3; } }
.rk-cine.still * { animation-duration: .01s !important; animation-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
  .rk-tag::after, .rk-nm, .rk-bn::before, .rk-bn::after, .rk-halo i, .rk-ascend-btn, .rk-badge, .rk-gv-crystal .tomb::before, .rk-gv-gold .tomb::before { animation: none !important; }
}