/* ============================================================================
   Malvagi Fantasy — CARTA CON EFFETTI COSMETICI (banco di prova admin)
   Motore riusabile da webboardgame/references/cosmetic-fx.css. Le var di tema
   sono rimappate al look "villain" di Malvagi e scopate sotto .fx-lab.
   ============================================================================ */
.fx-lab {
  --font-display: 'Fredoka', sans-serif;
  --gold: #ffcf3f; --gold-bright: #ffe08a; --kohl: #120a24;
  --ink: #f3ecff; --ink-dim: #c3b4e6;
}
/* bottoni preset/gyro (il motore usa classi .btn .small .ghost) */
.fx-lab .btn { font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 8px 14px;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.14); background: linear-gradient(180deg,#8e6bff,#5a37d6);
  color: #fff; cursor: pointer; }
.fx-lab .btn:hover { filter: brightness(1.08); }
.fx-lab .btn.small { padding: 6px 12px; font-size: 12px; }
.fx-lab .btn.ghost { background: rgba(0,0,0,.28); color: #f3ecff; }

/* ---------------------------------------------------------------------------- */
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem; margin: 0.25rem 0 0.55rem; }
.fx-grouplabel { min-width: 92px; font-family: var(--font-display); color: var(--gold-bright); font-size: 0.9rem; letter-spacing: 0.03em; }
.fx-check { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-family: var(--font-display); color: var(--ink); font-size: 0.9rem; }
.fx-check input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
.fx-chip { padding: 0.26rem 0.72rem; border-radius: 999px; cursor: pointer; font-family: var(--font-display); font-size: 0.82rem;
  border: 1px solid rgba(216,169,58,0.35); background: rgba(31,78,140,0.15); color: var(--ink-dim); }
.fx-chip:hover { border-color: var(--gold); color: var(--ink); }
.fx-chip.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--kohl); border-color: var(--gold); }
.fx-slider { gap: 0.4rem; }
.fx-slider input[type="range"] { width: 96px; accent-color: var(--gold); cursor: pointer; }
.fx-stage { display: grid; place-items: center; padding: 1.4rem; }

.fx-card {
  position: relative; overflow: hidden; border-radius: 16px;
  width: min(330px, 78vw); aspect-ratio: 3 / 4;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55); transition: transform 0.12s ease, box-shadow 0.25s ease;
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  --fx-glow: 243,207,107; --fx-sweep: 255,232,150;   /* default oro; la rifinitura li sovrascrive */
  --fx-foil: 0.55;                                    /* intensità foil (slider) → opacità holo */
}
.fx-card .img-slot, .fx-card > .fx-w .img-slot { width: 100% !important; height: 100% !important; display: block; border-radius: inherit; }
.fx-card img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fx-w { position: absolute; inset: 0; }
.fx-layer { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; display: none; }

/* --- RITAGLIO SULLA FORMA DEL PNG (auto-bordo via alpha) ---
   Quando l'arte è un emblema/sticker su sfondo trasparente, gli effetti nei layer
   rettangolari sbordano negli angoli vuoti. Con --fx-mask = url del PNG, mascheriamo
   TUTTI i layer (tranne la cornice .fx-ring, che ha già il suo mask-composite) e le
   particelle sull'alpha dell'immagine → gli effetti seguono la silhouette reale. */
.fx-card.fx-fit-contain img { object-fit: contain; }
.fx-card.fx-ar-square { aspect-ratio: 1 / 1; }
.fx-card.fx-masked .fx-layer:not(.fx-ring) {
  -webkit-mask-image: var(--fx-mask); mask-image: var(--fx-mask);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Tilt 3D quando serve luce direzionale */
.fx-card.fx-foil, .fx-card.fx-glare, .fx-card.fx-move { transform: perspective(760px) rotateY(var(--rx)) rotateX(var(--ry)); }

/* --- RIFLESSI --- */
.fx-card.fx-foil .fx-holo { display: block; z-index: 2; mix-blend-mode: color-dodge; opacity: var(--fx-foil, 0.55);
  background: repeating-linear-gradient(115deg, rgba(255,0,132,0.42) 0%, rgba(255,215,0,0.42) 12%, rgba(0,255,170,0.42) 24%, rgba(0,170,255,0.42) 36%, rgba(180,0,255,0.42) 48%, rgba(255,0,132,0.42) 60%);
  background-size: 300% 300%; background-position: var(--mx) var(--my); }
.fx-card.fx-glare .fx-glare { display: block; z-index: 3; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.6), rgba(255,255,255,0) 45%); }
.fx-card.fx-shine .fx-shine { display: block; z-index: 5; overflow: hidden; }
.fx-shine::before { content: ''; position: absolute; top: -50%; left: -60%; width: 38%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-sweep),0.5), transparent); transform: rotate(18deg); animation: fxSweep 4.6s ease-in-out infinite; }
@keyframes fxSweep { 0% { left: -60%; } 55%, 100% { left: 120%; } }
.fx-card.fx-prism-on .fx-prism { display: block; z-index: 2; mix-blend-mode: color-dodge; opacity: 0.5;
  background: linear-gradient(60deg, transparent 20%, rgba(255,60,60,.5) 34%, rgba(255,230,60,.5) 44%, rgba(60,255,140,.5) 54%, rgba(60,160,255,.5) 64%, rgba(180,60,255,.5) 74%, transparent 90%);
  background-size: 220% 220%; background-position: var(--mx) var(--my); }
