/* x-live · fx.css — лоток эффектов камеры и анимации подарков */

/* ---------- эффекты камеры ---------- */
.fx-src { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; z-index: -1; }
#live-stage { position: relative; }
.fx-tray { display: none; position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 8; padding: 10px 10px 8px; border-radius: 18px; color: #fff;
  background: rgba(14, 14, 18, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .4); }
.fx-tray.open { display: block; animation: fxTrayIn .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes fxTrayIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fx-tray-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px; }
.fx-tray-head b { font-size: 13px; }
.fx-tray-head small { font-size: 11px; color: rgba(255, 255, 255, .6); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-tray-x { border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; cursor: pointer; flex: none; }
.fx-tabs { display: flex; gap: 6px; padding-bottom: 6px; }
.fx-tabs button { border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .75); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.fx-tabs button.on { background: #fff; color: #111; border-color: #fff; }
.fx-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.fx-row::-webkit-scrollbar { display: none; }
.fx-row.hidden { display: none; }
.fx-chip { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; color: rgba(255, 255, 255, .85); font: inherit; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.fx-chip i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 22px; background: rgba(255, 255, 255, .12); border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.fx-chip span { font-size: 10px; line-height: 1.15; text-align: center; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-chip:active i { transform: scale(.92); }
.fx-chip[aria-pressed="true"] i { border-color: #fff; background: rgba(255, 255, 255, .26); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.fx-chip[aria-pressed="true"] span { color: #fff; font-weight: 700; }

/* ---------- подарки ---------- */
#gift-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 65; overflow: hidden; }
.gfx-layer { position: absolute; inset: 0; overflow: hidden; contain: layout paint; }
.gfx-layer > * { will-change: transform, opacity; }
.gfx-layer.shake { animation: gfxShake .5s 2 ease-in-out .25s; }
@keyframes gfxShake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, -3px); } 80% { transform: translate(4px, 4px); } }

.gfx-rise, .gfx-pop, .gfx-big, .gfx-mini, .gfx-fly, .gfx-drive, .gfx-sail, .gfx-swoop, .gfx-drop { position: absolute; line-height: 1; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .4)); user-select: none; }

.gfx-rise { left: var(--x, 50%); bottom: 18%; font-size: 58px; animation: gfxRise 2.6s ease-out forwards; }
@keyframes gfxRise {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  12% { opacity: 1; transform: translate(0, -6vh) scale(1.1); }
  50% { transform: translate(var(--dx, 0), -32vh) scale(1); }
  100% { transform: translate(calc(var(--dx, 0) * -1), -62vh) scale(1.15); opacity: 0; }
}
.gfx-pop { left: 50%; top: 46%; font-size: 96px; animation: gfxPop 2.6s ease-out forwards; }
.gfx-pop.calm { animation: gfxCalm 2s ease forwards; }
@keyframes gfxPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  34% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -56%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1.15); }
}
@keyframes gfxCalm { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }
.gfx-mini { left: 50%; top: 46%; font-size: 32px; opacity: 0; animation: gfxMini 1.9s ease-out forwards; animation-delay: var(--d, 0ms); }
@keyframes gfxMini {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.7) rotate(40deg); opacity: 0; }
}
.gfx-big { left: 50%; top: 46%; font-size: clamp(120px, 34vw, 210px); animation: gfxBig 3.4s ease-out forwards; }
@keyframes gfxBig {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-14deg); opacity: 0; }
  16% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -52%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.4); }
}
.gfx-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(255, 214, 102, .55), rgba(255, 120, 200, .2) 38%, transparent 68%); animation: gfxGlow 3.4s ease-out forwards; }
@keyframes gfxGlow { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: .8; } 100% { opacity: 0; } }
.gfx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: gfxFlash .7s ease-out; }
@keyframes gfxFlash { 0% { opacity: .7; } 100% { opacity: 0; } }
.gfx-rays { position: absolute; left: 50%; top: 46%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 160, .5) 0 8deg, transparent 8deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 38%); mask-image: radial-gradient(circle, #000 0, transparent 38%);
  animation: gfxRays 3.6s linear forwards; }
@keyframes gfxRays { 0% { transform: rotate(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: .9; } 100% { transform: rotate(120deg); opacity: 0; } }

.gfx-spark { position: absolute; left: var(--ox, 50%); top: var(--oy, 46%); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: hsl(var(--h, 40) 100% 66%); box-shadow: 0 0 10px hsl(var(--h, 40) 100% 66%); opacity: 0; animation: gfxSpark 1.5s ease-out forwards; animation-delay: var(--d, 0ms); }
@keyframes gfxSpark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.gfx-conf { position: absolute; left: var(--x); top: -4vh; width: 9px; height: 15px; background: hsl(var(--h) 90% 60%); opacity: 0;
  animation: gfxConf var(--t, 3s) linear forwards; animation-delay: var(--d, 0ms); }
@keyframes gfxConf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 112vh) rotate(var(--r, 600deg)); opacity: .9; } }

