/* ======================================================================
   Effekte für Wir und die Spiele-App (/shared/fx.js): Herz-Regen (Canvas), Wackeln, „You are in sync“,
   Sync-Knopf (oben neben dem Avatar). Alles über der App liegt mit pointer-events:none – Eingaben gehen immer durch.
   ====================================================================== */
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}

/* Wackeln: auf dem body (Wrapper über allen Bildschirmen), nicht auf einzelnen Knöpfen */
html.fx-wobble body{animation:fxWobble .32s ease-in-out infinite}
@keyframes fxWobble{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-7px,3px) rotate(-.8deg)}
  40%{transform:translate(6px,-4px) rotate(.7deg)}
  60%{transform:translate(-5px,-2px) rotate(-.5deg)}
  80%{transform:translate(5px,3px) rotate(.6deg)}
}

/* „You are in sync“ */
.fx-sync{position:fixed;inset:0;z-index:91;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .45s ease}
.fx-sync.show{opacity:1}
.fx-sync b{font-family:'Caveat',cursive;font-size:clamp(52px,16vw,92px);font-weight:700;line-height:1;text-align:center;color:#fff;
  background:linear-gradient(120deg,var(--fx-a,#ff5fa2),var(--fx-b,#3b9eff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.25)) drop-shadow(0 0 22px rgba(255,255,255,.65));transform:scale(.6) rotate(-4deg);
  transition:transform .6s cubic-bezier(.2,1.6,.4,1)}
.fx-sync.show b{transform:scale(1) rotate(-4deg)}

/* ---------- Sync-Knopf oben neben dem Avatar ---------- */
/* Ringe liegen INNERHALB des Knopfs (nichts überlappt den Avatar): eigener Ring wächst beim Halten vom Herz
   bis an den Rand, der Ring der anderen Person leuchtet als Rand in ihrer Herzfarbe. */
.sync-top{position:relative;flex-shrink:0;width:48px;height:48px;border-radius:50%;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 55%),linear-gradient(145deg,var(--sync-me,#ff5fa2),color-mix(in srgb,var(--sync-me,#ff5fa2) 70%,#000));
  box-shadow:0 0 0 3px #fff,0 6px 18px color-mix(in srgb,var(--sync-me,#ff5fa2) 55%,transparent);
  animation:syncGlow 2.6s ease-in-out infinite;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  transition:transform .2s ease}
.sync-top svg{position:relative;z-index:1;width:24px;height:22px;overflow:visible;pointer-events:none;animation:fxPulse 2.4s ease-in-out infinite;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.sync-top path{fill:#fff}
@keyframes syncGlow{0%,100%{box-shadow:0 0 0 3px #fff,0 6px 18px color-mix(in srgb,var(--sync-me,#ff5fa2) 45%,transparent)}
  50%{box-shadow:0 0 0 3px #fff,0 0 22px 4px color-mix(in srgb,var(--sync-me,#ff5fa2) 70%,transparent)}}
.sync-top::before,.sync-top::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
/* eigener Ring wächst beim Halten von innen bis an den Rand */
.sync-top::before{inset:4px;border:3px solid #fff;opacity:0;transform:scale(.4);transition:transform 1s cubic-bezier(.2,.8,.3,1),opacity .2s ease}
/* Ring der anderen Person: leuchtender Rand in ihrer Herzfarbe */
.sync-top::after{inset:-1px;box-shadow:0 0 0 4px var(--sync-partner,#3b9eff),0 0 16px 4px var(--sync-partner,#3b9eff);opacity:0;transition:opacity .25s ease}
.sync-top.holding{transform:scale(.93)}
.sync-top.holding::before{opacity:1;transform:scale(1)}
.sync-top.holding svg{animation-duration:.8s}
.sync-top.partner::after{opacity:1;animation:fxGlow 1.2s ease-in-out infinite}
/* Hinweis beim ersten Mal */
.sync-tip{position:fixed;z-index:66;left:max(16px,env(safe-area-inset-left));top:calc(var(--top-h,58px) + 4px);max-width:240px;padding:10px 14px;border-radius:16px;
  font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:auto;cursor:pointer}
.sync-tip.show{opacity:1;transform:none}
.sync-tip::before{content:'';position:absolute;top:-7px;left:66px;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:3px}
@keyframes fxPulse{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.07)}}
@keyframes fxGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.fx-hint{position:fixed;left:50%;top:calc(var(--top-h,58px) + 6px);z-index:65;transform:translate(-50%,-20px);opacity:0;pointer-events:none;
  max-width:calc(100% - 32px);padding:10px 16px;border-radius:20px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:transform .35s,opacity .35s}
.fx-hint.show{transform:translate(-50%,0);opacity:1}
/* Nachfrage „Schütteln erlauben“ */
.fx-ask{position:fixed;left:50%;bottom:calc(var(--nav-h,80px) + 16px);z-index:92;transform:translate(-50%,30px);opacity:0;pointer-events:none;
  width:calc(100% - 32px);max-width:380px;padding:16px;border-radius:22px;display:flex;flex-direction:column;gap:10px;text-align:center;transition:all .35s ease}
.fx-ask.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.fx-ask b{font-size:16px}
.fx-ask p{font-size:13.5px;font-weight:600;color:var(--ink-soft);line-height:1.4}
.fx-ask .row{justify-content:center}

@media (prefers-reduced-motion: reduce){
  html.fx-wobble body{animation:fxWobbleSoft 1s ease-in-out infinite!important;animation-duration:1s!important;animation-iteration-count:infinite!important}
  .sync-top svg{animation:none}
}
@keyframes fxWobbleSoft{0%,100%{transform:none}50%{transform:translateX(2px)}}