.fx-card.fx-galaxy-on .fx-galaxy { display: block; z-index: 1; mix-blend-mode: screen; animation: fxTwinkle 3.6s ease-in-out infinite;
  background:
    radial-gradient(1.3px 1.3px at 15% 20%, #cfe3ff, transparent 60%), radial-gradient(1px 1px at 70% 35%, #ffd9f2, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent 60%), radial-gradient(1px 1px at 85% 78%, #bcd4ff, transparent 60%),
    radial-gradient(1px 1px at 55% 15%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 25% 55%, #e6c6ff, transparent 60%),
    radial-gradient(1px 1px at 90% 45%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 33% 88%, #cfe3ff, transparent 60%),
    radial-gradient(130% 95% at 50% 30%, rgba(90,45,150,0.28), transparent 70%); }
@keyframes fxTwinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.fx-card.fx-chrome-on .fx-chrome { display: block; z-index: 2; mix-blend-mode: soft-light; opacity: 0.85;
  background: conic-gradient(from calc(var(--rx) * 8) at var(--mx) var(--my), #ff7ab6, #ffd36e, #8be9c0, #6ab8ff, #c79bf0, #ff7ab6); }

/* --- PARTICELLE (canvas, multi-tipo) --- */
.fx-card.fx-p .fx-particles { display: block; z-index: 4; width: 100%; height: 100%; }

/* --- MOVIMENTO (wrapper annidati → si sommano) --- */
.fx-card.fx-kb .img-slot img, .fx-card.fx-kb img { animation: fxKen 15s ease-in-out infinite alternate; }
@keyframes fxKen { from { transform: scale(1.05) translate(-1.4%, 1%); } to { transform: scale(1.14) translate(1.4%, -1%); } }
.fx-card.fx-bob .fx-w-bob { animation: fxBob 4s ease-in-out infinite; }
@keyframes fxBob { 0%, 100% { transform: translateY(-1.6%); } 50% { transform: translateY(1.6%); } }
.fx-card.fx-sway .fx-w-sway { animation: fxSway 5s ease-in-out infinite; }
@keyframes fxSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.fx-card.fx-breathe .fx-w-breathe { animation: fxBreathe 3.4s ease-in-out infinite; }
@keyframes fxBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.fx-card.fx-parallax .fx-w-par { transform: translate(calc((var(--mx) - 50%) * -0.14), calc((var(--my) - 50%) * -0.14)); transition: transform 0.12s ease; }

/* --- RIFINITURA metallica: bordo luminoso + patina ghiaccio (colore da --fx-glow) --- */
.fx-card.fx-finish { box-shadow: 0 0 0 3px rgba(var(--fx-glow),0.9), 0 0 26px rgba(var(--fx-glow),0.55), 0 14px 34px rgba(0,0,0,0.55); }
.fx-card.fx-frost-on .fx-frost { display: block; z-index: 5; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 38%, transparent 52%, rgba(200,235,255,0.4) 100%), linear-gradient(180deg, rgba(215,242,255,0.14), rgba(180,225,255,0.05)); }

/* --- CORNICE --- */
.fx-card.fx-ring-on .fx-ring { display: block; z-index: 9; padding: 3px;
  background: conic-gradient(from var(--fxa), rgba(var(--fx-glow),0.95), transparent 20%, rgba(var(--fx-glow),0.95) 50%, transparent 70%, rgba(var(--fx-glow),0.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: fxSpin 4s linear infinite; }
@keyframes fxSpin { to { --fxa: 360deg; } }
.fx-card.fx-aura-on .fx-aura { display: block; z-index: 1; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 45%, rgba(var(--fx-glow),0.3), transparent 62%); animation: fxPulse 3s ease-in-out infinite; }
.fx-card.fx-neon-on .fx-neon { display: block; z-index: 8; box-shadow: inset 0 0 14px rgba(var(--fx-glow),0.85), inset 0 0 3px rgba(var(--fx-glow),1); animation: fxPulse 2.4s ease-in-out infinite; }
@keyframes fxPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* --- OVERLAY --- */
.fx-card.fx-scan-on .fx-scan { display: block; z-index: 6; mix-blend-mode: overlay; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.35) 0 1px, transparent 1px 3px); animation: fxScan 6s linear infinite; }
@keyframes fxScan { to { background-position: 0 12px; } }
.fx-card.fx-vig-on .fx-vig { display: block; z-index: 7; background: radial-gradient(circle at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%); }
.fx-card.fx-grain-on .fx-grain { display: block; z-index: 6; opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px; animation: fxGrain 0.6s steps(3) infinite; }
@keyframes fxGrain { to { background-position: 40px 30px; } }

@media (prefers-reduced-motion: reduce) {
  .fx-shine::before, .fx-card.fx-galaxy-on .fx-galaxy, .fx-card.fx-kb .img-slot img, .fx-card.fx-kb img, .fx-card.fx-bob .fx-w-bob,
  .fx-card.fx-sway .fx-w-sway, .fx-card.fx-breathe .fx-w-breathe, .fx-card.fx-ring-on .fx-ring,
  .fx-card.fx-aura-on .fx-aura, .fx-card.fx-neon-on .fx-neon, .fx-card.fx-scan-on .fx-scan, .fx-card.fx-grain-on .fx-grain { animation: none; }
}