/* Soundboard + reactions */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.fx-item { position: absolute; bottom: 12%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .2rem; will-change: transform, opacity; }
.fx-item .fx-e { font-size: clamp(3rem, 9vw, 5.5rem); line-height: 1; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .35)); }
.fx-item img { width: clamp(90px, 18vw, 170px); height: auto; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .35)); }
.fx-who { font-size: .8rem; font-weight: 900; padding: .15rem .6rem; border-radius: 99px; background: rgb(0 0 0 / .65); color: #fff; white-space: nowrap; }
.fx-item.a-float { animation: fxFloat 2.8s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes fxFloat { 0% { opacity: 0; transform: translate(-50%, 40px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -55vh) scale(1) rotate(var(--rot)); } }
.fx-item.a-bounce { top: 38%; bottom: auto; animation: fxBounce 2.4s ease forwards; }
@keyframes fxBounce { 0% { opacity: 0; transform: translate(-50%, -40vh); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.1, .9); } 42% { transform: translate(-50%, -60px) scale(.95, 1.05); } 54% { transform: translate(-50%, 0) scale(1.05, .95); } 64% { transform: translate(-50%, -18px); } 74% { transform: translate(-50%, 0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 0) scale(.9); } }
.fx-item.a-spin { top: 36%; bottom: auto; animation: fxSpin 2.4s ease-in-out forwards; }
@keyframes fxSpin { 0% { opacity: 0; transform: translate(-50%, 0) scale(.2) rotate(-540deg); } 35% { opacity: 1; transform: translate(-50%, 0) scale(1.2) rotate(0); } 80% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(20deg); } 100% { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(360deg); } }
.fx-item.a-zoom { top: 34%; bottom: auto; animation: fxZoom 2.2s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes fxZoom { 0% { opacity: 0; transform: translate(-50%, 0) scale(.1); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.6); } 45% { transform: translate(-50%, 0) scale(1.3); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 0) scale(2.2); } }
.fx-item.a-shake { top: 38%; bottom: auto; animation: fxShake 2.2s ease forwards; }
@keyframes fxShake { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  20%, 40%, 60% { transform: translate(calc(-50% - 16px), 0) rotate(-8deg); } 30%, 50%, 70% { transform: translate(calc(-50% + 16px), 0) rotate(8deg); } 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 20px); } }
.fx-item.a-burst { top: 45%; bottom: auto; animation: fxBurst 1.9s cubic-bezier(.15, .8, .3, 1) both; }
.fx-item.a-burst .fx-e { font-size: clamp(2.2rem, 6vw, 3.6rem); }
@keyframes fxBurst { 0% { opacity: 0; transform: translate(-50%, 0) scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.1) rotate(var(--rot)); } }
.fx-item.a-rain { top: -12%; bottom: auto; animation: fxRain 2.4s cubic-bezier(.4, 0, .9, .6) both; }
.fx-item.a-rain .fx-e { font-size: clamp(2rem, 5vw, 3.2rem); }
@keyframes fxRain { 0% { opacity: 0; transform: translate(-50%, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: .2; transform: translate(-50%, 112vh) rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) { .fx-item { animation-duration: 1.2s !important; } }

.fx-fab { position: fixed; z-index: 75; bottom: 86px; inset-inline-start: 16px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); box-shadow: 0 12px 28px -10px rgb(var(--primary-rgb) / .8); transition: transform .2s; }
.fx-fab svg { width: 24px; height: 24px; }
.fx-fab:hover { transform: scale(1.06); }
.fx-fab.is-open { transform: rotate(72deg); }
body:not(.has-hostbar) .fx-fab { bottom: 18px; }
.fx-panel { position: fixed; z-index: 76; bottom: 148px; inset-inline-start: 16px; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; padding: .7rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .7); animation: pop .25s var(--ease); }
body:not(.has-hostbar) .fx-panel { bottom: 80px; }
.fx-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.fx-tabs { display: flex; gap: .3rem; }
.fx-tabs button { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 12px; font-weight: 800; font-size: .85rem; color: var(--text-dim); background: var(--surface-2); }
.fx-tabs button svg { width: 16px; height: 16px; }
.fx-tabs button.on { background: var(--primary); color: var(--on-primary); }
.fx-x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--text-mute); }
.fx-x svg { width: 16px; height: 16px; }
.fx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.fx-btn { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .2rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); transition: transform .15s, border-color .2s; }
.fx-btn:hover { border-color: var(--primary); transform: translateY(-2px); }
.fx-btn.sent { transform: scale(.88); }
.fx-btn .fx-e { font-size: 1.8rem; line-height: 1.1; }
.fx-btn img { width: 40px; height: 40px; object-fit: contain; }
.fx-btn .fx-snd { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--primary-rgb) / .15); color: var(--primary-ink); }
.fx-btn .fx-snd svg { width: 22px; height: 22px; }
.fx-btn small { font-size: .68rem; font-weight: 700; color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-note { margin: .4rem 0; color: var(--text-mute); font-size: .85rem; text-align: center; }
.fx-prefs { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line-soft); font-size: .82rem; font-weight: 700; color: var(--text-dim); }
.fx-prefs.host { margin-top: .4rem; border-top-style: dashed; }
.fx-prefs label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.fx-prefs input { accent-color: var(--primary); width: 16px; height: 16px; }
.fx-prefs span { color: var(--text-mute); }
.lobby-fx { display: flex; flex-direction: column; gap: .4rem; }
.lobby-fx .fx-prefs { margin: 0; padding: 0; border: 0; }
.fx-search { width: 100%; margin-bottom: .5rem; padding: .5rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: .88rem; }
.fx-btn[hidden] { display: none; }