/* ============================================================
   Badge patch: animated user badges, icon showcase, admin pill
   Loaded after app.css. All motion respects prefers-reduced-motion.
   ============================================================ */

/* ---------- keyframes ---------- */
@keyframes ubd-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ubd-shine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@keyframes ubd-neon{0%,100%{box-shadow:0 0 0 1.5px #5cf2ff,0 0 6px #5cf2ff,inset 0 0 6px rgba(92,242,255,.45)}50%{box-shadow:0 0 0 1.5px #9bf8ff,0 0 16px #5cf2ff,inset 0 0 12px rgba(92,242,255,.8)}}
@keyframes ubd-flick{0%{transform:scale(1) rotate(-3deg);filter:drop-shadow(0 0 2px #ffd54f)}100%{transform:scale(1.14) rotate(3deg);filter:drop-shadow(0 0 5px #fff1a8)}}
@keyframes ubd-hue{to{filter:hue-rotate(360deg)}}
@keyframes ubd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes bdg-in{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
@keyframes bdg-spin{to{transform:rotate(360deg)}}
@keyframes bdg-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(-5deg)}}
@keyframes bdg-glow{0%,100%{box-shadow:0 0 0 0 transparent,0 10px 24px -16px var(--c1)}50%{box-shadow:0 0 22px -6px var(--c1),0 10px 24px -14px var(--c2)}}
@keyframes bdg-card-shine{0%{transform:translateX(-140%) skewX(-18deg)}45%,100%{transform:translateX(140%) skewX(-18deg)}}
@keyframes bdg-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}

/* ---------- the round badge next to a username (.ubd) ---------- */
.ubd{--u1:#7c5cff;--u2:#ff5fd2;--u3:#38d5ff;--ic:#fff;
  position:relative;display:inline-grid;place-items:center;flex:none;isolation:isolate;overflow:hidden;
  width:20px;height:20px;border-radius:50%;vertical-align:middle;color:var(--ic);
  background:linear-gradient(120deg,var(--u1),var(--u2),var(--u3),var(--u1));background-size:300% 300%;
  animation:ubd-flow 5s ease-in-out infinite;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.2),0 4px 12px -3px var(--u1)}
.ubd .i{position:relative;z-index:2;width:62%;height:62%;stroke-width:2.2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));animation:ubd-float 2.8s ease-in-out infinite}
.ubd::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);
  transform:translateX(-130%);animation:ubd-shine 3.6s ease-in-out infinite}
.ubd.mini{width:16px;height:16px}
.ubd.md{width:38px;height:38px}
.ubd.lg{width:32px;height:32px}
.ubd.xl{width:64px;height:64px;box-shadow:0 0 0 2px rgba(255,255,255,.22),0 12px 30px -8px var(--u1)}

