.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
button.avatar{font:inherit;font-size:24px;display:grid;cursor:pointer;border:1px solid transparent;padding:0;touch-action:manipulation}
button.avatar:hover{border-color:#c8b6e8;box-shadow:0 0 0 4px #f0eafa}
button.avatar:after{content:'＋';position:absolute;top:-4px;right:-5px;width:17px;height:17px;border-radius:50%;background:#fff;border:1px solid #e4dced;color:#ad98c8;font-size:11px;font-weight:500;display:grid;place-items:center}
.prop-picker[hidden]{display:none}.prop-picker{position:fixed;z-index:75;width:310px;max-width:calc(100vw - 20px);padding:12px 12px 9px;background:#fffefa;border:1px solid #e5ddec;border-radius:17px;box-shadow:0 12px 38px #4d365b25;text-align:left}
.prop-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8c7b9a;font-size:12px;line-height:1.5}.prop-picker-heading>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prop-picker-heading>button{flex-shrink:0;background:#f3eef7;border-radius:50%;width:23px;height:23px;color:#a18aaf;font-size:17px;padding:0}
.prop-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:7px}.prop-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:11px;padding:5px 1px 7px;background:transparent;color:#897d93;font-size:11px;line-height:1.5}.prop-button:hover{background:#f1edf9;transform:translateY(-2px)}.prop-button img{display:block;width:48px;height:48px;object-fit:contain;pointer-events:none}.prop-picker-note{font-size:9px;color:#b1a6b7;text-align:center;margin:5px 0 0;line-height:1.7}
/* Feedback stays below the picker/chat controls and never participates in hit testing. */
.reaction-layer,.reaction-scene{position:fixed;inset:0;z-index:60;pointer-events:none!important;overflow:hidden}.reaction-layer *{pointer-events:none!important}.reaction-scene{z-index:auto;--prop-color:#eab653;--prop-light:#fff1be}
.reaction-flight{position:absolute;top:0;left:0;width:64px;height:64px;will-change:transform,opacity}.reaction-flight img,.impact-sticker{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px #44334430)}.reaction-flight img{position:relative;z-index:1}.reaction-trail{position:absolute;top:26px;right:34px;width:58px;height:14px;border-radius:100% 10px 10px 100%;background:linear-gradient(90deg,transparent,var(--prop-color));opacity:.45;transform:rotate(-18deg);filter:blur(2px)}
.reaction-impact{position:absolute;width:80px;height:80px;transform:translate(-50%,-50%);opacity:0}.reaction-impact.is-hit{opacity:1;animation:prop-impact-fade 1.48s ease-out both}.reaction-impact.is-static{opacity:1}.impact-sticker{position:relative;z-index:3;opacity:0}.is-hit .impact-sticker{animation:prop-sticker-pop 1.05s cubic-bezier(.15,.8,.3,1) both}.prop-egg .is-hit .impact-sticker,.prop-tomato .is-hit .impact-sticker{animation:prop-break .32s ease-out both}
.prop-flower{--prop-color:#db80b0;--prop-light:#ffe4f2}.prop-egg{--prop-color:#eeb638;--prop-light:#fff1a4}.prop-tomato{--prop-color:#e86655;--prop-light:#ffb6a4}
.reaction-flare,.reaction-wave{position:absolute;inset:-10px;border-radius:50%;opacity:0}.reaction-flare{background:radial-gradient(circle,#fff9e9 4%,var(--prop-light) 35%,transparent 70%);z-index:1}.reaction-wave{border:3px solid var(--prop-color);box-shadow:0 0 12px var(--prop-light);z-index:0}.is-hit .reaction-flare{animation:prop-flash .32s ease-out both}.is-hit .reaction-wave{animation:prop-wave .62s cubic-bezier(.1,.6,.3,1) both}.is-hit .wave-echo{animation-delay:90ms;border-width:1px}
.prop-splash{position:absolute;inset:1px;z-index:1;background:var(--prop-color);border-radius:43% 58% 38% 63% / 50% 31% 64% 43%;opacity:0;box-shadow:inset 0 0 0 5px #ffffff24,0 4px 10px #44334412}.prop-like .prop-splash{background:radial-gradient(circle,#fff4c6,transparent 70%);border-radius:50%;box-shadow:none}.prop-flower .prop-splash{background:radial-gradient(circle,#f7c5df,transparent 70%);border-radius:50%;box-shadow:none}.prop-egg .prop-splash{background:radial-gradient(ellipse at 44% 45%,#ffdb55 0 24%,#efb52b 26% 34%,#fff4b7bb 36% 64%,#fffbe99c 66%);border-radius:32% 59% 28% 61% / 66% 37% 64% 36%}.prop-tomato .prop-splash{background:radial-gradient(ellipse at 35% 30%,#ffab7a 0 8%,#e7644d 40%,#d8493dd9 70%);border-radius:32% 66% 29% 65% / 61% 32% 68% 37%}.is-hit .prop-splash{animation:prop-splat 1.32s cubic-bezier(.15,.75,.25,1) both}
.reaction-particle{position:absolute;left:40px;top:40px;width:var(--size);height:var(--size);opacity:0;z-index:2}.particle-shape{display:block;width:100%;height:100%;background:var(--prop-color);box-shadow:0 2px 2px #44334418}.is-hit .reaction-particle{animation:prop-particle 1.05s cubic-bezier(.16,.55,.4,1) var(--delay) both}
.particle-heart .particle-shape{position:relative;background:#ed8b9b;transform:rotate(-45deg);border-radius:1px;box-shadow:0 0 8px #f4a2b080}.particle-heart .particle-shape:before,.particle-heart .particle-shape:after{content:'';position:absolute;width:100%;height:100%;background:inherit;border-radius:50%}.particle-heart .particle-shape:before{left:0;top:-50%}.particle-heart .particle-shape:after{left:50%;top:0}.particle-glint .particle-shape{background:#efbe5e;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);box-shadow:none}.particle-petal .particle-shape{border-radius:75% 12% 65% 25%;background:linear-gradient(145deg,#f5b4d1,#cf659b);width:85%;height:145%}.particle-leaf .particle-shape{border-radius:80% 0 80% 0;background:#8bb794;height:60%}.particle-shell .particle-shape{background:linear-gradient(130deg,#fffdf4,#e0cfb1);clip-path:polygon(8% 8%,90% 0,100% 77%,68% 66%,44% 100%,0 68%);width:125%;height:115%}.particle-yolk .particle-shape,.particle-juice .particle-shape{border-radius:65% 25% 60% 45%;background:#eec03e;width:65%;height:135%}.particle-tomato-piece .particle-shape{border-radius:15% 90% 25% 35%;background:linear-gradient(40deg,#b93635,#f47c5a);border:1px solid #f7a16c;width:125%;height:100%}.particle-juice .particle-shape{background:#e55c47}
@keyframes prop-impact-fade{0%,70%{opacity:1}100%{opacity:0}}
@keyframes prop-sticker-pop{0%{opacity:0;transform:scale(.3) rotate(-20deg)}16%{opacity:1;transform:scale(1.3) rotate(8deg)}33%{transform:scale(.96) rotate(-5deg)}55%{opacity:1;transform:scale(1.04) rotate(0)}100%{opacity:0;transform:translateY(-18px) scale(.92)}}
@keyframes prop-break{0%{opacity:1;transform:scale(.7) rotate(-14deg)}35%{opacity:1;transform:scale(1.18) rotate(6deg)}100%{opacity:0;transform:scale(1.3) rotate(12deg)}}
@keyframes prop-flash{0%{opacity:0;transform:scale(.35)}20%{opacity:.9;transform:scale(1.2)}100%{opacity:0;transform:scale(1.65)}}
@keyframes prop-wave{0%{opacity:.8;transform:scale(.35)}100%{opacity:0;transform:scale(1.85)}}
@keyframes prop-particle{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}12%{opacity:1}48%{opacity:1;transform:translate(var(--mx),var(--my)) scale(1.05) rotate(var(--spin))}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.65) rotate(var(--spin))}}
@keyframes prop-splat{0%{opacity:0;transform:scale(.2) rotate(-12deg)}12%{opacity:.9;transform:scale(1.35) rotate(5deg)}25%,72%{opacity:.8;transform:scale(1.12) rotate(0)}100%{opacity:0;transform:scale(1.18) rotate(2deg)}}
@media(max-width:700px){button.avatar{font-size:20px}.prop-picker{width:300px}.reaction-impact{width:76px;height:76px}.reaction-particle{left:38px;top:38px}}
@media(prefers-reduced-motion:reduce){.reaction-flight,.reaction-particle,.reaction-wave,.reaction-flare{display:none!important}.reaction-impact,.impact-sticker,.prop-button,.prop-splash{animation:none!important;transition:none!important}.is-static .impact-sticker{opacity:1;width:64px;height:64px;margin:8px}.is-static .prop-splash{opacity:.22;transform:scale(.85)}}