/* 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: metal, fire, ice, stars and light, each with its own ornament ---------- */
:root {
  --rk-ic-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21C4 11 10 4 21 3c-1 11-7 17-18 18z'/%3E%3C/svg%3E");
  --rk-ic-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 5 7 7 7 14a7 7 0 0 1-14 0c0-4 2-6 4-8 0 3 1 5 3 6-1-5-1-8 0-12z'/%3E%3C/svg%3E");
  --rk-ic-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 3.5l3 3 3-3M9 20.5l3-3 3 3M2.6 10.6l4.1-1.1-1.1-4.1M21.4 13.4l-4.1 1.1 1.1 4.1M2.6 13.4l4.1 1.1-1.1 4.1M21.4 10.6l-4.1-1.1 1.1-4.1'/%3E%3C/g%3E%3C/svg%3E");
  --rk-ic-planet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cellipse cx='12' cy='12' rx='11' ry='3.4' fill='none' stroke='black' stroke-width='1.7' transform='rotate(-22 12 12)'/%3E%3C/svg%3E");
  --rk-ic-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 3l7.8 13.5H4.2zM12 21L4.2 7.5h15.6z'/%3E%3C/g%3E%3C/svg%3E");
  --rk-ic-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l5 5 5-9 5 9 5-5-2 12H4z'/%3E%3Crect x='4' y='20' width='16' height='2.6' rx='1'/%3E%3C/svg%3E");
  --rk-ic-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l5 6-11 13L1 9z'/%3E%3C/svg%3E");
  --rk-ic-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z'/%3E%3C/svg%3E");
  --rk-ic-halo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M12 9l1.8 5.2L19 16l-5.2 1.8L12 23l-1.8-5.2L5 16l5.2-1.8z'/%3E%3C/svg%3E");
}
.rk-nm { position: relative; background-size: 220% 100%; }
.rk-nm:not(.rk-nm-plain) { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* the ornament before the name, painted through an icon mask so it can shimmer like the letters */
.rk-nm::before { display: inline-block; width: .8em; height: .8em; margin-right: .22em; vertical-align: -.05em; -webkit-mask: var(--rk-ic) center / contain no-repeat; mask: var(--rk-ic) center / contain no-repeat; background: var(--rk-icbg); }
.rk-nm:is(.rk-nm-verdant, .rk-nm-ember, .rk-nm-frost, .rk-nm-nebula, .rk-nm-arcane, .rk-nm-royal, .rk-nm-prism, .rk-nm-mythic, .rk-nm-ascend)::before { content: ''; }
/* a glint that hops from letter to letter */
.rk-nm::after { position: absolute; width: .55em; height: .55em; left: 10%; top: -.15em; pointer-events: none; -webkit-mask: var(--rk-ic-star) center / contain no-repeat; mask: var(--rk-ic-star) center / contain no-repeat; background: var(--rk-spark, #fff); opacity: 0; }
.rk-nm:is(.rk-nm-gilt, .rk-nm-frost, .rk-nm-royal, .rk-nm-prism, .rk-nm-mythic, .rk-nm-ascend)::after { content: ''; animation: rkSpark 3.2s ease-in-out infinite; }

.rk-nm-steel { background-image: linear-gradient(100deg, transparent 42%, rgb(255 255 255 / .95) 50%, transparent 58%), repeating-linear-gradient(0deg, rgb(255 255 255 / .2) 0 1px, transparent 1px 2px), linear-gradient(180deg, #ffffff 0%, #c4ced9 40%, #4f5c6b 50%, #a9b6c4 68%, #6f7c8b 100%);
  background-size: 300% 100%, 100% 100%, 100% 100%; animation: rkGlint 5s ease-in-out infinite; filter: drop-shadow(0 1px 0 rgb(20 30 40 / .7)) drop-shadow(0 0 1px rgb(0 0 0 / .45)); }
.rk-nm-gilt { background-image: linear-gradient(100deg, transparent 42%, rgb(255 255 255 / .95) 50%, transparent 58%), linear-gradient(180deg, #fff8c8 0%, #f6cf4a 38%, #a8740a 50%, #e8b83a 68%, #fff0a0 100%);
  background-size: 300% 100%, 100% 100%; animation: rkGlint 4s ease-in-out infinite; filter: drop-shadow(0 1px 0 #5a3a00) drop-shadow(0 0 4px rgb(255 200 60 / .45)); --rk-spark: #fffbe0; }
.rk-nm-verdant { background-image: linear-gradient(100deg, transparent 40%, rgb(240 255 200 / .9) 50%, transparent 60%), linear-gradient(180deg, #f0ffd0 0%, #8fe07a 40%, #1f7a3a 52%, #5cc46a 72%, #d8ffb0 100%);
  background-size: 300% 100%, 100% 100%; animation: rkGlint 6s ease-in-out infinite; filter: drop-shadow(0 1px 0 #0c3a18) drop-shadow(0 0 5px rgb(80 220 120 / .45));
  --rk-ic: var(--rk-ic-leaf); --rk-icbg: linear-gradient(135deg, #d8ffb0, #2fae5a 60%, #136a2a); }
.rk-nm-verdant::before { transform-origin: 10% 90%; animation: rkSway 3s ease-in-out infinite; }
.rk-nm-ember { background-image: linear-gradient(0deg, #ff2d00 0%, #ff7a00 30%, #ffd84a 55%, #fff6d0 70%, #ffb000 85%, #ff3d00 100%); background-size: 100% 220%; animation: rkFire 1.6s linear infinite, rkGlowFire .9s steps(3) infinite;
  --rk-ic: var(--rk-ic-flame); --rk-icbg: linear-gradient(0deg, #ff2d00, #ff9a00 50%, #fff2a0); }
.rk-nm-ember::before { transform-origin: 50% 100%; animation: rkFlick .45s ease-in-out infinite alternate; }
.rk-nm-ember::after { content: ''; inset: -.5em 0 0 0; width: auto; height: auto; top: -.6em; opacity: 1; -webkit-mask: none; mask: none;
  background: radial-gradient(1.6px 1.6px at 20% 90%, #ffd84a, transparent), radial-gradient(1.2px 1.2px at 55% 80%, #ff8a00, transparent), radial-gradient(1.6px 1.6px at 85% 95%, #fff2a0, transparent), radial-gradient(1.2px 1.2px at 38% 70%, #ffb000, transparent);
  background-size: 100% 100%; animation: rkSparksUp 1.8s linear infinite; }
.rk-nm-frost { background-image: linear-gradient(100deg, transparent 42%, #ffffff 50%, transparent 58%), linear-gradient(180deg, #ffffff 0%, #d8f3ff 40%, #5ab4e8 51%, #bfe9ff 70%, #ffffff 100%);
  background-size: 300% 100%, 100% 100%; animation: rkGlint 5s ease-in-out infinite, rkGlowIce 2.6s ease-in-out infinite; --rk-ic: var(--rk-ic-snow); --rk-icbg: linear-gradient(135deg, #ffffff, #8fd8ff); --rk-spark: #e8f8ff; }
.rk-nm-frost::before { animation: spin 9s linear infinite; }
.rk-nm-nebula { background-image: radial-gradient(1px 1px at 18% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 80% 35%, #fff 50%, transparent 51%),
  radial-gradient(60% 120% at 25% 50%, #ff7ae0, transparent 60%), radial-gradient(60% 120% at 75% 50%, #6ad8ff, transparent 60%), linear-gradient(90deg, #6a3cff, #c04fd8, #3a7aff, #6a3cff);
  background-size: 40px 100%, 52px 100%, 46px 100%, 200% 100%, 200% 100%, 300% 100%; animation: rkNebula 9s linear infinite; filter: drop-shadow(0 1px 0 #1a0a3a) drop-shadow(0 0 6px rgb(192 79 216 / .55));
  --rk-ic: var(--rk-ic-planet); --rk-icbg: linear-gradient(135deg, #ffb0f0, #8a5cff 60%, #4ad8ff); }
.rk-nm-nebula::before { animation: rkTilt 6s ease-in-out infinite; }
.rk-nm-arcane { background-image: linear-gradient(90deg, #f0a8ff, #7fd8ff, #b6a0ff, #e08bff, #f0a8ff); background-size: 300% 100%; animation: rkSlide 3.5s linear infinite, rkGlowArc 2.2s ease-in-out infinite; letter-spacing: .03em;
  --rk-ic: var(--rk-ic-sigil); --rk-icbg: linear-gradient(135deg, #e08bff, #7fd8ff); }
.rk-nm-arcane::before { animation: spin 7s linear infinite; }
.rk-nm-royal { background-image: linear-gradient(100deg, transparent 40%, #fffdf0 50%, transparent 60%), linear-gradient(180deg, #fff6c8 0%, #ffd84a 35%, #b8860b 50%, #f6c83a 66%, #fff0a0 100%);
  background-size: 300% 100%, 100% 100%; animation: rkGlint 3.2s ease-in-out infinite; filter: drop-shadow(0 1px 0 #4a2a00) drop-shadow(0 0 6px rgb(255 205 70 / .6));
  --rk-ic: var(--rk-ic-crown); --rk-icbg: linear-gradient(180deg, #fff6c8, #ffd84a 45%, #b8860b); --rk-spark: #fffbe0; }
.rk-nm-royal::before { animation: rkBob 2.4s ease-in-out infinite; }
.rk-nm-prism { background-image: repeating-linear-gradient(115deg, rgb(255 255 255 / .35) 0 2px, transparent 2px 7px), linear-gradient(115deg, #ff3cac, #ffe66d, #2bd2ff, #7cff6b, #b45cff, #ff3cac);
  background-size: 100% 100%, 300% 100%; animation: rkPrism 3s linear infinite; filter: drop-shadow(0 1px 0 rgb(40 0 60 / .5)) drop-shadow(0 0 6px rgb(255 255 255 / .55));
  --rk-ic: var(--rk-ic-gem); --rk-icbg: linear-gradient(135deg, #ff3cac, #ffe66d, #2bd2ff, #b45cff); }
.rk-nm-prism::before { animation: rkHue 3s linear infinite; }
.rk-nm-mythic { background-image: linear-gradient(100deg, transparent 42%, #fff 50%, transparent 58%), linear-gradient(90deg, #ffd84a, #ff7a3c, #ff3cac, #b45cff, #7fd8ff, #ffd84a);
  background-size: 300% 100%, 300% 100%; animation: rkMythic 3s linear infinite; filter: drop-shadow(0 1px 0 #3a0a20) drop-shadow(0 0 8px rgb(255 160 74 / .75)) drop-shadow(0 0 2px #fff);
  --rk-ic: var(--rk-ic-star); --rk-icbg: linear-gradient(135deg, #fff6c8, #ffd84a 40%, #ff3cac); --rk-spark: #fff6c8; }
.rk-nm-mythic::before { animation: rkStar 2.4s ease-in-out infinite; }
.rk-nm-ascend { background-image: linear-gradient(100deg, transparent 40%, #fff 50%, transparent 60%), linear-gradient(180deg, #ffffff 0%, #fff6d0 42%, #e8b84a 52%, #fff0b8 70%, #ffffff 100%);
  background-size: 300% 100%, 100% 100%; animation: rkGlint 2.6s ease-in-out infinite, rkGlowAsc 2.4s ease-in-out infinite; --rk-ic: var(--rk-ic-halo); --rk-icbg: linear-gradient(180deg, #fffbe6, #ffd84a); }
.rk-nm-ascend::before { animation: rkBob 3s ease-in-out infinite; }
/* the header's name line clips at its box: give the glows room */
.who-txt h1 { padding: 2px 4px; margin-left: -4px; margin-right: -4px; }
@keyframes rkGlint { 0%, 35% { background-position: 150% 0, 0 0, 0 0; } 100% { background-position: -150% 0, 0 0, 0 0; } }
@keyframes rkFire { to { background-position: 0 -220%; } }
@keyframes rkGlowFire { 0% { filter: drop-shadow(0 1px 0 #5a1000) drop-shadow(0 0 4px #ff6a00); } 50% { filter: drop-shadow(0 1px 0 #5a1000) drop-shadow(0 -2px 8px #ffb000); } 100% { filter: drop-shadow(0 1px 0 #5a1000) drop-shadow(0 0 5px #ff3d00); } }
@keyframes rkGlowIce { 50% { filter: drop-shadow(0 1px 0 #1a4a6a) drop-shadow(0 0 7px #a8e4ff); } 0%, 100% { filter: drop-shadow(0 1px 0 #1a4a6a) drop-shadow(0 0 2px #a8e4ff); } }
@keyframes rkGlowArc { 50% { filter: drop-shadow(0 1px 0 #2a0a4a) drop-shadow(0 0 9px #b05cff); } 0%, 100% { filter: drop-shadow(0 1px 0 #2a0a4a) drop-shadow(0 0 3px #b05cff); } }
@keyframes rkGlowAsc { 50% { filter: drop-shadow(0 0 1px #8a6a10) drop-shadow(0 1px 0 #8a6a10) drop-shadow(0 0 10px #fff6c8) drop-shadow(0 0 3px #ffd84a); } 0%, 100% { filter: drop-shadow(0 0 1px #8a6a10) drop-shadow(0 1px 0 #8a6a10) drop-shadow(0 0 4px #fff6c8); } }
@keyframes rkMythic { 0% { background-position: 150% 0, 0 0; } 100% { background-position: -150% 0, 300% 0; } }
@keyframes rkNebula { to { background-position: 40px 0, -52px 0, 46px 0, 200% 0, -200% 0, 300% 0; } }
@keyframes rkPrism { to { background-position: 0 0, 300% 0; } }
@keyframes rkSway { 50% { transform: rotate(-14deg); } }
@keyframes rkFlick { from { transform: scale(.92, 1.06) skewX(-4deg); } to { transform: scale(1.06, .94) skewX(4deg); } }
@keyframes rkSparksUp { from { transform: translateY(.5em); opacity: 1; } to { transform: translateY(-.4em); opacity: 0; } }
@keyframes rkTilt { 50% { transform: rotate(18deg) scale(1.08); } }
@keyframes rkBob { 50% { transform: translateY(-.12em) rotate(-6deg); } }
@keyframes rkHue { to { filter: hue-rotate(360deg); } }
@keyframes rkStar { 50% { transform: rotate(45deg) scale(1.2); } }
@keyframes rkSpark { 0%, 8% { left: 8%; top: -.2em; opacity: 0; transform: scale(.2) rotate(0); } 14% { opacity: 1; transform: scale(1) rotate(45deg); } 22%, 40% { left: 8%; top: -.2em; opacity: 0; transform: scale(.2); }
  41%, 48% { left: 55%; top: .45em; opacity: 0; transform: scale(.2); } 54% { opacity: 1; transform: scale(.9) rotate(45deg); } 62%, 78% { left: 55%; top: .45em; opacity: 0; transform: scale(.2); }
  79%, 84% { left: 88%; top: -.1em; opacity: 0; transform: scale(.2); } 90% { opacity: 1; transform: scale(1.1) rotate(45deg); } 98%, 100% { left: 88%; top: -.1em; opacity: 0; transform: scale(.2); } }
@keyframes rkSlide { to { background-position: 200% 0; } }

/* ---------- profile banners: painted scenes (rankfx.js) behind the portrait; flat colours until the canvas draws ---------- */
.rk-bnr { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; }
.rk-bnr > canvas.rkfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.rk-bn-none { background: linear-gradient(160deg, rgb(127 127 127 / .1), rgb(127 127 127 / .2)); }
.rk-bn-dawn { background: linear-gradient(180deg, #2b2a6b, #ff7eb3 55%, #ffd29a); } .rk-bn-ocean { background: linear-gradient(180deg, #1a86b8, #062a50); } .rk-bn-forest { background: linear-gradient(180deg, #123040, #08140e); }
.rk-bn-lava { background: linear-gradient(180deg, #2a0702, #a33208); } .rk-bn-aurora { background: linear-gradient(180deg, #041530, #0d3248); } .rk-bn-stars { background: radial-gradient(#120a2c, #02010a); }
.rk-bn-runes { background: radial-gradient(#1a2a5e, #03050f); } .rk-bn-throne { background: linear-gradient(180deg, #2a0505, #5a0a14); } .rk-bn-cosmos { background: radial-gradient(#2a1a5a, #03020a); }
.rk-bn-mythic { background: radial-gradient(#7a2408, #0a0208); } .rk-bn-ascend { background: linear-gradient(180deg, #fff3d0, #d99a3a); }
/* an identity card: you as others see you */
.rk-idcard { display: grid; place-items: center; min-height: 196px; padding: 18px 12px 14px; color: #fff; }
.rk-idcard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(0 0 0 / .45)); }
.rk-idcard.rk-bn-none { color: inherit; } .rk-idcard.rk-bn-none::after { display: none; }
.rk-id { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; max-width: 100%; }
.rk-id .big-avatar { width: 96px; height: 96px; filter: drop-shadow(0 8px 16px rgb(0 0 0 / .45)); } .rk-id .big-avatar .av { width: 96px; height: 96px; font-size: 48px; }
.rk-id-name { display: block; max-width: 100%; margin-top: 4px; font: 900 22px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .02em; text-shadow: 0 2px 8px rgb(0 0 0 / .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 6px; }
.rk-id-name .rk-nm:not(.rk-nm-plain) { text-shadow: none; }
.rk-bn-none .rk-id-name { text-shadow: none; }
.rk-id .rk-tag { box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 4px 12px rgb(0 0 0 / .4); }
.rk-id-hint { margin-top: 2px; padding: 3px 10px; border-radius: 99px; font: 800 11px var(--f-body, sans-serif); letter-spacing: .05em; color: #fff; background: rgb(0 0 0 / .35); backdrop-filter: blur(4px); }
.rk-idbtn { cursor: pointer; border-radius: 18px; transition: transform .15s; } .rk-idbtn:active { transform: scale(.98); } .rk-idbtn:focus-visible { outline: 3px solid var(--accent, #ffb000); outline-offset: 2px; }
/* a friend's profile */
.rk-profile { margin: -6px -6px 12px; }
/* a co-op partner's card */
.rk-duo { height: 96px; margin: 2px 0 -96px; }
.rk-duo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / .55), rgb(0 0 0 / .15) 70%); }
.duo-head.on-bn { position: relative; min-height: 96px; padding: 10px 12px; box-sizing: border-box; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.duo-head.on-bn small { color: rgb(255 255 255 / .85); }

/* ---------- gravestones: each stone in its own place (rankgrave.js); the words stay on the .tomb box ---------- */
.tomb-scene.rk-gscene { background: #2a2d34; isolation: isolate; }
.rk-gscene > canvas.rkfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.rk-gscene .tomb { width: min(236px, 66%); margin-top: 52px; background: none; box-shadow: none; }
.rk-gscene .tomb::before, .rk-gscene .tomb::after { display: none; }
.rk-gscene .tomb-ground { visibility: hidden; height: 40px; margin: 0; }
.rk-gscene .tomb-cameo { width: 66px; height: 66px; background: linear-gradient(145deg, var(--gc1, #e9e2c8), var(--gc2, #a8975f)); box-shadow: inset 0 2px 4px rgb(0 0 0 / .45), 0 1px 0 rgb(255 255 255 / .5), 0 0 0 2px rgb(0 0 0 / .12); }
.rk-gscene .tomb-name { font-size: 21px; }
.rk-gscene .tomb-epi { font-size: 12.5px; } .rk-gscene .tomb-cause { font-size: 11.5px; }
/* the carved words take the colour of each stone */
.rk-gv-stone { --gc1: #d8d2bc; --gc2: #8a8468; background: #8a929c; }
.rk-gv-marble { --gc1: #ffffff; --gc2: #c9c2a8; background: #9ccfee; }
.rk-gv-granite { --gc1: #f2e2b0; --gc2: #8a6a2a; background: #1a2034; }
.rk-gv-granite .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause, .tomb-mini-name, small) { color: #ecd8a0; text-shadow: 0 1px 0 #000, 0 0 6px rgb(236 216 160 / .25); }
.rk-gv-jade { --gc1: #e8ffe8; --gc2: #2f8a5a; background: #a85a7a; }
.rk-gv-jade .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause, .tomb-mini-name, small) { color: #f2fff6; text-shadow: 0 1px 0 rgb(0 50 20 / .8), 0 0 8px rgb(0 60 30 / .4); }
.rk-gv-rose { --gc1: #fff0f6; --gc2: #c36a92; background: #ffb0b8; }
.rk-gv-rose .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-mini-name) { color: #6a1f42; text-shadow: 0 1px 0 rgb(255 255 255 / .7); } .rk-gv-rose .tomb :is(.tomb-epi, .tomb-cause, small) { color: #7a3a58; }
.rk-gv-obsidian { --gc1: #ffb060; --gc2: #5a1a00; background: #3a0602; }
.rk-gv-obsidian .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause, .tomb-mini-name, small) { color: #ffd9a0; text-shadow: 0 0 8px rgb(255 106 0 / .8), 0 1px 0 #000; }
.rk-gv-crystal { --gc1: #ffffff; --gc2: #7ab4e8; background: #163a6a; }
.rk-gv-crystal .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-mini-name) { color: #1a3566; text-shadow: 0 0 6px rgb(255 255 255 / .95), 0 1px 0 #fff; } .rk-gv-crystal .tomb :is(.tomb-epi, .tomb-cause, small) { color: #2a4a7a; text-shadow: 0 0 5px #fff; }
.rk-gv-gold { --gc1: #fff6c8; --gc2: #b8860b; background: #6a3a10; }
.rk-gv-gold .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause, .tomb-mini-name, small) { color: #4a2c00; text-shadow: 0 1px 0 rgb(255 250 220 / .9); }
.rk-gv-celestial { --gc1: #e8e2ff; --gc2: #5a4aa8; background: #1a1050; }
.rk-gv-celestial .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-epi, .tomb-cause, .tomb-mini-name, small) { color: #efeaff; text-shadow: 0 0 8px #7c5cff, 0 1px 0 #000; }
.rk-gv-ascend { --gc1: #ffffff; --gc2: #e8c25a; background: #ffefc4; }
.rk-gv-ascend .tomb :is(.tomb-name, .tomb-years, .tomb-here, .tomb-mini-name) { color: #6a4a00; text-shadow: 0 1px 0 #fff; } .rk-gv-ascend .tomb :is(.tomb-epi, .tomb-cause, small) { color: #7a5a10; }
/* a small gravestone: the style window, the Graveyard, a friend's profile, the end of a co-op game */
.tomb-scene.rk-mini { position: relative; display: grid; justify-items: center; align-content: start; height: 150px; margin: 0; padding: 0; border-radius: 14px; overflow: hidden; }
.rk-mini .tomb { width: 44%; height: 58%; margin-top: 30px; padding: 26% 4px 0; box-sizing: border-box; display: grid; align-content: start; justify-items: center; gap: 1px; animation: none; min-height: 0; overflow: hidden; }
.tomb-mini-name { display: block; max-width: 100%; font: 800 13px/1.15 Georgia, serif; color: #3a3e45; text-shadow: 0 1px 0 rgb(255 255 255 / .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-mini .tomb small { display: block; font: 700 10px Georgia, serif; letter-spacing: .08em; color: #5a5f67; white-space: nowrap; }
.rk-friend-gv { margin: 0 0 12px !important; height: 190px !important; }
.rk-graves2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.rk-graves2 .tomb-scene.rk-mini { height: 160px; }
.grave.rk-grave-row { grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.rk-grave-row .tomb-scene.rk-mini { height: 88px; border-radius: 12px; } .rk-grave-row .rk-mini .tomb { margin-top: 16px; padding-top: 34%; } .rk-grave-row .tomb-mini-name { font-size: 8px; }
.rk-grave-row > div:last-child { display: grid; gap: 2px; min-width: 0; }

/* ---------- 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 window: a live showcase, tabs, a grid of live previews */
.rk-showbox { margin: -4px -4px 10px; }
.rk-show { min-height: 214px; }
.rk-show-gv.tomb-scene.rk-mini { height: 236px; } .rk-show-gv .tomb { width: 46%; margin-top: 44px; padding-top: 30%; } .rk-show-gv .tomb-mini-name { font-size: 15px; } .rk-show-gv .tomb small { font-size: 11px; }
.rk-show-note { margin: 6px 4px 0; text-align: center; font-size: .72rem; font-weight: 700; opacity: .75; }
.rk-show-note.peek { opacity: 1; color: var(--accent, #d98a00); }
.rk-tabs { margin: 0 0 10px; } .rk-tabs small { margin-left: 3px; font-size: .68em; opacity: .7; }
.rk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rk-look { position: relative; display: grid; gap: 0; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; color: inherit; font: inherit; text-align: left; background: var(--surface, rgb(127 127 127 / .08)); box-shadow: inset 0 0 0 1px rgb(127 127 127 / .22); min-width: 0; transition: transform .15s, box-shadow .2s; }
.rk-look:active { transform: scale(.97); }
.rk-look.on { box-shadow: inset 0 0 0 2.5px #ffc83a, 0 0 18px rgb(255 200 60 / .4); }
.rk-look.on::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 12px var(--f-body, sans-serif); color: #3a2400; background: linear-gradient(135deg, #fff6c8, #ffc83a); box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.rk-look.peek { box-shadow: inset 0 0 0 2px var(--accent, #7c5cff); }
.rk-look.locked .rk-prev { filter: grayscale(.75) brightness(.8); }
.rk-look.locked .rk-prev::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; background: rgb(0 0 0 / .18); }
.rk-prev { position: relative; display: block; }
.rk-look-txt { display: grid; gap: 1px; padding: 7px 10px 8px; min-width: 0; }
.rk-look-txt b { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rk-look-txt small { font-size: .64rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-look-tier { position: absolute; top: 7px; left: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--rk-tg); box-shadow: 0 0 0 2px rgb(255 255 255 / .8), 0 1px 4px rgb(0 0 0 / .4); font-style: normal; }
.rk-look-tier.asc { width: auto; height: auto; padding: 0 5px; border-radius: 8px; font: 900 10px/16px var(--f-body, sans-serif); color: #5a3a00; background: linear-gradient(135deg, #fff6c8, #ffd84a); }
.rk-prev-name { display: grid; place-items: center; height: 76px; padding: 0 8px; font: 900 1.25rem Georgia, serif; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgb(127 127 127 / .08), rgb(127 127 127 / .22)); }
.rk-prev-name > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 2px; }
.rk-grid-name .rk-look:nth-child(odd) .rk-prev-name { background: radial-gradient(circle at 50% 40%, #2a2d3a, #12131a); }
.rk-prev-bn.rk-bnr { height: 92px; border-radius: 0; }
.rk-prev-gv.tomb-scene.rk-mini { height: 128px; border-radius: 0; } .rk-prev-gv .tomb { margin-top: 26px; } .rk-prev-gv .tomb-mini-name { font-size: 10px; }

/* ---------- 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-nm::before, .rk-nm::after, .rk-halo i, .rk-ascend-btn, .rk-badge { animation: none !important; }
}

/* Only what you look at moves (iPhones lag otherwise): in the Rank style window only the look you wear or try on is animated */
.rk-look:not(.on):not(.peek) *, .rk-look:not(.on):not(.peek) *::before, .rk-look:not(.on):not(.peek) *::after { animation-play-state: paused !important; }

/* ---------- the Tag tab: wear any title you have earned (ranks.js RK.tags), in rows that slide ---------- */
.rk-tag i.rk-tg-ic { width: auto; height: auto; background: none; box-shadow: none; font-style: normal; font-size: 1.15em; line-height: 1; letter-spacing: 0; margin-right: 1px; }
.rk-tg-hall, .rk-tg-set { text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.rk-tg-bronze { --rk-tg: linear-gradient(135deg, #c07a3e, #6e3f1c); }
.rk-tg-silver { --rk-tg: linear-gradient(135deg, #a3adb9, #59626e); }
.rk-tg-gold { --rk-tg: linear-gradient(135deg, #e3b22e, #8a5a06); }
.rk-tg-diamond { --rk-tg: linear-gradient(135deg, #2c8fb8, #8a7dff); box-shadow: 0 0 0 1px rgb(232 251 255 / .6) inset, 0 0 8px rgb(120 210 255 / .45); }
.rk-tg-mythic { --rk-tg: linear-gradient(135deg, #7a1a8a, #e0306a 60%, #ff9a5a); box-shadow: 0 0 0 1px rgb(255 255 255 / .3) inset, 0 0 9px rgb(255 90 120 / .5); }
.rk-tg-celestial { --rk-tg: linear-gradient(135deg, #1a3a8a, #7a5aff 60%, #9fd8ff); box-shadow: 0 0 0 1px rgb(255 255 255 / .35) inset, 0 0 10px rgb(140 170 255 / .6); }
.rk-tg-cosmic { --rk-tg: linear-gradient(135deg, #ff3cac, #2bd2ff 50%, #b45cff); background-size: 200% 200%; animation: rkSlide 5s linear infinite; box-shadow: 0 0 0 1px #ffe66d inset, 0 0 12px rgb(255 120 220 / .55); }
.rk-tg-set { --rk-tg: linear-gradient(135deg, #0f3d3a, #127a66 55%, #0b2a3c); box-shadow: 0 0 0 1px rgb(231 194 90 / .95) inset, 0 2px 6px rgb(0 0 0 / .25); }
.rk-tg-asc { --rk-tg: linear-gradient(135deg, #fff4bd, #ffd04a 45%, #c98600); color: #4a2a00; } .rk-tg-asc b { color: #7a3d00; text-shadow: none; }
.rk-grid.rk-grid-tag { display: block; }
.rk-tg-hint { margin: 0 4px 8px; }
.rk-tg-group { margin: 0 0 10px; }
.rk-tg-group h4 { display: flex; align-items: baseline; gap: 6px; margin: 0 2px 5px; font-size: .8rem; font-weight: 800; } .rk-tg-group h4 small { font-weight: 700; opacity: .6; }
.rk-tg-wrap { position: relative; }
.rk-tg-row { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 8px; padding: 2px 2px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 2px; scrollbar-width: none; cursor: grab; }
.rk-tg-row::-webkit-scrollbar { display: none; }
.rk-tg-row > .rk-look { scroll-snap-align: start; }
.rk-tg-row.drag { scroll-snap-type: none; cursor: grabbing; } .rk-tg-row.drag .rk-look { pointer-events: none; }
.rk-tabs.drag { cursor: grabbing; } .rk-tabs.drag button { pointer-events: none; }
.rk-prev-tag { display: grid; place-items: center; min-height: 58px; padding: 0 6px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a2d3a, #12131a); }
.rk-prev-tag .rk-tag { font-size: 9.5px; letter-spacing: .06em; }
.rk-tg-arr { position: absolute; top: 31px; z-index: 2; display: none; place-items: center; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; border-radius: 50%; background: rgb(10 10 16 / .72); color: #fff; font: 900 18px/1 var(--f-body, sans-serif); cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.rk-tg-arr.l { left: -2px; } .rk-tg-arr.r { right: -2px; }
.rk-tg-wrap.can-l > .rk-tg-arr.l, .rk-tg-wrap.can-r > .rk-tg-arr.r { display: grid; }
/* switching tabs slides the new looks in from the side you swiped toward */
.rk-grid.rk-in-next { animation: rkInNext .26s cubic-bezier(.2, .8, .3, 1); } .rk-grid.rk-in-prev { animation: rkInPrev .26s cubic-bezier(.2, .8, .3, 1); }
@keyframes rkInNext { from { transform: translateX(36px); opacity: 0; } } @keyframes rkInPrev { from { transform: translateX(-36px); opacity: 0; } }
/* the Prestige window: tap your tag to change it */
.rk-tagbtn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 99px; } .rk-tagbtn > i { font-style: normal; font-size: 11px; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .rk-tg-cosmic, .rk-grid.rk-in-next, .rk-grid.rk-in-prev { animation: none !important; } }