/* движения конкретных подарков */
.gfx-fly { left: 0; top: 58%; font-size: 108px; animation: gfxFly 2.6s cubic-bezier(.5, 0, .8, .6) forwards; animation-delay: var(--d, 0ms); }
.gfx-fly.trail { font-size: 46px; opacity: .7; }
@keyframes gfxFly { 0% { transform: translate(-22vw, 26vh) scale(.7); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(112vw, -88vh) scale(1.35); opacity: 1; } }
.gfx-drive { left: 0; top: 60%; font-size: 112px; animation: gfxDrive 3s ease-in-out forwards; animation-delay: var(--d, 0ms); }
.gfx-drive.dust { font-size: 40px; opacity: .6; }
@keyframes gfxDrive {
  0% { transform: translate(110vw, 0); } 20% { transform: translate(78vw, -8px); } 40% { transform: translate(50vw, 6px); }
  60% { transform: translate(24vw, -6px); } 80% { transform: translate(0vw, 4px); } 100% { transform: translate(-40vw, 0); }
}
.gfx-sail { left: 0; top: 54%; font-size: 118px; animation: gfxSail 4s ease-in-out forwards; }
@keyframes gfxSail {
  0% { transform: translate(-35vw, 0) rotate(-3deg); } 25% { transform: translate(5vw, -10px) rotate(3deg); } 50% { transform: translate(35vw, 6px) rotate(-3deg); }
  75% { transform: translate(70vw, -8px) rotate(3deg); } 100% { transform: translate(118vw, 0) rotate(-2deg); }
}
.gfx-waves { position: absolute; left: 0; right: 0; top: calc(54% + 82px); text-align: center; font-size: 46px; letter-spacing: 4vw; white-space: nowrap; opacity: 0; animation: gfxCalm 4s ease forwards; }
.gfx-swoop { left: 0; top: 40%; font-size: 130px; animation: gfxSwoop 3.4s ease-in-out forwards; }
@keyframes gfxSwoop {
  0% { transform: translate(-30vw, 34vh) scale(.7) rotate(-8deg); } 30% { transform: translate(18vw, -14vh) scale(1.2) rotate(6deg); }
  60% { transform: translate(50vw, 14vh) scale(1.35) rotate(-6deg); } 100% { transform: translate(118vw, -22vh) scale(1.5) rotate(8deg); }
}
.gfx-drop { left: 50%; top: 46%; font-size: clamp(110px, 30vw, 180px); animation: gfxDrop 3.2s ease-out forwards; }
@keyframes gfxDrop {
  0% { transform: translate(-50%, -95vh) rotate(-10deg); opacity: 0; } 8% { opacity: 1; }
  34% { transform: translate(-50%, -50%) scale(1.18) rotate(0); } 42% { transform: translate(-50%, -50%) scale(.9); } 52% { transform: translate(-50%, -50%) scale(1.06); }
  60% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -64%) scale(1.15); opacity: 0; }
}
.gfx-ring { position: absolute; left: 50%; top: 46%; width: 62vmin; height: 20vmin; margin: -10vmin 0 0 -31vmin; border: 3px solid rgba(255, 255, 255, .75); border-radius: 50%;
  box-shadow: 0 0 22px rgba(255, 255, 255, .5); transform: rotate(-18deg); opacity: 0; animation: gfxRing 3.4s ease-out forwards; }
.gfx-ring.r2 { transform: rotate(18deg); animation-delay: .25s; }
@keyframes gfxRing { 0% { opacity: 0; scale: .4; } 20% { opacity: 1; } 100% { opacity: 0; scale: 1.5; } }
.gfx-rainbow { position: absolute; left: 50%; bottom: 20%; width: min(92vw, 520px); height: min(46vw, 260px); margin-left: calc(min(92vw, 520px) / -2);
  border-radius: 999px 999px 0 0; transform-origin: 50% 100%; opacity: 0;
  background: radial-gradient(circle at 50% 100%, transparent 54%, #ff4d4d 55% 60%, #ff9d3c 60% 65%, #ffe14d 65% 70%, #54e36a 70% 75%, #45b6ff 75% 80%, #8a5cff 80% 85%, transparent 86%);
  animation: gfxRainbow 3.6s ease-out forwards; }
@keyframes gfxRainbow { 0% { transform: scaleY(0); opacity: 0; } 22% { transform: scaleY(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* плашки «кто подарил» + комбо */
.gfx-banners { position: absolute; left: 10px; top: calc(env(safe-area-inset-top, 0px) + 92px); display: flex; flex-direction: column; gap: 8px; z-index: 3; max-width: calc(100vw - 20px); }
.gfx-banner { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 999px; color: #fff; max-width: min(84vw, 360px);
  background: linear-gradient(90deg, rgba(18, 18, 24, .88), rgba(18, 18, 24, .55)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: gfxBIn .45s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .35s, transform .35s; }
.gfx-banner.t3 { border-color: rgba(255, 200, 90, .6); }
.gfx-banner.t4 { background: linear-gradient(90deg, rgba(180, 110, 10, .92), rgba(255, 190, 60, .7)); border-color: #ffe08a; box-shadow: 0 8px 28px rgba(255, 190, 60, .45); }
.gfx-banner.out { opacity: 0; transform: translateX(-30px); }
@keyframes gfxBIn { from { transform: translateX(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
.gfx-b-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .2); }
.gfx-b-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.gfx-b-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfx-b-txt small { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfx-b-ico { font-size: 28px; line-height: 1; }
.gfx-b-n { font-size: 22px; font-weight: 900; font-style: italic; min-width: 2ch; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.gfx-b-n.bump { animation: gfxBump .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gfxBump { 0% { transform: scale(.6); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .gfx-layer *, .gfx-banner, .gfx-b-n, .fx-tray.open { animation-duration: .01s !important; animation-delay: 0s !important; }
}
@media (max-width: 640px) {
  .fx-tray { left: 6px; right: 6px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
}