/* Live top bar: notification toast, level-up celebration, live experience bars. Loaded together with js/nav-live.js. */

/* ---------- Live experience bars ---------- */
.nav-card-bar i,.rank-badge-bar i{transition:width .9s cubic-bezier(.22,1,.36,1)}
.nav-card-bar,.rank-badge-bar{position:relative}
.nav-card-bar.xp-gain::after,.rank-badge-bar.xp-gain::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);transform:translateX(-100%);animation:nl-shimmer 1.1s ease-out}
@keyframes nl-shimmer{to{transform:translateX(100%)}}
.nav-card-rank.rank-pop,.rank-badge-main.rank-pop{animation:nl-rank-pop .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes nl-rank-pop{0%{transform:scale(.6) rotate(-8deg);filter:brightness(2)}60%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1) rotate(0);filter:none}}

/* ---------- Bell ---------- */
.nav-btn.ring .nav-ico{transform-origin:50% 12%;animation:nl-ring 1s ease-in-out}
@keyframes nl-ring{0%,100%{transform:rotate(0)}12%{transform:rotate(16deg)}28%{transform:rotate(-14deg)}44%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}76%{transform:rotate(3deg)}}
.notify-head-tools{display:inline-flex;align-items:center;gap:12px}
.notify-sound{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.75;cursor:pointer;transition:background .15s,opacity .15s}
.notify-sound:hover,.notify-sound:focus-visible{opacity:1;background:rgba(127,140,155,.2)}
.notify-sound .snd-off{display:none}
.notify-sound[aria-pressed=false] .snd-on{display:none}
.notify-sound[aria-pressed=false] .snd-off{display:inline}

/* ---------- Notification toast (drops down under the bell) ---------- */
.nl-toast{--nl-accent:#2f8fbf;--nl-arrow-x:50%;position:fixed;z-index:2000;width:min(372px,calc(100vw - 24px));box-sizing:border-box;padding:14px 16px 16px 18px;border-radius:16px;overflow:hidden;cursor:pointer;
 color:#e9f2f8;background:linear-gradient(160deg,rgba(24,44,66,.96),rgba(12,24,40,.96));border:1px solid rgba(160,205,230,.22);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
 box-shadow:0 22px 50px rgba(3,10,20,.5),0 0 0 1px rgba(255,255,255,.04) inset,0 0 34px color-mix(in srgb,var(--nl-accent) 30%,transparent);
 opacity:0;transform:translateY(-18px) scale(.94);transform-origin:var(--nl-arrow-x) 0}
