/* Ranks (includes/Ranks.php): the level-up moment (assets/lobby-progress.js) and the ladder on Missions
   (assets/leaderboard.js). --muck-* tokens; gold is the accent. */
.rk-cel{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;background:color-mix(in srgb,#000 62%,transparent);opacity:0;transition:opacity .3s ease}
.rk-cel.show{opacity:1}
.rk-cel-box{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,calc(100vw - 32px));padding:34px 28px 26px;border:1px solid color-mix(in srgb,var(--muck-gold) 50%,var(--muck-line));border-radius:var(--muck-radius-lg);background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--muck-gold) 16%,transparent),transparent 70%),var(--muck-surface-1);color:var(--muck-text);text-align:center;transform:translateY(16px) scale(.96);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.rk-cel.show .rk-cel-box{transform:none}
.rk-cel-eyebrow{color:var(--muck-gold);font:800 11px var(--muck-font);letter-spacing:.2em;text-transform:uppercase}
.rk-cel-level{display:grid;place-items:center;width:112px;height:112px;margin:6px 0 4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b8,#ffd34f 45%,#b8892a);color:#2a1d06;font:900 46px/1 var(--muck-font);box-shadow:0 0 0 6px color-mix(in srgb,var(--muck-gold) 20%,transparent),0 12px 40px #ffd34f44}
.rk-cel-level small{display:block;margin-bottom:-14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.rk-cel h2{margin:4px 0 0;font:800 30px/1.1 var(--muck-font);letter-spacing:-.6px}
.rk-cel p{margin:0;max-width:320px;color:var(--muck-text-2);font-size:14px;line-height:1.5}
.rk-cel-reward{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--muck-gold) 14%,transparent);color:var(--muck-gold);font:800 16px var(--muck-font)}
.rk-cel-reward .material-symbols-rounded{font-size:19px}
.rk-cel-next{margin-top:4px;color:var(--muck-text-3);font-size:12.5px}
.rk-cel-next b{color:var(--muck-text-2)}
.rk-cel-row{display:flex;gap:10px;margin-top:14px}
.rk-cel-btn{height:42px;padding:0 20px;border:0;border-radius:8px;background:var(--muck-gold-cta);color:var(--muck-gold-ink);font:800 14px var(--muck-font);cursor:pointer}
.rk-cel-btn--ghost{background:var(--muck-surface-3);color:var(--muck-text);box-shadow:inset 0 0 0 1px var(--muck-line-strong)}
.rk-cel-btn:focus-visible{outline:2px solid var(--muck-gold);outline-offset:3px}
.rk-cel-confetti{position:absolute;inset:0;pointer-events:none}
.rk-cel-confetti i{position:absolute;top:-12px;left:50%;width:7px;height:12px;border-radius:2px;background:var(--c);transform:translateX(calc(var(--x) * 220px));animation:rk-fall var(--d) ease-in forwards}
@keyframes rk-fall{to{transform:translate(calc(var(--x) * 260px),520px) rotate(var(--r));opacity:0}}

/* Missions: the ladder */
#missions-body .rk-ladder{margin-top:18px;overflow:hidden;border:1px solid var(--muck-line);border-radius:var(--muck-radius-lg);background:var(--muck-surface-1)}
#missions-body .rk-head{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:24px;padding:22px 24px;border-bottom:1px solid var(--muck-line);background:radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--muck-gold) 9%,transparent),transparent 55%)}
#missions-body .rk-eyebrow{color:var(--muck-gold);font:800 10.5px var(--muck-font);letter-spacing:.16em;text-transform:uppercase}
#missions-body .rk-head h3{margin:4px 0;font:800 24px var(--muck-font);letter-spacing:-.4px;color:var(--muck-text)}
#missions-body .rk-head h3 small{margin-left:6px;color:var(--muck-text-3);font-size:14px;font-weight:700}
#missions-body .rk-head p{margin:0;color:var(--muck-text-2);font-size:13px}
#missions-body .rk-bar{height:8px;border-radius:999px;background:var(--muck-surface-3);overflow:hidden}
#missions-body .rk-bar i{display:block;height:100%;border-radius:inherit;background:var(--muck-gold)}
#missions-body .rk-list{margin:0;padding:0;list-style:none}
#missions-body .rk-list li{display:grid;grid-template-columns:64px minmax(0,1fr) auto 90px;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--muck-line)}
#missions-body .rk-list li:first-child{border-top:0}
#missions-body .rk-lvl{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--muck-surface-3);color:var(--muck-text-2);font:800 15px var(--muck-font)}
#missions-body .rk-main{display:flex;flex-direction:column;gap:2px}
#missions-body .rk-main b{color:var(--muck-text);font:700 15px var(--muck-font)}
#missions-body .rk-main span{color:var(--muck-text-3);font-size:12.5px}
#missions-body .rk-pay{display:flex;flex-direction:column;align-items:flex-end;gap:1px;color:var(--muck-gold);font:800 14px var(--muck-font);font-variant-numeric:tabular-nums}
#missions-body .rk-pay small{color:var(--muck-text-3);font:600 11px var(--muck-font);letter-spacing:.02em}
#missions-body .rk-state{justify-self:end;color:var(--muck-text-3);font:700 12px var(--muck-font)}
#missions-body .rk-list li.is-done .rk-lvl{background:color-mix(in srgb,var(--muck-green) 16%,var(--muck-surface-2));color:var(--muck-green)}
#missions-body .rk-list li.is-done .rk-state{color:var(--muck-green)}
#missions-body .rk-list li.is-current{background:linear-gradient(90deg,color-mix(in srgb,var(--muck-gold) 9%,transparent),transparent 60%);box-shadow:inset 3px 0 0 var(--muck-gold)}
#missions-body .rk-list li.is-current .rk-lvl{background:radial-gradient(circle at 35% 30%,#fff1b8,#ffd34f 45%,#b8892a);color:#2a1d06}
#missions-body .rk-list li.is-current .rk-state{color:var(--muck-gold)}
#missions-body .rk-list li.is-next .rk-pay{color:var(--muck-text-2)}
@media(max-width:719px){#missions-body .rk-head{grid-template-columns:1fr;gap:12px;padding:18px}#missions-body .rk-list li{grid-template-columns:52px minmax(0,1fr) auto;gap:10px;padding:12px 16px}#missions-body .rk-state{display:none}}

/* Rank portraits share the mission badge treatment; level stays readable outside the artwork. */
.rk-cel-portrait{display:block;width:144px;height:144px;object-fit:contain;margin:6px 0 0}
.rk-cel-level-label{font:700 12px var(--muck-font);color:var(--muck-text-2)}
#missions-body .rk-portrait{display:block;width:64px;height:64px;object-fit:contain}
#missions-body .rk-list li.is-next .rk-portrait{filter:grayscale(.85);opacity:.55}
#missions-body .rk-main .rk-range{color:var(--muck-text-2);font-size:11.5px}
#missions-body .rk-lvl{justify-self:center}
@media(max-width:719px){#missions-body .rk-portrait{width:52px;height:52px}}

/* the circle (no portrait) is where a rank starts (LV 1); the line under the name its range, and on your row your own level */
#missions-body .rk-lvl{grid-auto-flow:row;align-content:center;gap:0;line-height:1}
#missions-body .rk-lvl small{font-size:8px;font-weight:800;letter-spacing:.06em;opacity:.75}
#missions-body .rk-main .rk-range{font-style:normal;font-weight:700}
#missions-body .rk-list li.is-current .rk-range{color:var(--muck-gold)}