/* ---- cheers ---- gift chip with the room's cheers total (static/js/cheers.js) */
.cheers-badge{--ch:var(--chat-accent,var(--accent,#E8A33D));position:relative;display:inline-flex;align-items:center;
  flex:none;padding:.2rem .5rem .2rem .3rem;margin:0 .15rem;font:inherit;line-height:1;cursor:default;
  color:var(--ch);background:color-mix(in oklab,var(--ch) 10%,transparent);
  border:1px solid color-mix(in oklab,var(--ch) 38%,transparent);border-radius:999px}
button.cheers-badge{cursor:pointer}
button.cheers-badge:hover,button.cheers-badge:focus-visible{background:color-mix(in oklab,var(--ch) 22%,transparent);outline:none}
.cheers-badge__icon{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cheers-badge__n{margin-left:.3rem;font-family:var(--font-mono,monospace);font-size:.68rem;font-weight:600;
  letter-spacing:.02em;min-width:1ch;display:inline-block}
.cheers-badge[data-n="0"]{opacity:.6}
.cheers-badge--chip{margin:0 0 0 .45rem;padding:.12rem .42rem .12rem .25rem}
.cheers-badge--chip .cheers-badge__icon{width:.8rem;height:.8rem}
.cheers-badge--chip .cheers-badge__n{font-size:.6rem;margin-left:.22rem}
.roomcard .cheers-badge{float:right;margin:.5rem .5rem 0 0}
.cf-room__top .cheers-badge{margin-left:auto;margin-right:.5rem}
/* The bump. The lit look is the FROM state of an animation held back by a
   1.4s delay, then it drops to the plain pill. site.css squashes animation
   durations to ~0 under prefers-reduced-motion but leaves delays, so those
   viewers still see the lit pill for 1.4s (it switches instead of easing). */
.cheers-badge.is-bump{animation:cheers-lit .001s linear 1.4s both}
@keyframes cheers-lit{
  from{background:color-mix(in oklab,var(--ch) 40%,transparent);color:#fff;opacity:1;
       box-shadow:0 0 12px color-mix(in oklab,var(--ch) 70%,transparent)}
  to{}}
.cheers-badge.is-bump .cheers-badge__n{animation:cheers-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes cheers-pop{0%{transform:scale(1)}40%{transform:scale(1.5) translateY(-1px)}100%{transform:scale(1)}}
.cheers-pop{position:fixed;inset:auto;margin:0;z-index:60;width:min(16rem,calc(100vw - 2rem));padding:.8rem .95rem;
  color:var(--ink);background:var(--surface,#10151c);border:1px solid color-mix(in oklab,var(--ink) 18%,transparent);
  border-radius:var(--radius,10px);box-shadow:0 12px 32px rgba(0,0,0,.45);font-size:.82rem;line-height:1.4}
.cheers-pop__n{display:block;font-family:var(--font-mono,monospace);font-size:1.5rem;font-weight:700;color:var(--chat-accent,var(--accent,#E8A33D))}
.cheers-pop__t{display:block;color:var(--muted)}