/* =========================================================
   Music FM — Global engagement / rank experience V36
========================================================= */
:root{
    --mf-eng-blue:#147cff;
    --mf-eng-cyan:#59c7ff;
    --mf-eng-navy:#071526;
    --mf-eng-ink:#122033;
    --mf-eng-soft:#f5f8fc;
    --mf-eng-line:#e4ebf4;
}

.mf-engagement-toast-stack{
    position:fixed;
    z-index:2147482500;
    top:92px;
    left:22px;
    width:min(360px,calc(100vw - 28px));
    display:grid;
    gap:10px;
    pointer-events:none;
    direction:rtl;
}
.mf-engagement-toast{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:12px;
    align-items:center;
    min-height:70px;
    padding:12px 14px;
    border:1px solid rgba(20,124,255,.14);
    border-radius:4px;
    background:rgba(255,255,255,.985);
    box-shadow:0 18px 42px rgba(10,30,65,.13),0 3px 10px rgba(10,30,65,.05);
    color:var(--mf-eng-ink);
    opacity:0;
    transform:translateY(-8px) scale(.985);
    transition:opacity .28s ease,transform .34s cubic-bezier(.16,1,.3,1);
    overflow:hidden;
}
.mf-engagement-toast::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(180deg,var(--mf-eng-cyan),var(--mf-eng-blue));
}
.mf-engagement-toast.is-visible{opacity:1;transform:none}
.mf-engagement-toast-icon{
    width:40px;height:40px;display:grid;place-items:center;
    border-radius:4px;background:#eef6ff;color:var(--mf-eng-blue);font-size:18px;
}
.mf-engagement-toast strong{display:block;font:900 15px/1.2 "Heebo",Arial,sans-serif;color:var(--mf-eng-navy)}
.mf-engagement-toast span{display:block;margin-top:3px;font:650 12.5px/1.45 "Heebo",Arial,sans-serif;color:#718096}

.mf-levelup-backdrop{
    position:fixed;inset:0;z-index:2147483000;
    display:grid;place-items:center;padding:22px;
    background:rgba(4,12,25,.62);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    opacity:0;visibility:hidden;
    transition:opacity .34s ease,visibility .34s ease;
    direction:rtl;
}
.mf-levelup-backdrop.is-open{opacity:1;visibility:visible}
.mf-levelup-card{
    position:relative;
    width:min(520px,100%);
    padding:42px 36px 34px;
    overflow:hidden;
    border:1px solid rgba(111,197,255,.25);
    border-radius:5px;
    background:
      radial-gradient(circle at 80% 12%,rgba(54,164,255,.18),transparent 34%),
      linear-gradient(145deg,#071526 0%,#0b1d35 54%,#102845 100%);
    box-shadow:0 34px 90px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.025);
    color:#fff;text-align:center;
    transform:translateY(20px) scale(.965);
    opacity:0;
    transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .32s ease;
}
.mf-levelup-backdrop.is-open .mf-levelup-card{transform:none;opacity:1}
.mf-levelup-card::before{
    content:"";position:absolute;top:0;right:0;left:0;height:3px;
    background:linear-gradient(90deg,transparent,var(--mf-eng-cyan),#fff,var(--mf-eng-blue),transparent);
    box-shadow:0 0 18px rgba(89,199,255,.65);
}
.mf-levelup-kicker{font:800 11px/1 "Heebo",Arial,sans-serif;letter-spacing:1.8px;color:#77c8ff}
.mf-levelup-emblem{
    width:92px;height:92px;margin:22px auto 18px;display:grid;place-items:center;
    border:1px solid rgba(111,197,255,.3);border-radius:50%;
    background:radial-gradient(circle at 50% 38%,rgba(89,199,255,.25),rgba(20,124,255,.10) 52%,rgba(5,16,34,.2) 100%);
    box-shadow:0 0 0 9px rgba(20,124,255,.05),0 0 42px rgba(20,124,255,.23);
    color:#fff;font-size:34px;
}
.mf-levelup-card h2{margin:0;color:#fff!important;font:950 30px/1.12 "Heebo",Arial,sans-serif!important;letter-spacing:-.5px!important}
.mf-levelup-card h3{margin:8px 0 0;color:#68c4ff;font:900 22px/1.2 "Heebo",Arial,sans-serif}
.mf-levelup-card p{margin:14px auto 0;max-width:390px;color:rgba(255,255,255,.76);font:600 14px/1.7 "Heebo",Arial,sans-serif}
.mf-levelup-total{display:inline-flex;align-items:center;gap:7px;margin-top:19px;padding:8px 12px;border:1px solid rgba(255,255,255,.10);border-radius:3px;background:rgba(255,255,255,.045);font:800 13px/1 "Heebo",Arial,sans-serif}
.mf-levelup-close{
    margin-top:25px;min-width:150px;height:43px;border:0;border-radius:3px;
    background:var(--mf-eng-blue);color:#fff;font:900 14px/1 "Heebo",Arial,sans-serif;cursor:pointer;
    transition:background .22s ease,box-shadow .28s ease;
}
.mf-levelup-close:hover{background:#0f72ea;box-shadow:0 10px 26px rgba(20,124,255,.24)}
.mf-levelup-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mf-levelup-piece{position:absolute;top:-18px;width:7px;height:13px;border-radius:1px;background:var(--piece,#59c7ff);opacity:.9;animation:mfLevelPiece 1.9s cubic-bezier(.21,.66,.38,.98) forwards}
@keyframes mfLevelPiece{to{transform:translate3d(var(--x,0),560px,0) rotate(var(--r,540deg));opacity:0}}

@media(max-width:720px){
    .mf-engagement-toast-stack{top:72px;left:14px;width:calc(100vw - 28px)}
    .mf-levelup-card{padding:36px 22px 28px}
    .mf-levelup-card h2{font-size:25px!important}
    .mf-levelup-card h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
    .mf-engagement-toast,.mf-levelup-backdrop,.mf-levelup-card,.mf-levelup-piece{transition:none!important;animation:none!important}
}