/* Lifelines game-feel layer (js/fx.js). Everything is appended to <body>, outside #app. */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9000; }

/* ---------- flash ---------- */
.fx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 8990; opacity: 0; animation: fxFlash .55s ease-out forwards; mix-blend-mode: screen; }
@keyframes fxFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- toasts ---------- */
.fx-toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9100; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; width: min(440px, calc(100vw - 32px)); }
.fx-toast {
  pointer-events: auto; cursor: pointer; position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; color: #f6f1ff;
  background: linear-gradient(135deg, rgba(51, 44, 96, .97), rgba(34, 29, 63, .97));
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: fxToastIn .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.fx-toast.fx-out { animation: fxToastOut .36s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes fxToastIn { from { opacity: 0; transform: translateY(-40px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes fxToastOut { to { opacity: 0; transform: translateY(-24px) scale(.9); margin-bottom: -70px; } }
.fx-toast-icon { font-size: 1.7rem; line-height: 1; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.fx-toast-body { min-width: 0; flex: 1; }
.fx-toast-kicker { font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #b3a9d6; margin-bottom: 2px; }
.fx-toast-msg { font-size: 1rem; line-height: 1.3; }
.fx-toast-msg b { font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; }
.fx-toast-msg small { display: block; color: #b3a9d6; font-size: .85rem; }

.fx-toast-trait { border-color: rgba(204, 93, 232, .55); }
.fx-toast-trait .fx-toast-kicker { color: #e599f7; }
.fx-toast-good { border-color: rgba(47, 191, 113, .6); }
.fx-toast-bad { border-color: rgba(255, 93, 115, .6); }

/* achievement unlock */
.fx-toast-achievement {
  padding: 14px 18px; border: 2px solid #ffcd3c;
  background: linear-gradient(135deg, #3d2f12 0%, #2a2450 55%, #3a2a0a 100%);
  box-shadow: 0 0 0 4px rgba(255, 205, 60, .15), 0 0 28px rgba(255, 205, 60, .35), 0 14px 34px rgba(0, 0, 0, .5);
  animation: fxAchIn .7s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes fxAchIn { 0% { opacity: 0; transform: translateY(-60px) scale(.6); } 60% { opacity: 1; transform: translateY(4px) scale(1.04); } 100% { transform: none; } }
.fx-toast-achievement .fx-toast-icon {
  font-size: 2rem; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcd3c 45%, #c98a00 100%);
  box-shadow: 0 0 18px rgba(255, 205, 60, .7), inset 0 -3px 0 rgba(0, 0, 0, .2);
  animation: fxIconPop .8s .15s cubic-bezier(.2, 1.8, .4, 1) both;
}
@keyframes fxIconPop { 0% { transform: scale(0) rotate(-120deg); } 70% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
.fx-toast-achievement .fx-toast-kicker { color: #ffcd3c; }
.fx-toast-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 48%, rgba(255, 255, 255, .1) 54%, transparent 65%); transform: translateX(-120%); animation: fxShine 1.1s .45s ease-in-out forwards; }
@keyframes fxShine { to { transform: translateX(120%); } }

/* ---------- big arcade text ---------- */
.fx-big { position: fixed; inset: 0; z-index: 9050; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fx-big-txt {
  font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: clamp(3rem, 12vw, 7.5rem); letter-spacing: .02em; line-height: 1;
  color: var(--c); white-space: nowrap; transform: rotate(-6deg);
  -webkit-text-stroke: 3px rgba(30, 18, 50, .85); paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(30, 18, 50, .9), 0 10px 0 rgba(0, 0, 0, .25), 0 0 40px var(--c), 0 0 80px color-mix(in srgb, var(--c) 50%, transparent);
}
.fx-big-txt span { display: inline-block; animation: fxStamp .55s calc(var(--i) * 45ms) cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fxStamp { 0% { opacity: 0; transform: scale(3.2) translateY(-30px) rotate(-14deg); } 55% { opacity: 1; transform: scale(.88) rotate(3deg); } 100% { transform: none; } }
.fx-big-sub { margin-top: .6rem; font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: clamp(1rem, 3vw, 1.6rem); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); animation: fxSub .5s .35s ease-out both; }
@keyframes fxSub { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fx-big-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 8px solid var(--c); opacity: 0; animation: fxRing .7s .12s ease-out; }
@keyframes fxRing { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(6); border-width: 1px; } }
.fx-big.fx-out { animation: fxBigOut .45s ease-in forwards; }
@keyframes fxBigOut { to { opacity: 0; transform: scale(1.25); filter: blur(4px); } }

/* ---------- counters ---------- */
.fx-counting { font-variant-numeric: tabular-nums; }

/* ---------- reduced motion ---------- */
.fx-rm, .fx-rm * { animation-duration: .2s !important; animation-delay: 0s !important; }
.fx-big.fx-rm .fx-big-txt span { animation-name: fxFade !important; }
.fx-toast.fx-rm { animation-name: fxFade !important; }
.fx-toast.fx-rm .fx-toast-shine { display: none; }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fx-flash { animation-duration: .25s; }
  .fx-big-ring { display: none; }
}