.cg-root{position:absolute;inset:0;pointer-events:none;font-family:inherit;z-index:20;--cg:#1fa463}
.cg-root>*{pointer-events:auto}
.cg-overlay{position:absolute;left:10px;bottom:90px;display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:22}
.cg-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:21}
.cg-banner{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(31,164,99,.95),rgba(31,164,99,.15));color:#fff;padding:4px 14px 4px 4px;border-radius:30px;font-size:13px;animation:cg-in .35s cubic-bezier(.2,1.4,.4,1);transition:opacity .4s,transform .4s;max-width:300px}
.cg-banner.cg-leave{opacity:0;transform:translateY(-24px)}
.cg-banner.cg-tier-medium{background:linear-gradient(90deg,rgba(124,77,255,.95),rgba(124,77,255,.15))}
.cg-banner.cg-tier-big{background:linear-gradient(90deg,rgba(255,170,0,.97),rgba(255,92,138,.3));box-shadow:0 0 18px rgba(255,200,0,.6)}
.cg-who{display:flex;flex-direction:column;line-height:1.15;min-width:0}.cg-who b,.cg-who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cg-who span{font-size:11px;opacity:.9}
.cg-av{width:34px;height:34px;border-radius:50%;object-fit:cover}
.cg-gi{width:42px;height:42px;animation:cg-pop .6s ease-out}
.cg-x2{font:italic 800 24px/1 system-ui;color:#ffd84d;text-shadow:0 2px 4px #0008;margin-left:2px}
.cg-x2.bump{animation:cg-bump .35s ease-out}
.cg-big{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#fff;font:700 20px system-ui;text-shadow:0 2px 8px #000;pointer-events:none;z-index:23;background:radial-gradient(circle,rgba(255,200,0,.25),transparent 65%)}
.cg-big img{filter:drop-shadow(0 8px 24px rgba(255,200,0,.7))}
.cg-big img{width:55%;max-width:280px}
.cg-big.go{display:flex;animation:cg-big 3s ease-in-out forwards}
.cg-bar{position:absolute;left:10px;bottom:12px;z-index:21;display:flex;gap:8px}
.cg-mute{padding:8px 10px!important}
.cg-bar button{border:0;border-radius:20px;padding:8px 14px;background:rgba(0,0,0,.55);color:#fff;font-size:14px;cursor:pointer}
.cg-giftbtn{background:var(--cg)!important;font-weight:700}
.cg-panel{position:absolute;left:0;right:0;bottom:0;max-height:70%;overflow:auto;background:#121614;color:#fff;border-radius:16px 16px 0 0;padding:12px;transform:translateY(105%);transition:transform .25s}
.cg-panel.open{transform:none}
.cg-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:10px}
.cg-x{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.cg-gift,.cg-pack{background:#1d2420;border:2px solid transparent;border-radius:12px;color:#fff;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-size:12px}
.cg-gift img{width:44px;height:44px}
.cg-gift.sel{border-color:var(--cg)}
.cg-gift small{color:#ffd84d}
.cg-packs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.cg-pack b{font-size:16px}
.cg-foot{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px}
.cg-foot span{flex:1}
.cg-send{background:var(--cg);color:#fff;border:0;border-radius:20px;padding:8px 18px;font-weight:700;cursor:pointer}
.cg-send:disabled{opacity:.4}
.cg-link{background:none;border:0;color:#ffd84d;cursor:pointer}
.cg-qty{background:#1d2420;color:#fff;border:0;border-radius:8px;padding:6px}
.cg-small{font-size:11px;opacity:.6;margin-top:10px}
.cg-top{list-style:none;padding:0;margin:0}
.cg-top li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #222}
.cg-top li b{margin-left:auto;color:#ffd84d}
.cg-top img{width:30px;height:30px;border-radius:50%}
.cg-toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#000c;color:#fff;padding:8px 14px;border-radius:20px;font-size:13px}
@keyframes cg-in{from{transform:translateX(-120%);opacity:0}}
@keyframes cg-out{to{transform:translateY(-30px);opacity:0}}
@keyframes cg-pop{0%{transform:scale(0)}70%{transform:scale(1.4)}}
@keyframes cg-big{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1.1)}25%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-60px)}}

/* floating small gifts */
.cg-float{position:absolute;bottom:80px;width:40px;height:40px;animation:cg-floatup 2.6s ease-out forwards}
/* medium burst */
.cg-spark{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;animation:cg-spark 1s ease-out forwards}
/* big: confetti + shake */
.cg-confetti{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:cg-confetti 2.6s ease-in forwards}
.cg-shake{animation:cg-shake .6s ease-in-out}
/* tap-to-resend combo button */
.cg-combo{position:absolute;right:14px;bottom:70px;width:74px;height:74px;border-radius:50%;border:0;background:radial-gradient(circle,#2bd47f,#128a4f);box-shadow:0 6px 20px rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;z-index:24;color:#fff;padding:0}
.cg-combo.show{display:flex;animation:cg-pop .35s ease-out}
.cg-combo:active{transform:scale(.9)}
.cg-combo img{width:38px;height:38px;pointer-events:none}
.cg-combo span{font:italic 800 14px/1 system-ui;color:#ffd84d;text-shadow:0 1px 2px #0008}
.cg-combo svg{position:absolute;inset:-4px;width:82px;height:82px;transform:rotate(-90deg);pointer-events:none}
.cg-combo circle{fill:none;stroke:#ffd84d;stroke-width:3;stroke-dasharray:100.5;stroke-dashoffset:0}
.cg-combo.run circle{animation:cg-ring 3s linear forwards}
.cg-gift.cg-tier-big{background:linear-gradient(160deg,#3a2a00,#1d2420)}
.cg-gift.cg-tier-medium{background:linear-gradient(160deg,#2a1f45,#1d2420)}
.cg-gift:active{transform:scale(.94)}
.cg-rank{width:22px;text-align:center}
@keyframes cg-floatup{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1;transform:translate(0,-20px) scale(1.1)}100%{transform:translate(var(--dx),-260px) scale(.8);opacity:0}}
@keyframes cg-spark{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1) rotate(200deg);opacity:0}}
@keyframes cg-confetti{to{transform:translateY(110vh) rotate(var(--r));opacity:.9}}
@keyframes cg-shake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-2px)}}
@keyframes cg-bump{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}}
@keyframes cg-ring{to{stroke-dashoffset:100.5}}
@media (prefers-reduced-motion:reduce){.cg-float,.cg-spark,.cg-confetti{display:none}.cg-shake{animation:none}}