/* Farm3D — animazione di montaggio [f3d_montaggio]. Prefisso f3m-. */
.f3m {
  --f3m-scuro: #1c1a17;
  --f3m-oro: #c9a24a;
  --f3m-crema: #f6f1e6;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 2rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--f3m-scuro);
  color: var(--f3m-crema);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.f3m-testa { padding: 18px 20px 10px; text-align: center; }
.f3m-testa h2 { margin: 0; color: #e2c47a; font-size: 1.45rem; line-height: 1.3; }
.f3m-testa p { margin: 4px 0 0; color: #cfc6b3; font-size: 0.95rem; }
.f3m-scena { position: relative; margin: 0 12px; border-radius: 8px; overflow: hidden; }
.f3m-svg { display: block; width: 100%; height: auto; }

/* pezzi: nascosti finché il passo non li mette */
.f3m-pz { opacity: 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.3, 1.4, 0.55, 1); transform-box: fill-box; transform-origin: center; }
.f3m-pz.in { opacity: 1; }
.f3m-pz.via { opacity: 0 !important; transform: translateY(-3px); }
.f3m-pz.storto { transform: rotate(-3deg); transition: opacity 0.5s ease, transform 1s ease-in-out; }
#f3m-dima, #f3m-riga { transition: opacity 0.5s ease, transform 1s ease-in-out; }
#f3m-riga:not(.in) { transform: translateY(4px); }
.f3m-lettera:not(.in) { transform: translateY(-7px); }
#f3m-ponte:not(.in), #f3m-masch-r:not(.in), #f3m-masch-s:not(.in) { transform: translateY(-6px); }
#f3m-cornice:not(.in), #f3m-corpo:not(.in) { transform: translateY(-9px); }

.f3m-carta { fill: #fffdf7; stroke: #c8c0b0; stroke-width: 0.15; stroke-dasharray: 0.8 0.5; }
.f3m-traccia { fill: none; stroke: #a49a86; stroke-width: 0.12; stroke-dasharray: 0.5 0.35; }
.f3m-base { stroke: #c0392b; stroke-width: 0.14; stroke-dasharray: 0.9 0.5; }
.f3m-asse { stroke: #8a8170; stroke-width: 0.1; stroke-dasharray: 0.4 0.4; }
.f3m-oro { fill: var(--f3m-oro); stroke: #8f6f22; stroke-width: 0.06; fill-rule: evenodd; transition: fill 1s ease; }
.f3m-attrezzo { stroke-width: 0.1; fill-rule: evenodd; }
.f3m-rosa { fill: #eea9ad; stroke: #b85c63; }
.f3m-blu { fill: #8fb1e6; stroke: #3f6fb5; fill-opacity: 0.92; }
.f3m-verde { fill: #9fe0b5; stroke: #3c9a60; fill-opacity: 0.88; }
.f3m-finito .f3m-oro { fill: #d9b45a; }

.f3m-livella { opacity: 0; transition: opacity 0.4s ease, transform 1s ease-in-out; }
.f3m-livella.in { opacity: 1; }
.f3m-bolla { transition: transform 1s ease-in-out; transform-box: fill-box; transform-origin: center; }

/* «In bolla ✓» sopra la scena */
.f3m-msg {
  position: absolute; right: 3%; top: 6%;
  transform: scale(0.6);
  padding: 6px 16px; border-radius: 999px;
  background: #2e9e5b; color: #fff; font-weight: 700; font-size: 1.05rem;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.f3m-msg.in { animation: f3m-pop 1.3s ease both; }
@keyframes f3m-pop {
  0% { opacity: 0; transform: scale(0.6); }
  20%, 75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-6px); }
}

.f3m-dida { display: flex; align-items: center; gap: 10px; padding: 12px 20px 4px; min-height: 3.2em; }
.f3m-num { flex: 0 0 auto; background: var(--f3m-oro); color: var(--f3m-scuro); font-weight: 700; border-radius: 999px; padding: 3px 10px; font-size: 0.9rem; }
.f3m-testo { font-size: 1.05rem; line-height: 1.4; }
.f3m-comandi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 20px 16px; flex-wrap: wrap; }
.f3m-punti { display: flex; gap: 6px; flex-wrap: wrap; }
.f3m-punti button, .f3m-play { font: inherit; cursor: pointer; border-radius: 999px; }
.f3m-punti button { width: 30px; height: 30px; padding: 0; border: 1px solid #5a5244; background: transparent; color: #cfc6b3; font-size: 0.85rem; }
.f3m-punti button.on { background: var(--f3m-oro); border-color: var(--f3m-oro); color: var(--f3m-scuro); font-weight: 700; }
.f3m-play { border: 1px solid var(--f3m-oro); background: transparent; color: #e2c47a; padding: 6px 16px; font-weight: 600; }
.f3m-punti button:focus-visible, .f3m-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.f3m-passi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.f3m-salta, .f3m-salta * { transition: none !important; animation: none !important; }

@media (max-width: 640px) {
  .f3m-testa h2 { font-size: 1.2rem; }
  .f3m-scena { margin: 0 6px; }
  .f3m-dida { padding: 10px 12px 2px; }
  .f3m-testo { font-size: 0.98rem; }
  .f3m-comandi { padding: 6px 12px 14px; }
  .f3m-msg { font-size: 0.9rem; padding: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .f3m * { transition: none !important; animation: none !important; }
}