/* ---------- il pulsante resta quello di FP Home Manager ---------- */
.fpm-gatto svg { overflow: visible; }
.fpm-gatto .fpm-gn * { transform-box: fill-box; }
.fpm-gatto .fpm-gn { transition: transform 1s ease-in-out; }

/* ---------- le animazioni sempre accese, lente ---------- */
.fpm-gn-tutto { transform-origin: 50% 70%; animation: fpm-gn-vola 4.6s ease-in-out infinite; }
@keyframes fpm-gn-vola {
	0%, 100% { transform: translateY( 0 ) rotate( -1deg ); }
	50% { transform: translateY( -5px ) rotate( 1deg ); }
}
/* il vapore: solo transform e opacity */
.fpm-gn-lunaa { transform-origin: 50% 50%; }
.fpm-gn-vapore { animation: fpm-gn-scorri 9s linear infinite; }
@keyframes fpm-gn-scorri { 0%, 100% { transform: translateX( -3px ); } 50% { transform: translateX( 3px ); } }
.fpm-gn-vp { transform-box: fill-box; transform-origin: 50% 50%; animation: fpm-gn-resp 6s ease-in-out infinite; }
.fpm-gn-q1, .fpm-gn-p1 { animation-delay: -1.5s; } .fpm-gn-q2, .fpm-gn-p2 { animation-delay: -3s; } .fpm-gn-q3, .fpm-gn-p3 { animation-delay: -4.5s; }
@keyframes fpm-gn-resp { 0%, 100% { transform: scale( .92 ) translate( 0, 1.5px ); opacity: .85; } 50% { transform: scale( 1.16 ) translate( 1.5px, -2px ); opacity: 1; } }
.fpm-gn-vg { animation: fpm-gn-lucc 2.8s ease-in-out infinite; }
.fpm-gn-g1 { animation-delay: -.5s; } .fpm-gn-g2 { animation-delay: -1s; } .fpm-gn-g3 { animation-delay: -1.5s; } .fpm-gn-g4 { animation-delay: -2s; }
@keyframes fpm-gn-lucc { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }
.fpm-gn-vs { transform-box: fill-box; transform-origin: 50% 50%; animation: fpm-gn-stella 3.4s ease-in-out infinite; }
.fpm-gn-s1 { animation-delay: -.6s; } .fpm-gn-s2 { animation-delay: -1.2s; } .fpm-gn-s3 { animation-delay: -1.8s; } .fpm-gn-s4 { animation-delay: -2.4s; } .fpm-gn-s5 { animation-delay: -3s; }
@keyframes fpm-gn-stella { 0% { opacity: 0; transform: translateY( 4px ) scale( .3 ); } 30% { opacity: 1; transform: translateY( -4px ) scale( 1 ); } 100% { opacity: 0; transform: translateY( -24px ) scale( .4 ); } }
.fpm-gn-vb, .fpm-gn-vo, .fpm-gn-vr { transition: opacity 1s; }
.fpm-gn-vo, .fpm-gn-vr { opacity: 0; }
.fpm-gn-is-super .fpm-gn-vo { opacity: 1; }
.fpm-gn-is-super .fpm-gn-vb { opacity: .25; }
.fpm-gn-is-fusa .fpm-gn-vr { opacity: 1; }
.fpm-gn-is-dorme .fpm-gn-vapore { opacity: .5; animation-duration: 16s; }
/* gli sbuffi di partenza, arrivo e fumetto */
.fpm-gn-scia { position: fixed; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; background: radial-gradient( circle, rgba( 125, 211, 252, .9 ), rgba( 37, 99, 235, .4 ) 55%, rgba( 30, 58, 138, 0 ) 72% ); animation: fpm-gn-sbuffo 1.1s ease-out both; }
.fpm-gn-scia-oro { background: radial-gradient( circle, rgba( 253, 230, 138, .9 ), rgba( 245, 158, 11, .4 ) 55%, rgba( 245, 158, 11, 0 ) 72% ); }
@keyframes fpm-gn-sbuffo { from { opacity: .95; transform: scale( .4 ); } to { opacity: 0; transform: scale( 2.4 ) translateY( -14px ); } }
.fpm-gatto svg { transition: scale .22s ease-out; }
@keyframes fpm-gn-luce { 50% { opacity: .6; } }
.fpm-gn-coda { transform-origin: 0% 100%; animation: fpm-gn-coda 3s ease-in-out infinite; }
@keyframes fpm-gn-coda { 50% { transform: rotate( 10deg ); } }
.fpm-gn-occhi { transform-origin: 50% 50%; animation: fpm-gn-batti 5s infinite; }
@keyframes fpm-gn-batti { 0%, 92%, 100% { transform: scaleY( 1 ); } 95% { transform: scaleY( .1 ); } }
.fpm-gn-sguardo { transition: transform .25s ease-out; }
.fpm-gn-alone { transform-origin: 50% 50%; transform: scale( 1.2 ); opacity: .3; }
.fpm-gn-st { transform-origin: 50% 50%; animation: fpm-gn-brilla 2.4s ease-in-out infinite; }
.fpm-gn-st2 { animation-delay: -.8s; } .fpm-gn-st3 { animation-delay: -1.6s; }
@keyframes fpm-gn-brilla { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ---------- le cose che si vedono solo a volte ---------- */
.fpm-gn-chiusi, .fpm-gn-occhiali, .fpm-gn-natale, .fpm-gn-strega, .fpm-gn-notte,
.fpm-gn-zzz, .fpm-gn-cuori, .fpm-gn-topo, .fpm-gn-zampa, .fpm-gn-aura { opacity: 0; }

/* il calendario */
.fpm-gn-is-natale .fpm-gn-natale, .fpm-gn-is-strega .fpm-gn-strega, .fpm-gn-is-notte .fpm-gn-notte { opacity: 1; }

/* ---------- il «sto per partire»: fluttua sul posto ---------- */
.fpm-gn-is-prepara .fpm-gn-tutto { animation: fpm-gn-prepara 1.2s ease-in-out infinite; }
@keyframes fpm-gn-prepara { 0%, 100% { transform: translateY( 0 ) scale( 1 ); } 50% { transform: translateY( -9px ) scale( 1.05 ); } }
.fpm-gn-is-prepara .fpm-gn-coda { animation-duration: 1s; }

/* ---------- il saluto con la zampa ---------- */
.fpm-gn-is-saluta .fpm-gn-zampa { opacity: 1; transform-origin: 0% 100%; animation: fpm-gn-saluta .5s ease-in-out infinite alternate; }
@keyframes fpm-gn-saluta { to { transform: rotate( -24deg ); } }

/* ---------- 1. il giro della morte ---------- */
.fpm-gn-is-giro .fpm-gn-giro { transform-origin: 50% 60%; animation: fpm-gn-giro 1.1s cubic-bezier( .5, 0, .3, 1 ); }
@keyframes fpm-gn-giro {
	0% { transform: translate( 0, 0 ) rotate( 0 ); }
	25% { transform: translate( -14px, -22px ) rotate( -120deg ) scale( 1.05 ); }
	60% { transform: translate( 8px, -30px ) rotate( -270deg ) scale( 1.08 ); }
	100% { transform: translate( 0, 0 ) rotate( -360deg ); }
}

/* ---------- 2. la modalita' super ---------- */
.fpm-gn-is-super .fpm-gn-occhiali { opacity: 1; }
.fpm-gn-is-super .fpm-gn-natale, .fpm-gn-is-super .fpm-gn-strega, .fpm-gn-is-super .fpm-gn-notte { opacity: 0; }
.fpm-gn-is-super .fpm-gn-aura { opacity: 1; transform-origin: 50% 50%; animation: fpm-gn-aura-super 1.2s ease-in-out infinite; }
@keyframes fpm-gn-aura-super { 0%, 100% { transform: scale( 1.05 ); opacity: 1; } 50% { transform: scale( 1.2 ); opacity: .7; } }
.fpm-gn-is-super .fpm-gn-tutto { animation-duration: 2.3s; }

/* ---------- 4. il sonnellino ---------- */
.fpm-gn-is-dorme .fpm-gn-occhi { animation: none; transform: scaleY( .08 ); }
.fpm-gn-is-dorme .fpm-gn-alone { opacity: 0; }
.fpm-gn-is-dorme .fpm-gn-zzz { opacity: 1; }
.fpm-gn-is-dorme .fpm-gn-tutto { animation-duration: 8s; }
.fpm-gn-is-dorme .fpm-gn-testa { transform-origin: 50% 100%; transform: rotate( 8deg ) translateY( 2px ); transition: transform .6s; }
.fpm-gn-zzz text { transform-origin: 50% 50%; animation: fpm-gn-zeta 2.4s ease-out infinite; }
.fpm-gn-z2 { animation-delay: .8s !important; } .fpm-gn-z3 { animation-delay: 1.6s !important; }
@keyframes fpm-gn-zeta { 0% { opacity: 0; transform: translate( 0, 6px ) scale( .6 ); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate( 6px, -8px ) scale( 1.1 ); } }
.fpm-gn-is-salto .fpm-gn-giro { animation: fpm-gn-salto .6s cubic-bezier( .3, 1.6, .5, 1 ); }
@keyframes fpm-gn-salto { 40% { transform: translateY( -16px ) scale( 1.06, .96 ); } }

/* ---------- 5. miao: i cuori ---------- */
.fpm-gn-is-miao .fpm-gn-cuori { opacity: 1; }
.fpm-gn-is-miao .fpm-gn-cuori path { transform-origin: 50% 50%; animation: fpm-gn-cuore 1.6s ease-out both; }
.fpm-gn-c2 { animation-delay: .3s !important; }
@keyframes fpm-gn-cuore { 0% { opacity: 0; transform: translateY( 8px ) scale( .3 ); } 30% { opacity: 1; transform: translateY( 0 ) scale( 1.1 ); } 100% { opacity: 0; transform: translateY( -14px ) scale( .9 ); } }

/* ---------- 6. le fusa ---------- */
.fpm-gn-is-fusa .fpm-gn-giro { animation: fpm-gn-fusa .12s linear 14; }
@keyframes fpm-gn-fusa { 50% { transform: translateX( .6px ); } }
.fpm-gn-is-fusa .fpm-gn-occhi { animation: none; transform: scaleY( .08 ); }
.fpm-gn-is-fusa .fpm-gn-alone { opacity: 0; }
.fpm-gn-is-fusa .fpm-gn-cuori { opacity: 1; }

/* ---------- 7. il topolino, sulla luna ---------- */
.fpm-gn-is-topo .fpm-gn-topo { opacity: 1; animation: fpm-gn-topo 3.2s ease-in-out; }
@keyframes fpm-gn-topo {
	0% { transform: translate( 124px, 98px ) scaleX( -1 ); }
	45% { transform: translate( 30px, 98px ) scaleX( -1 ); }
	55% { transform: translate( 30px, 98px ) scaleX( 1 ); }
	100% { transform: translate( 140px, 98px ) scaleX( 1 ); }
}
.fpm-gn-is-topo .fpm-gn-sguardo { animation: fpm-gn-segui 3.2s ease-in-out; }
@keyframes fpm-gn-segui { 0%, 100% { transform: translateX( 2px ); } 45% { transform: translate( -2px, 1px ); } }
.fpm-gn-is-topo .fpm-gn-giro { animation: fpm-gn-salto .6s 1.4s cubic-bezier( .3, 1.6, .5, 1 ); }

/* ---------- le mosse spontanee, silenziose ---------- */
.fpm-gn-is-orecchio .fpm-gn-testa { transform-origin: 50% 100%; animation: fpm-gn-orecchio .35s ease-in-out 2; }
@keyframes fpm-gn-orecchio { 50% { transform: rotate( 4deg ); } }
.fpm-gn-is-guarda .fpm-gn-sguardo { animation: fpm-gn-guarda 2.4s ease-in-out; }
@keyframes fpm-gn-guarda { 20%, 40% { transform: translateX( -2.4px ); } 60%, 80% { transform: translateX( 2.4px ); } }
.fpm-gn-is-doppio .fpm-gn-occhi { animation: fpm-gn-doppio .9s; }
@keyframes fpm-gn-doppio { 0%, 30%, 60%, 100% { transform: scaleY( 1 ); } 15%, 45% { transform: scaleY( .1 ); } }

/* ---------- LA NUVOLETTA (4.48): grande, animata, con tre gocce ----------
   Il bordo a nuvola e' un SVG disegnato dal JavaScript (un arco ogni ~46 px)
   grande quanto il testo: il padding lascia posto ai lobi (circa 12 px). */
#fpm-gn-fumetto {
	position: fixed;
	z-index: 10001;
	width: max-content;
	max-width: min( 380px, calc( 100vw - 28px ) );
	color: #f1f5f9;
	font: 700 1.15rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	opacity: 0;
	transform: scale( .3 );
	transition: opacity .18s ease-out, transform .18s ease-in;
	pointer-events: none;
}
#fpm-gn-fumetto.fpm-gn-su {
	opacity: 1;
	transform: scale( 1 );
	transition: opacity .2s ease-out, transform .55s cubic-bezier( .3, 1.7, .5, 1 );
}
#fpm-gn-fumetto.fpm-gn-att.fpm-gn-su { pointer-events: auto; }
.fpm-gn-corpo {
	position: relative;
	padding: 30px 34px 28px;
	animation: fpm-gn-fluttua 3.8s ease-in-out infinite;
}
@keyframes fpm-gn-fluttua {
	0%, 100% { transform: translateY( 0 ) rotate( -.3deg ); }
	50% { transform: translateY( -3px ) rotate( .3deg ); }
}
.fpm-gn-att .fpm-gn-corpo:hover { animation-play-state: paused; }
.fpm-gn-nube { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.fpm-gn-nube path { fill: #0b1430; stroke: #22d3ee; stroke-width: 2.5; stroke-linejoin: round; }
.fpm-gn-testo, .fpm-gn-azioni { position: relative; z-index: 1; }
.fpm-gn-testo { cursor: default; }
.fpm-gn-testo span { opacity: 0; }
.fpm-gn-testo span.fpm-gn-v { opacity: 1; }
.fpm-gn-goccia {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	background: #0b1430;
	border: 2px solid #22d3ee;
	opacity: 0;
	transform: scale( 0 );
}
.fpm-gn-su .fpm-gn-goccia { animation: fpm-gn-goccia .5s cubic-bezier( .3, 1.7, .5, 1 ) both, fpm-gn-goccia-su 2.6s ease-in-out .8s infinite; }
@keyframes fpm-gn-goccia { to { opacity: 1; transform: scale( 1 ); } }
@keyframes fpm-gn-goccia-su { 50% { transform: scale( 1.15 ); } }

/* i pulsanti arrivano DOPO il testo, uno alla volta */
.fpm-gn-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.fpm-gn-azioni > * {
	opacity: 0;
	transform: translateY( 10px ) scale( .9 );
	transition: opacity .3s, transform .4s cubic-bezier( .3, 1.6, .5, 1 );
}
.fpm-gn-fatto .fpm-gn-azioni > * { opacity: 1; transform: none; }
.fpm-gn-fatto .fpm-gn-azioni > :nth-child( 2 ) { transition-delay: .12s; }
.fpm-gn-fatto .fpm-gn-azioni > :nth-child( 3 ) { transition-delay: .24s; }
.fpm-gn-fatto .fpm-gn-azioni > :nth-child( 4 ) { transition-delay: .36s; }
.fpm-gn-azioni a, .fpm-gn-azioni button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 0;
	border-radius: 999px;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* IL PULSANTE GRANDE: CONTINUA, e le scelte «studente / docente», «Guidami!» */
.fpm-gn-azioni .fpm-gn-pri {
	flex: 1 1 100%;
	min-height: 56px;
	padding: 12px 22px;
	background: linear-gradient( 90deg, #22d3ee, #6366f1 );
	color: #04121f;
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 0 0 0 rgba( 34, 211, 238, .55 );
}
.fpm-gn-fatto .fpm-gn-azioni .fpm-gn-pri { animation: fpm-gn-batte 1.7s ease-in-out .6s infinite; }
@keyframes fpm-gn-batte {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 34, 211, 238, .55 ); }
	60% { box-shadow: 0 0 0 12px rgba( 34, 211, 238, 0 ); }
}
/* i pulsanti piccoli: chiari ma non gridano */
.fpm-gn-azioni .fpm-gn-sec {
	min-height: 44px;
	padding: 8px 18px;
	background: transparent;
	border: 2px solid #38bdf8;
	color: #bae6fd;
	font-size: 1rem;
	font-weight: 700;
}
.fpm-gn-azioni .fpm-gn-x {
	width: 44px;
	min-height: 44px;
	margin-left: auto;
	padding: 0;
	background: #1b2a5c;
	color: #dbeafe;
	font-size: 1.1rem;
	font-weight: 700;
}



/* 4.51.6/7: LA NUVOLA MAGICA di vetro: scura, morbida, con brillantini.
   (Niente `filter` sul contenitore: bloccherebbe la sfocatura; l'ombra sta sul disegno.) */
.fpm-gn-vetro { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.fpm-gn-testo { text-shadow: 0 1px 3px rgba( 2, 8, 24, .75 ); }
.fpm-gn-goccia { background: rgba( 226, 240, 255, .22 ); border: 2px solid rgba( 241, 245, 249, .85 ); -webkit-backdrop-filter: blur( 8px ); backdrop-filter: blur( 8px ); }

/* 4.51.7: LA NUVOLA MAGICA — piu' scura, piu' morbida, con brillantini */
.fpm-gn-vetro {
	background: linear-gradient( 165deg, rgba( 30, 41, 99, .5 ), rgba( 5, 9, 26, .78 ) 55%, rgba( 46, 24, 96, .62 ) );
	-webkit-backdrop-filter: blur( 16px ) saturate( 1.6 ); backdrop-filter: blur( 16px ) saturate( 1.6 );
}
.fpm-gn-nube { filter: drop-shadow( 0 0 10px rgba( 129, 170, 255, .35 ) ) drop-shadow( 0 12px 20px rgba( 2, 6, 23, .6 ) ); }
.fpm-gn-nube path { fill: rgba( 255, 255, 255, .02 ); stroke: rgba( 226, 236, 255, .8 ); stroke-width: 2; }
.fpm-gn-su .fpm-gn-nube { animation: fpm-gn-alone 4.6s ease-in-out infinite; }
@keyframes fpm-gn-alone { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.fpm-gn-brill { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.fpm-gn-brill span {
	position: absolute; display: block; margin: -6px 0 0 -6px; filter: drop-shadow( 0 0 4px rgba( 186, 230, 253, .9 ) );
	background: #fff; opacity: 0; transform: scale( 0 ) rotate( 0deg );
	clip-path: polygon( 50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39% );
	animation: fpm-gn-brilla 3s ease-in-out infinite;
}
.fpm-gn-brill span.fpm-gn-brill-lil { background: #c4b5fd; }
@keyframes fpm-gn-brilla {
	0%, 100% { opacity: 0; transform: scale( 0 ) rotate( 0deg ); }
	45% { opacity: 1; transform: scale( 1 ) rotate( 45deg ); }
	70% { opacity: .55; transform: scale( .6 ) rotate( 90deg ); }
}
@media ( prefers-reduced-motion: reduce ) { .fpm-gn-brill { display: none; } .fpm-gn-su .fpm-gn-nube { animation: none; } }

/* 4.78.2: LA NUVOLETTA PIU' VETRO (frap, 5 ott 2026): trasparente, con il bordo blu piu' scuro.
   Solo l'aspetto: il gatto, le frasi e i movimenti non cambiano. */
.fpm-gn-vetro {
	background: linear-gradient( 165deg, rgba( 60, 90, 190, .24 ), rgba( 8, 18, 52, .4 ) 55%, rgba( 70, 50, 170, .24 ) );
	-webkit-backdrop-filter: blur( 10px ) saturate( 1.4 ); backdrop-filter: blur( 10px ) saturate( 1.4 );
}
.fpm-gn-nube { filter: drop-shadow( 0 0 8px rgba( 37, 99, 235, .45 ) ) drop-shadow( 0 10px 18px rgba( 2, 6, 23, .45 ) ); }
.fpm-gn-nube path { fill: rgba( 255, 255, 255, .02 ); stroke: #1d4ed8; stroke-width: 2.6; }
.fpm-gn-goccia { background: rgba( 120, 160, 255, .2 ); border: 2px solid #1d4ed8; }
.fpm-gn-testo { text-shadow: 0 1px 2px rgba( 2, 8, 24, .95 ), 0 0 10px rgba( 2, 8, 24, .8 ); }
/* ---------- «Gatto in silenzio» (frap, 6 ott) ---------- */
/* scuote la testa e si schiaccia come chi si tappa la bocca; poi, quando lo richiami, salta */
.fpm-gn-is-zitto svg { animation: fpm-gn-zitto 1.5s ease-in-out both; transform-origin: 50% 60%; }
@keyframes fpm-gn-zitto {
	0% { rotate: 0deg; scale: 1; } 10% { rotate: -9deg; scale: 1.14 .86; } 24% { rotate: 8deg; scale: .9 1.1; }
	38% { rotate: -7deg; scale: 1.08 .92; } 54% { rotate: 6deg; scale: 1; } 70% { rotate: -3deg; } 100% { rotate: 0deg; scale: 1; }
}
.fpm-gn-is-parla svg { animation: fpm-gn-parla 1.1s cubic-bezier( .3, 1.6, .5, 1 ) both; }
@keyframes fpm-gn-parla { 0% { translate: 0 0; scale: 1; } 30% { translate: 0 -14px; scale: .94 1.12; } 60% { translate: 0 0; scale: 1.1 .9; } 100% { translate: 0 0; scale: 1; } }
.fpm-gn-zip { position: fixed; z-index: 100000; pointer-events: none; font-size: 2.1rem; line-height: 1; margin: -1.05rem 0 0 -1.05rem; filter: drop-shadow( 0 2px 6px rgba( 30, 58, 138, .55 ) ); animation: fpm-gn-zip 2.2s ease-out both; }
@keyframes fpm-gn-zip { 0% { opacity: 0; transform: scale( .2 ) rotate( -30deg ); } 14% { opacity: 1; transform: scale( 1.35 ) rotate( 10deg ); } 26% { transform: scale( 1 ) rotate( -6deg ); } 78% { opacity: 1; transform: translateY( -14px ) rotate( 4deg ); } 100% { opacity: 0; transform: translateY( -34px ) scale( .9 ); } }
@media ( prefers-reduced-motion: reduce ) { .fpm-gn-is-zitto svg, .fpm-gn-is-parla svg, .fpm-gn-zip { animation: none; } .fpm-gn-zip { opacity: 1; } }


/* ================= FP MAPS TOP: pagina a tutto schermo + il Prof Meow ================= */
body.fpm-pagina { overflow: hidden !important; }
body.fpm-pagina #fpmaps {
	position: fixed; inset: 0; z-index: 99000; margin: 0; border-radius: 0; padding: 0;
	overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
body.admin-bar.fpm-pagina #fpmaps { top: 32px; }
@media ( max-width: 782px ) { body.admin-bar.fpm-pagina #fpmaps { top: 46px; } }
body.fpm-pagina #fpmaps .app { position: relative; z-index: 1; max-width: 1040px; padding: 1rem 1rem 9rem; }
@media ( min-width: 900px ) { body.fpm-pagina #fpmaps .app { padding: 1.4rem 1.6rem 9rem; } }

/* la barra in alto: torna al sito, titolo, meno effetti */
#fpmaps .fpm-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; background: var(--surface); border-bottom: 1px solid var(--line); }
#fpmaps .fpm-top strong { flex: 1; text-align: center; font-size: 1rem; letter-spacing: .08em; color: var(--ink); }
#fpmaps .fpm-top a, #fpmaps .fpm-top button { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font: 700 .85rem/1.1 inherit; font-family: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
#fpmaps .fpm-top button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
@media ( max-width: 400px ) { #fpmaps .fpm-top { justify-content: space-between; } #fpmaps .fpm-top strong { display: none; } }
@media ( max-width: 520px ) { #fpmaps .fpm-top strong { font-size: .8rem; } #fpmaps .fpm-top a, #fpmaps .fpm-top button { padding: .3rem .6rem; font-size: .78rem; } }

/* lo sfondo leggero */
#fpmaps .fpm-sf { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
body.admin-bar #fpmaps .fpm-sf { top: 32px; height: calc( 100% - 32px ); }

/* il gatto */
#fpmaps .fpm-dock { position: fixed; right: .8rem; bottom: .8rem; z-index: 99990; display: flex; flex-direction: column; align-items: center; }
#fpmaps .fpm-gatto { display: block; width: 104px; height: 104px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#fpmaps .fpm-gatto svg { display: block; width: 100%; height: 100%; overflow: visible; }
#fpmaps .fpm-hint { margin-top: -.2rem; padding: .25rem .75rem; border-radius: 999px; border: 1.5px solid #22d3ee; background: rgba( 8, 16, 44, .92 ); color: #e0f7ff; font: 700 .8rem/1.2 system-ui, sans-serif; white-space: nowrap; }
@media ( max-width: 520px ) { #fpmaps .fpm-gatto { width: 92px; height: 92px; } }

/* il menu del Prof: domande veloci e spiegazioni, a passi */
#fpmaps .fpm-menu { position: fixed; right: .8rem; bottom: 8.6rem; z-index: 99989; width: min( 94vw, 410px ); max-height: calc( 100vh - 11rem ); max-height: calc( 100dvh - 11rem ); overflow: auto; background: #08102c; color: #eaf2ff; border: 2px solid #22d3ee; border-radius: 22px; box-shadow: 0 14px 40px rgba( 2, 6, 23, .5 ); font: 600 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
#fpmaps .fpm-mh { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; background: #08102c; border-bottom: 1px solid rgba( 34, 211, 238, .35 ); }
#fpmaps .fpm-mh b { font-size: 1.05rem; color: #7dd3fc; }
#fpmaps .fpm-mb { display: flex; flex-direction: column; gap: .55rem; padding: .8rem .9rem 1rem; }
#fpmaps .fpm-mb p { margin: 0; color: #eaf2ff; }
#fpmaps .fpm-mb .fpm-sec { margin-top: .3rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #93c5fd; }
#fpmaps .fpm-mb .meta { color: #93c5fd; }
#fpmaps .fpm-mb .note { color: #cfe3ff; background: rgba( 56, 189, 248, .1 ); border: 1px solid rgba( 56, 189, 248, .35 ); border-radius: 12px; padding: .5rem .7rem; }
#fpmaps .fpm-q, #fpmaps .fpm-x { display: block; width: 100%; min-height: 46px; padding: .55rem .9rem; border-radius: 14px; border: 1.5px solid rgba( 56, 189, 248, .55 ); background: rgba( 56, 189, 248, .08 ); color: #e0f2fe; font: 700 .95rem/1.3 inherit; font-family: inherit; text-align: left; cursor: pointer; }
#fpmaps .fpm-q:hover, #fpmaps .fpm-q:focus-visible { background: rgba( 56, 189, 248, .22 ); }
#fpmaps .fpm-q.ctx { border-color: #fde68a; background: rgba( 253, 230, 138, .1 ); color: #fef3c7; }
#fpmaps .fpm-q.go { background: linear-gradient( 90deg, #22d3ee, #6366f1 ); color: #04121f; border: 0; text-align: center; font-weight: 900; }
#fpmaps .fpm-q.quiet { background: transparent; border-style: dashed; font-weight: 600; font-size: .88rem; }
#fpmaps .fpm-x { width: 42px; min-height: 42px; padding: 0; text-align: center; background: #1b2a5c; border: 0; border-radius: 50%; }
#fpmaps .fpm-row { display: flex; gap: .5rem; }
#fpmaps .fpm-row .fpm-q { text-align: center; }
#fpmaps .fpm-mb select { width: 100%; min-height: 46px; border-radius: 14px; background: #0b1430; color: #eaf2ff; border: 1.5px solid rgba( 56, 189, 248, .55 ); padding: .4rem .6rem; font: inherit; }

/* la nuvoletta, i puffi e la cerniera stanno nel body: sopra alla pagina a tutto schermo */
#fpm-gn-fumetto { z-index: 100050; }
.fpm-gn-scia { z-index: 100040; }

/* meno effetti / meno movimento: gatto fermo, niente sfondo, niente sfocature */
#fpmaps.fpm-calmo .fpm-gatto, #fpmaps.fpm-calmo .fpm-gatto * { animation: none !important; transition: none !important; }
#fpmaps.fpm-calmo .fpm-sf { display: none; }
@media ( prefers-reduced-motion: reduce ) {
	#fpmaps .fpm-gatto, #fpmaps .fpm-gatto * { animation: none !important; transition: none !important; }
	#fpmaps .fpm-sf { display: none; }
}
@media print { body.fpm-pagina { overflow: visible !important; } body.fpm-pagina #fpmaps { position: static; overflow: visible; } #fpmaps .fpm-dock, #fpmaps .fpm-menu, #fpmaps .fpm-top, #fpmaps .fpm-sf { display: none !important; } }

/* difese contro i pulsanti del tema (colori e forme restano quelli delle mappe) */
#fpmaps .fpm-gatto, #fpmaps .fpm-gatto:hover, #fpmaps .fpm-gatto:focus { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 50% !important; padding: 0 !important; }
#fpmaps .fpm-q, #fpmaps .fpm-q:hover { background: rgba( 56, 189, 248, .08 ) !important; color: #e0f2fe !important; border: 1.5px solid rgba( 56, 189, 248, .55 ) !important; border-radius: 14px !important; text-transform: none !important; letter-spacing: normal !important; }
#fpmaps .fpm-q:hover, #fpmaps .fpm-q:focus-visible { background: rgba( 56, 189, 248, .22 ) !important; }
#fpmaps .fpm-q.ctx { background: rgba( 253, 230, 138, .1 ) !important; color: #fef3c7 !important; border-color: #fde68a !important; }
#fpmaps .fpm-q.go { background: linear-gradient( 90deg, #22d3ee, #6366f1 ) !important; color: #04121f !important; border: 0 !important; }
#fpmaps .fpm-q.quiet { background: transparent !important; border-style: dashed !important; }
#fpmaps .fpm-x, #fpmaps .fpm-x:hover { background: #1b2a5c !important; color: #e0f2fe !important; border: 0 !important; border-radius: 50% !important; }
#fpmaps .fpm-top a, #fpmaps .fpm-top button { background: transparent !important; color: var(--accent) !important; border: 1.5px solid var(--accent) !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: normal !important; }
#fpmaps .fpm-top button[aria-pressed="true"] { background: var(--accent) !important; color: var(--accent-ink) !important; }

/* la barra dei livelli resta in vista, sotto la barra in alto */
#fpmaps .supbar { top: 62px; }
#fpmaps .app { scroll-margin-top: 62px; }
#fpmaps h1, #fpmaps h2, #fpmaps input, #fpmaps textarea, #fpmaps select { scroll-margin-top: 76px; }