html[data-theme=light] .nl-toast{color:#14324a;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(238,248,253,.97));border-color:rgba(60,130,165,.3);box-shadow:0 20px 44px rgba(20,60,90,.24),0 0 30px color-mix(in srgb,var(--nl-accent) 24%,transparent)}
.nl-toast.warning{--nl-accent:#e3a02a}.nl-toast.critical{--nl-accent:#e0392d}.nl-toast.success{--nl-accent:#2fa36b}
.nl-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--nl-accent),color-mix(in srgb,var(--nl-accent) 40%,transparent))}
.nl-toast::after{content:"";position:absolute;top:-7px;left:var(--nl-arrow-x);width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:inherit;border-left:1px solid rgba(160,205,230,.22);border-top:1px solid rgba(160,205,230,.22)}
.nl-toast.in{opacity:1;transform:none;transition:opacity .28s ease,transform .55s cubic-bezier(.2,1.35,.4,1)}
.nl-toast.out{opacity:0;transform:translateY(-12px) scale(.96);transition:opacity .25s ease,transform .3s ease}
.nl-toast-row{display:grid;grid-template-columns:36px 1fr 22px;gap:12px;align-items:start}
.nl-toast-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--nl-accent);background:color-mix(in srgb,var(--nl-accent) 16%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--nl-accent) 40%,transparent) inset}
.nl-toast.in .nl-toast-icon svg{transform-origin:50% 12%;animation:nl-ring 1.1s .25s ease-in-out}
.nl-toast-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--nl-accent)}
.nl-toast-title{display:block;margin-top:3px;font-size:15px;font-weight:700;line-height:1.3}
.nl-toast-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0;font-size:13px;line-height:1.4;opacity:.82}
.nl-toast-more{margin-top:8px;font-size:12px;font-weight:600;color:var(--nl-accent)}
.nl-toast-close{width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;opacity:.55;font-size:18px;line-height:1;cursor:pointer}
.nl-toast-close:hover{opacity:1;background:rgba(127,140,155,.22)}
.nl-toast-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(127,140,155,.18)}
.nl-toast-progress i{display:block;height:100%;transform-origin:left;background:var(--nl-accent);animation:nl-progress var(--nl-time,8s) linear forwards}
.nl-toast:hover .nl-toast-progress i{animation-play-state:paused}
@keyframes nl-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- Level-up celebration (local: around the rank picture and experience bar, never covers the page) ---------- */
.nav-card.lu-active,.rank-badge.lu-active{position:relative;z-index:80}
.rank-badge{position:relative}
.nl-burst{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.nl-burst-ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid rgba(255,214,120,.9);box-shadow:0 0 14px rgba(255,205,110,.55),inset 0 0 10px rgba(255,205,110,.35);opacity:0;animation:nl-ring-local 1.5s cubic-bezier(.15,.6,.3,1) forwards}
.rank-badge .nl-burst-ring{width:90px;height:90px;margin:-45px 0 0 -45px}
@keyframes nl-ring-local{0%{opacity:.95;transform:scale(.35)}100%{opacity:0;transform:scale(2.6)}}
.nl-spark{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#ffd98a 60%,rgba(240,166,58,0) 72%);box-shadow:0 0 8px 1px rgba(255,205,110,.85);opacity:0;animation:nl-spark-fly 1.5s cubic-bezier(.12,.7,.3,1) forwards}
@keyframes nl-spark-fly{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s,1))}}
.nl-rank-glow{animation:nl-glow-pop 1.6s cubic-bezier(.2,1.3,.4,1)}
@keyframes nl-glow-pop{0%{transform:scale(.7) rotate(-10deg);filter:brightness(1.8) drop-shadow(0 0 0 rgba(255,205,110,0))}35%{transform:scale(1.28) rotate(4deg);filter:brightness(1.35) drop-shadow(0 0 14px rgba(255,205,110,.95))}60%{transform:scale(.96) rotate(-2deg);filter:brightness(1.15) drop-shadow(0 0 8px rgba(255,205,110,.6))}100%{transform:scale(1) rotate(0);filter:none}}
.nl-bar-gold i{background:linear-gradient(90deg,#f0a63a,#ffd98a 50%,#fff3d1)!important;box-shadow:0 0 10px rgba(255,205,110,.85);animation:nl-bar-flash 3.4s ease-out}
@keyframes nl-bar-flash{0%,25%{filter:brightness(1.7)}100%{filter:none}}
.nl-lu-label{color:#f0a63a;background:linear-gradient(90deg,#f0a63a,#ffe4a3,#f0a63a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:nl-label-shine 1.6s linear infinite}
@keyframes nl-label-shine{to{background-position:-200% 0}}
.nl-rankpill{position:absolute;left:6px;top:calc(100% + 8px);transform:translateY(-10px) scale(.92);transform-origin:left top;white-space:nowrap;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.03em;color:#4a2f00;
 background:linear-gradient(180deg,#fff0c4,#ffd98a 55%,#f0a63a);box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 20px rgba(255,205,110,.55);opacity:0;animation:nl-pill 3.6s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes nl-pill{0%{opacity:0;transform:translateY(-10px) scale(.92)}10%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-4px) scale(.98)}}
@media (prefers-reduced-motion:reduce){
 .nl-toast.in,.nl-toast.out{transition:opacity .2s}
 .nl-toast,.nl-toast.in{transform:none}
 .nl-rank-glow,.nl-bar-gold i,.nl-lu-label{animation:none}
 .nl-rankpill{animation:none;opacity:1;transform:none}
 .nav-btn.ring .nav-ico,.nl-toast.in .nl-toast-icon svg{animation:none}
 .nav-card-bar i,.rank-badge-bar i{transition:none}
 .nav-card-bar.xp-gain::after,.rank-badge-bar.xp-gain::after{animation:none;display:none}
}

/* The build reference doubles as a preview button (level-up animation + test notification). */
#build-demo{cursor:pointer;border-radius:6px;padding:2px 4px}
#build-demo:hover,#build-demo:focus-visible{background:rgba(127,140,155,.18);outline:none}