.ubd.s-aurora{--u1:#7c5cff;--u2:#ff5fd2;--u3:#38d5ff}
.ubd.s-neon{--ic:#5cf2ff;background:#0b1020;animation:ubd-neon 1.8s ease-in-out infinite}
.ubd.s-neon .i{filter:drop-shadow(0 0 3px #5cf2ff)}
.ubd.s-neon::after{opacity:.35}
.ubd.s-gold{--u1:#ffe08a;--u2:#ff9f1c;--u3:#ffd166;--ic:#4a2a00}
.ubd.s-gold .i{filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.ubd.s-flame{--u1:#ff3d00;--u2:#ff9100;--u3:#ffd54f}
.ubd.s-flame .i{animation:ubd-flick .9s ease-in-out infinite alternate}
.ubd.s-frost{--u1:#6ee7ff;--u2:#7aa7ff;--u3:#e3f7ff;--ic:#0a2a44}
.ubd.s-frost .i{filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
.ubd.s-holo{background:linear-gradient(135deg,#ff6ec7,#7c5cff,#38d5ff,#35e0a1,#ffd166,#ff6ec7);background-size:300% 300%;
  animation:ubd-flow 4s ease-in-out infinite,ubd-hue 6s linear infinite;box-shadow:0 0 0 1.5px rgba(255,255,255,.35),0 4px 14px -3px #b46bff}

/* in comments the badge sits inline with the name */
.cm-meta .ubd{width:19px;height:19px}
.cm-i.is-reply .cm-meta .ubd{width:17px;height:17px}

/* profile header */
.ac-wh h2 .ubd{align-self:center}

/* ---------- admin / pinned pills ---------- */
.cm-badge.adm,.ac-role.is-adm{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(110deg,#7c5cff,#c04bff,#ff5fd2,#7c5cff);background-size:250% 100%;
  animation:ubd-flow 4s linear infinite;box-shadow:0 0 14px -4px rgba(var(--accent-rgb),.95)}
.cm-badge.adm::after,.ac-role.is-adm::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-130%);animation:ubd-shine 3.6s ease-in-out infinite}
.cm-badge.adm .i,.ac-role.is-adm .i{animation:ubd-float 2.4s ease-in-out infinite}
.cm-badge.pin .i{animation:bdg-bob 2.6s ease-in-out infinite}

/* ---------- achievement cards ---------- */
.ac-badges.bdgs{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.ac-badges.bdgs li.bdg{
  --c1:#cd7f32;--c2:#f2b27a;--k1:#b8651b;--k2:#e59a55;
  position:relative;overflow:hidden;isolation:isolate;opacity:1;filter:none;
  gap:2px;padding:18px 8px 12px;border:1.5px solid var(--line);
  background:var(--s2);
  animation:bdg-in .55s cubic-bezier(.2,.9,.3,1.2) backwards;animation-delay:var(--d,0ms);
  transition:transform .25s ease,border-color .25s}
.ac-badges.bdgs li.bdg.t-silver{--c1:#aeb8cc;--c2:#eef2fb;--k1:#7e8aa6;--k2:#b4bfd6}
.ac-badges.bdgs li.bdg.t-gold{--c1:#ffb703;--c2:#ffe08a;--k1:#e09a00;--k2:#ffc93c}
.ac-badges.bdgs li.bdg.t-diamond{--c1:#38d5ff;--c2:#b46bff;--k1:#1fb5e6;--k2:#8f5bff}

/* icon disc: locked = progress ring, unlocked = spinning gradient ring */
.bdg-ic{position:relative;isolation:isolate;display:grid;place-items:center;width:46px;height:46px;margin-bottom:6px;border-radius:50%;color:var(--muted)}
.bdg-ic::before{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:50%;
  background:conic-gradient(var(--c1) calc(var(--p,0)*1%),var(--s3) 0)}
.bdg-ic::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--s3)}
.bdg-ic .i{width:21px;height:21px}
.bdg:not(.on) .bdg-ic .i{opacity:.7}

/* app.css has a generic ".sm{padding-bottom:30px}" that inflates this bar */
.ac-badges.bdgs .ac-prog.sm{height:5px;min-height:0;padding:0;align-self:center;margin-top:6px}
.bdg-tier{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* unlocked */
.ac-badges.bdgs li.bdg.on{
  background:linear-gradient(160deg,#222842,#151927) padding-box,linear-gradient(135deg,var(--c1),var(--c2)) border-box;
  border-color:transparent;
  animation:bdg-in .55s cubic-bezier(.2,.9,.3,1.2) backwards,bdg-glow 3.2s ease-in-out infinite;
  animation-delay:var(--d,0ms),calc(var(--d,0ms) + .6s)}
.bdg.on:hover{transform:translateY(-4px) scale(1.03)}
.bdg.on .bdg-ic{color:#fff}
.bdg.on .bdg-ic::before{background:conic-gradient(from 0deg,var(--c1),var(--c2),transparent 55%,var(--c1));animation:bdg-spin 3.6s linear infinite}
.bdg.on .bdg-ic::after{background:linear-gradient(135deg,var(--k1),var(--k2));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.bdg.on .bdg-ic .i{opacity:1;stroke-width:2.2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));animation:bdg-bob 2.8s ease-in-out infinite;animation-delay:var(--d,0ms)}
.bdg.on:hover .bdg-ic .i{animation-duration:.8s}
.bdg.on .bdg-tier{background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.bdg.on::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.12) 50%,transparent 62%);
  animation:bdg-card-shine 4.2s ease-in-out infinite;animation-delay:calc(var(--d,0ms) + 1s)}
.bdg .sp{position:absolute;z-index:3;width:7px;height:7px;background:var(--c2);pointer-events:none;opacity:0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:bdg-twinkle 2.8s ease-in-out infinite}
.bdg .sp.s1{top:10px;left:20%;animation-delay:.1s}
.bdg .sp.s2{top:26px;right:16%;width:5px;height:5px;animation-delay:1.1s}
.bdg .sp.s3{top:54px;left:14%;width:5px;height:5px;animation-delay:1.9s}

/* ---------- showcase picker ---------- */
.bsel-pv{display:flex;align-items:center;gap:14px;margin:4px 0 6px;padding:14px;border-radius:16px;background:var(--s2);border:1px solid var(--line)}
.bsel-pv b{display:block;font-size:16px}
.bsel-pv small{color:var(--muted)}
.bsel-h{margin:16px 2px 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bsel .btn{margin-top:18px}
.bsel-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.bsel-o{position:relative;display:block;cursor:pointer}
.bsel-o input,.bsel-s input{position:absolute;opacity:0;pointer-events:none}
.bsel-o>span{display:grid;place-items:center;height:54px;border-radius:14px;background:var(--s2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.bsel-o>span .i{width:23px;height:23px}
.bsel-o:hover>span{transform:translateY(-2px);color:var(--text)}
.bsel-o input:checked+span{color:#fff;border-color:var(--accent);background:rgba(var(--accent-rgb),.22);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.28);transform:translateY(-2px)}
.bsel-o input:focus-visible+span,.bsel-s input:focus-visible+.bsel-c{outline:2px solid var(--accent);outline-offset:2px}
.bsel-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.bsel-s{position:relative;display:block;cursor:pointer}
.bsel-c{display:grid;justify-items:center;gap:5px;padding:14px 8px 11px;text-align:center;border-radius:16px;background:var(--s2);border:1px solid var(--line);transition:transform .2s,border-color .2s,box-shadow .2s}
.bsel-c b{font-size:13.5px}
.bsel-c small{font-size:11.5px;color:var(--muted)}
.bsel-s:hover .bsel-c{transform:translateY(-2px)}
.bsel-s input:checked+.bsel-c{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.28)}
.bsel-s.is-lock{cursor:not-allowed}
.bsel-s.is-lock .bsel-c{opacity:.5;filter:grayscale(.7)}
.bsel-s.is-lock:hover .bsel-c{transform:none}

@media (max-width:420px){.ubd.xl{width:54px;height:54px}.ac-badges.bdgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.ubd,.ubd *,.ubd::after,.bdg,.bdg *,.bdg::after,.bdg-ic::before,.cm-badge.adm,.ac-role.is-adm{animation:none!important}.bdg .sp{opacity:.8}}

/* ============================================================
   Comment member card: level ring, rank strip, trophies, medals, hover card
   ============================================================ */
@keyframes lv-rainbow{to{background-position:300% 50%}}
@keyframes md-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes md-glint{0%,60%,100%{transform:translateX(-140%)}80%{transform:translateX(140%)}}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* level colours: lr-0 Newcomer ... lr-6 Legend */
.lr-0{--l1:#7a8aa6;--l2:#b4c0d6}
.lr-1{--l1:#22c39a;--l2:#7cf0cf}
.lr-2{--l1:#3b9bff;--l2:#8fd0ff}
.lr-3{--l1:#8a5cff;--l2:#c79bff}
.lr-4{--l1:#ff4fc8;--l2:#ff9be4}
.lr-5{--l1:#ff8a00;--l2:#ffd166}
.lr-6{--l1:#ff5fd2;--l2:#38d5ff}

/* tier colours shared by medals and the trophy chip */
.t-bronze{--c1:#cd7f32;--c2:#f2b27a;--k1:#b8651b;--k2:#e59a55}
.t-silver{--c1:#aeb8cc;--c2:#eef2fb;--k1:#7e8aa6;--k2:#b4bfd6}
.t-gold{--c1:#ffb703;--c2:#ffe08a;--k1:#e09a00;--k2:#ffc93c}
.t-diamond{--c1:#38d5ff;--c2:#b46bff;--k1:#1fb5e6;--k2:#8f5bff}

/* avatar wrapper: XP progress ring + level bubble */
.cm-avw{position:relative;flex:none;width:40px;height:40px;border-radius:50%;align-self:flex-start}
.cm-i.is-reply .cm-avw{width:32px;height:32px}
.cm-avw.has-card::before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:0;
  background:conic-gradient(var(--l1) 0,var(--l2) calc(var(--p,0)*1%),rgba(255,255,255,.12) 0);
  box-shadow:0 0 14px -5px var(--l1)}
.cm-avw.has-card.lr-6::before{background:conic-gradient(#ff5fd2,#ffd166,#35e0a1,#38d5ff,#8a5cff,#ff5fd2);animation:ubd-hue 6s linear infinite}
.cm-avw .cm-av{position:relative;z-index:1;box-shadow:0 0 0 2px var(--bg)}
.cm-i.is-reply .cm-avw .cm-av{width:32px;height:32px}
.cm-lvb{position:absolute;z-index:2;right:-5px;bottom:-5px;min-width:19px;height:19px;padding:0 4px;border-radius:99px;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;line-height:1;color:#fff;
  background:linear-gradient(135deg,var(--l1),var(--l2));box-shadow:0 0 0 2px var(--bg),0 3px 8px -2px var(--l1);
  text-shadow:0 1px 1px rgba(0,0,0,.35)}
.cm-i.is-reply .cm-lvb{min-width:16px;height:16px;font-size:9.5px;right:-4px;bottom:-4px}

/* name + hover card */
.cm-who{position:relative;display:inline-flex;align-items:center;cursor:default;outline:0;border-radius:6px}
.cm-who:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.cm-pop{position:absolute;z-index:40;left:-6px;top:calc(100% + 8px);width:268px;max-width:calc(100vw - 48px);padding:14px;
  border-radius:16px;color:var(--text);background:var(--s1);border:1px solid var(--line);font-weight:400;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.03),0 0 32px -14px var(--l1);
  opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .16s,transform .16s,visibility .16s}
.cm-pop::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,var(--l1),var(--l2))}
.cm-pop::after{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.cm-who:hover .cm-pop,.cm-who:focus .cm-pop,.cm-who:focus-within .cm-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto;animation:pop-in .18s ease}
.cm-pop-h{display:flex;align-items:center;gap:10px}
.cm-pop-lv{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--l1),var(--l2));box-shadow:0 8px 18px -8px var(--l1);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.cm-pop-t{flex:1;min-width:0;display:grid;gap:1px}
.cm-pop-t b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-pop-t small{font-size:12px;color:var(--muted)}
.cm-pop-h .ubd{flex:none}
.cm-pop-bar,.cm-lv .cm-xp{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cm-pop-bar{margin:12px 0 5px}
.cm-pop-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--l1),var(--l2));box-shadow:0 0 10px var(--l1)}
.cm-pop-xp,.cm-pop-since{display:block;font-size:11.5px;color:var(--muted)}
.cm-pop-since{margin-top:10px;text-align:center}
.cm-sts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.cm-st{display:grid;justify-items:center;gap:1px;padding:8px 2px;border-radius:12px;background:var(--s2);border:1px solid var(--line)}
.cm-st .i{width:15px;height:15px;color:var(--l2)}
.cm-st b{font-size:14px;line-height:1.2}
.cm-st small{font-size:10px;color:var(--muted)}
.cm-pop-tl{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.cm-pop-tl .i{width:15px;height:15px;color:#ffb703}
.cm-pop-tl b{color:var(--text);margin-left:auto}
.cm-pop-md{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}

/* rank strip under the name */
.cm-rank{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:5px 0 2px}
.cm-lv{position:relative;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:99px;overflow:hidden;isolation:isolate;
  font-size:11.5px;line-height:1;color:#fff;background:linear-gradient(120deg,var(--l1),var(--l2));
  box-shadow:0 5px 14px -7px var(--l1);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.cm-lv.lr-6{background:linear-gradient(110deg,#ff5fd2,#ffb347,#35e0a1,#38d5ff,#8a5cff,#ff5fd2);background-size:300% 100%;animation:lv-rainbow 6s linear infinite}
.cm-lv .i{width:12px;height:12px;stroke-width:2.4}
.cm-lv b{font-size:11.5px;font-weight:800;color:#fff}
.cm-lv em{font-style:normal;font-weight:600;opacity:.92}
.cm-lv .cm-xp{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0;background:rgba(0,0,0,.28);z-index:-1}
.cm-lv .cm-xp::before{content:"";display:block;height:100%;width:var(--p,0%);background:rgba(255,255,255,.85);box-shadow:0 0 6px rgba(255,255,255,.8)}
.cm-lv::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-140%);animation:md-glint 5s ease-in-out infinite}
.cm-tro{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:99px;font-size:11.5px;
  color:var(--muted);background:var(--s2);border:1px solid var(--line)}
.cm-tro .i{width:12px;height:12px;stroke-width:2.2}
.cm-tro b{font-weight:700;color:var(--text)}
.cm-tro[class*="t-"]{border-color:transparent;background:linear-gradient(var(--s2),var(--s2)) padding-box,linear-gradient(120deg,var(--c1),var(--c2)) border-box;border:1px solid transparent}
.cm-tro[class*="t-"] .i{color:var(--c1);filter:drop-shadow(0 0 4px var(--c1))}
.cm-mds{display:inline-flex;align-items:center;gap:4px;margin-left:2px}

/* trophy medals */
.cm-md{position:relative;display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(135deg,var(--k1,#7a8aa6),var(--k2,#b4c0d6));
  box-shadow:0 0 0 1.5px var(--c1,#7a8aa6),0 4px 10px -4px var(--c1,#000);animation:md-pop .45s cubic-bezier(.2,.9,.3,1.3) backwards}
.cm-md .i{width:12px;height:12px;stroke-width:2.3;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.cm-md::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-140%);animation:md-glint 4.2s ease-in-out infinite}
.cm-md:nth-child(2){animation-delay:.08s}.cm-md:nth-child(3){animation-delay:.16s}
.cm-md.t-silver .i,.cm-md.t-gold .i{color:#2a1c00}
.cm-md.t-silver .i{color:#26324a}
.cm-md.lg{width:30px;height:30px}.cm-md.lg .i{width:16px;height:16px}
.cm-md.more{width:auto;min-width:22px;padding:0 6px;border-radius:99px;font-size:10.5px;font-weight:800;background:var(--s3);color:var(--muted);box-shadow:0 0 0 1px var(--line);animation:none}
.cm-md.more::after{display:none}

@media (max-width:520px){
  .cm-lv em{display:none}
  .cm-pop{left:-52px}
}
@media (prefers-reduced-motion:reduce){.cm-avw::before,.cm-lv,.cm-lv::after,.cm-md,.cm-md::after,.cm-pop{animation:none!important}}

/* ============================================================
   Comment reactions: hover / long-press tray, burst, summary chip
   (JS: reactBar() in assets/js/app.js, API: action=react)
   ============================================================ */
@keyframes rx-tray-in{from{opacity:0;transform:translateY(10px) scale(.84)}to{opacity:1;transform:none}}
@keyframes rx-o-in{0%{opacity:0;transform:translateY(18px) scale(.25)}60%{opacity:1;transform:translateY(-5px) scale(1.14)}100%{opacity:1;transform:none}}
@keyframes rx-pop{0%{transform:scale(.35) rotate(-22deg)}55%{transform:scale(1.55) rotate(9deg)}80%{transform:scale(.92) rotate(-3deg)}100%{transform:none}}
@keyframes rx-ring{from{opacity:.8;transform:translate(-50%,-50%) scale(.25)}to{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}
@keyframes rx-fly{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}65%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.05) rotate(var(--rot))}}
@keyframes rx-sum-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

.rx{position:relative;display:inline-flex;align-items:center;gap:2px}
.rx-main{position:relative;padding-left:9px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s,transform .12s}
.rx-main:active{transform:scale(.93)}
.rx-e{display:inline-grid;place-items:center;width:20px;height:20px;font-size:17px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.rx-e .i{width:17px;height:17px}
.rx-e.pop{animation:rx-pop .55s cubic-bezier(.2,.9,.3,1.2)}
.rx-main.on{color:var(--rc,#ff5d8a);background:rgba(255,255,255,.07);background:color-mix(in srgb,var(--rc,#ff5d8a) 15%,transparent)}
.rx-main.on:hover{background:color-mix(in srgb,var(--rc,#ff5d8a) 24%,transparent)}
.rx-t{min-width:2.4em;text-align:left}

/* burst */
.rx-fx{position:absolute;left:19px;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.rx-ring{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:2px solid var(--rc,#fff);animation:rx-ring .55s ease-out forwards}
.rx-p{position:absolute;left:0;top:0;font-size:12px;line-height:1;animation:rx-fly .7s cubic-bezier(.15,.7,.3,1) forwards}

/* floating tray */
.rx-tray{position:absolute;left:0;bottom:calc(100% + 8px);z-index:25;display:flex;gap:2px;padding:6px 8px;border-radius:999px;transform-origin:22px 100%;
  background:var(--s3);background:color-mix(in srgb,var(--s3) 96%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 44px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  animation:rx-tray-in .22s cubic-bezier(.2,.9,.3,1.1)}
.rx-tray[hidden]{display:none}
.rx-tray::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}   /* hover bridge between button and tray */
.rx-o{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  animation:rx-o-in .42s cubic-bezier(.2,.9,.3,1.2) backwards;animation-delay:calc(var(--i) * 38ms + 40ms);
  transition:transform .2s cubic-bezier(.3,1.7,.5,1);-webkit-tap-highlight-color:transparent}
.rx-oe{font-size:27px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transition:transform .2s}
.rx-o:hover,.rx-o:focus-visible{transform:translateY(-11px) scale(1.4);z-index:2;outline:0}
.rx-o:focus-visible{box-shadow:0 0 0 2px var(--rc)}
.rx-o:active{transform:translateY(-6px) scale(1.15)}
.rx-o::after{content:attr(data-l);position:absolute;bottom:calc(100% + 2px);left:50%;padding:2px 7px;border-radius:99px;background:var(--rc);color:#10131a;
  font-size:9px;font-weight:800;letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,4px) scale(.8);transition:opacity .15s,transform .15s}
.rx-o:hover::after,.rx-o:focus-visible::after{opacity:1;transform:translate(-50%,0) scale(1)}

/* summary chip: top 3 emoji, overlapped, + total */
.rx-sum{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 5px;border-radius:999px;background:var(--s2);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--muted);cursor:default;animation:rx-sum-in .28s cubic-bezier(.2,.9,.3,1.3)}
.rx-sum[hidden]{display:none}
.rx-sum b{color:var(--text);font-variant-numeric:tabular-nums}
.rx-s{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;margin-left:-7px;border-radius:50%;background:var(--s3);box-shadow:0 0 0 2px var(--s2);font-size:12px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.rx-s:first-child{margin-left:0}

@media (max-width:520px){
  .rx-tray{padding:5px 6px}
  .rx-o{width:38px;height:38px}.rx-oe{font-size:24px}
}
@media (hover:none){.rx-o:hover{transform:none}.rx-o:hover::after{opacity:0}}
@media (prefers-reduced-motion:reduce){.rx-tray,.rx-o,.rx-e.pop,.rx-sum,.rx-ring,.rx-p{animation:none!important}.rx-o,.rx-oe{transition:none}}