/* ==========================================================================
   Effetti (js/fx.js): particelle, testi che salgono, scheda dei traguardi,
   fiamma della serie, risposta al tocco. Solo colori pieni: niente sfumature.
   ========================================================================== */
.fx-layer { position: fixed; inset: 0; z-index: 1100; pointer-events: none; overflow: hidden; contain: strict; }
.fx-layer > i { position: absolute; display: block; pointer-events: none; will-change: transform, opacity; }
.fx-dot { border-radius: 50%; }
.fx-ring { border-radius: 50%; border: 2px solid currentColor; }
.fx-float {
  font-family: var(--font-display); font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 var(--sheet), 0 0 6px var(--sheet);
}

/* --- scheda dei traguardi --- */
.fx-cel {
  position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
}
.fx-cel-card {
  width: min(320px, 100%); padding: 22px 24px 22px; border-radius: 26px; text-align: center;
  background: var(--raised); border: 1px solid var(--stroke); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column; align-items: center;
}
.fx-cel-art { width: 132px; height: 150px; display: grid; place-items: center; margin: -4px 0 4px; }
.fx-cel-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--c); color: #fff; margin: 4px 0 12px; font-size: 34px; }
.fx-cel-ic svg { width: 38px; height: 38px; }
.fx-cel-n { font-family: var(--font-display); font-size: 52px; line-height: 1; font-weight: 750; letter-spacing: -0.04em; color: var(--c); font-variant-numeric: tabular-nums; display: block; }
.fx-cel-t { margin: 8px 0 0; font-size: 19px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.fx-cel-s { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); line-height: 1.4; }

/* --- fiamma della serie --- */
.fx-flamebox { position: relative; }
.fx-flamebox > .fx-flame { position: absolute; inset: 0; }
.fx-flame { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-flame.t0 { color: var(--ink-4); }
.fx-fl-grow { transform-box: view-box; transform-origin: 60px 142px; }
.fx-fl-o, .fx-fl-m, .fx-fl-i { transform-box: fill-box; transform-origin: 50% 100%; }
.fx-fl-o { animation: fxFlickO 1.7s ease-in-out infinite alternate; }
.fx-fl-m { animation: fxFlickI 1s ease-in-out infinite alternate; }
.fx-fl-i { animation: fxFlickI 0.66s ease-in-out infinite alternate-reverse; }
@keyframes fxFlickO { 0% { transform: scale(1, 1) skewX(0deg); } 50% { transform: scale(0.98, 1.03) skewX(-1.5deg); } 100% { transform: scale(1.02, 0.98) skewX(1.5deg); } }
@keyframes fxFlickI { 0% { transform: scale(1, 1); } 100% { transform: scale(0.95, 1.07); } }
.fx-fl-glow { transform-box: fill-box; transform-origin: center; animation: fxGlow 2.4s ease-in-out infinite alternate; }
@keyframes fxGlow { from { transform: scale(0.96); } to { transform: scale(1.04); } }
.fx-fl-sp { opacity: 0; animation: fxSpark 1.9s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes fxSpark { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 0), -90px); } }
.fx-fl-star { transform-box: fill-box; transform-origin: center; animation: fxTwinkle 1.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes fxTwinkle { from { transform: scale(0.7) rotate(0deg); opacity: 0.6; } to { transform: scale(1.1) rotate(20deg); opacity: 1; } }
.fx-flame.mini .fx-fl-o, .fx-flame.mini .fx-fl-m, .fx-flame.mini .fx-fl-i { animation-duration: 2.2s; }
/* icona piccola nel testo */
.fx-flame-i { display: inline-block; width: 1.05em; height: 1.2em; vertical-align: -0.22em; margin-right: 0.18em; }

/* --- risposta al tocco: ogni bottone «si abbassa» subito --- */
.chip, .at-cat, .gym-chip, .choice, .tg-chip, .fc-known, .fc-review, .at-del, .at-toggle {
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.2s, transform 0.18s var(--ease);
}
.chip:active, .at-cat:active, .gym-chip:active, .tg-chip:active, .at-del:active, .at-toggle:active { transform: scale(0.95); }
.choice:active:not(:disabled) { transform: scale(0.98); }
.cs-btn:active, .rg-check:active, .cal-check:active { transition-duration: 0.06s; }
/* interruttori: la pallina si allunga mentre premi */
.toggle input::after { border-radius: 999px; transition: transform 0.2s var(--ease), width 0.18s var(--ease); }
.toggle input:active::after { width: 19px; }
.toggle input:checked:active::after { transform: translateX(9px); }

/* risposte: giusta rimbalza, sbagliata trema (classi già usate da Palestra e Flashcard) */
.choice.correct.fx-hit { animation: fxRight 0.42s var(--ease); }
@keyframes fxRight { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .fx-fl-o, .fx-fl-m, .fx-fl-i, .fx-fl-glow, .fx-fl-star { animation: none !important; }
  .fx-fl-sp { display: none; }
  .choice.correct.fx-hit { animation: none; }
  .chip:active, .at-cat:active, .gym-chip:active, .tg-chip:active, .choice:active { transform: none; }
}