/*
 * FP English — il gatto nero-blu sulla luna (4.48.0) e la domanda nel menu.
 *
 * Solo spostamenti, rotazioni e trasparenze: niente sfocature animate,
 * niente ombre che cambiano, niente che costringa il telefono a
 * ridisegnare la pagina. Tutte le classi cominciano con `fpe-gn-`, cosi'
 * non si scontrano con quelle di FP Home Manager (`fp-cat-...`).
 * Il volo usa `translate` (non `transform`: quello e' di FP Home Manager).
 */

/* ---------- il pulsante resta quello di FP Home Manager ---------- */
#fp-cat-btn.fpe-gn-on svg { overflow: visible; }
#fp-cat-btn.fpe-gn-on .fpe-gn * { transform-box: fill-box; }
#fp-cat-btn.fpe-gn-on .fpe-gn { transition: transform 1s ease-in-out; }

/* ---------- le animazioni sempre accese, lente ---------- */
.fpe-gn-tutto { transform-origin: 50% 70%; animation: fpe-gn-vola 4.6s ease-in-out infinite; }
@keyframes fpe-gn-vola {
	0%, 100% { transform: translateY( 0 ) rotate( -1deg ); }
	50% { transform: translateY( -5px ) rotate( 1deg ); }
}
/* il vapore: solo transform e opacity */
.fpe-gn-lunaa { transform-origin: 50% 50%; }
.fpe-gn-vapore { animation: fpe-gn-scorri 9s linear infinite; }
@keyframes fpe-gn-scorri { 0%, 100% { transform: translateX( -3px ); } 50% { transform: translateX( 3px ); } }
.fpe-gn-vp { transform-box: fill-box; transform-origin: 50% 50%; animation: fpe-gn-resp 6s ease-in-out infinite; }
.fpe-gn-q1, .fpe-gn-p1 { animation-delay: -1.5s; } .fpe-gn-q2, .fpe-gn-p2 { animation-delay: -3s; } .fpe-gn-q3, .fpe-gn-p3 { animation-delay: -4.5s; }
@keyframes fpe-gn-resp { 0%, 100% { transform: scale( .92 ) translate( 0, 1.5px ); opacity: .85; } 50% { transform: scale( 1.16 ) translate( 1.5px, -2px ); opacity: 1; } }
.fpe-gn-vg { animation: fpe-gn-lucc 2.8s ease-in-out infinite; }
.fpe-gn-g1 { animation-delay: -.5s; } .fpe-gn-g2 { animation-delay: -1s; } .fpe-gn-g3 { animation-delay: -1.5s; } .fpe-gn-g4 { animation-delay: -2s; }
@keyframes fpe-gn-lucc { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }
.fpe-gn-vs { transform-box: fill-box; transform-origin: 50% 50%; animation: fpe-gn-stella 3.4s ease-in-out infinite; }
.fpe-gn-s1 { animation-delay: -.6s; } .fpe-gn-s2 { animation-delay: -1.2s; } .fpe-gn-s3 { animation-delay: -1.8s; } .fpe-gn-s4 { animation-delay: -2.4s; } .fpe-gn-s5 { animation-delay: -3s; }
@keyframes fpe-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 ); } }
.fpe-gn-vb, .fpe-gn-vo, .fpe-gn-vr { transition: opacity 1s; }
.fpe-gn-vo, .fpe-gn-vr { opacity: 0; }
.fpe-gn-is-super .fpe-gn-vo { opacity: 1; }
.fpe-gn-is-super .fpe-gn-vb { opacity: .25; }
.fpe-gn-is-fusa .fpe-gn-vr { opacity: 1; }
.fpe-gn-is-dorme .fpe-gn-vapore { opacity: .5; animation-duration: 16s; }
/* gli sbuffi di partenza, arrivo e fumetto */
.fpe-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: fpe-gn-sbuffo 1.1s ease-out both; }
.fpe-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 fpe-gn-sbuffo { from { opacity: .95; transform: scale( .4 ); } to { opacity: 0; transform: scale( 2.4 ) translateY( -14px ); } }
#fp-cat-btn.fpe-gn-on svg { transition: scale .22s ease-out; }
@keyframes fpe-gn-luce { 50% { opacity: .6; } }
.fpe-gn-coda { transform-origin: 0% 100%; animation: fpe-gn-coda 3s ease-in-out infinite; }
@keyframes fpe-gn-coda { 50% { transform: rotate( 10deg ); } }
.fpe-gn-occhi { transform-origin: 50% 50%; animation: fpe-gn-batti 5s infinite; }
@keyframes fpe-gn-batti { 0%, 92%, 100% { transform: scaleY( 1 ); } 95% { transform: scaleY( .1 ); } }
.fpe-gn-sguardo { transition: transform .25s ease-out; }
.fpe-gn-alone { transform-origin: 50% 50%; transform: scale( 1.2 ); opacity: .3; }
.fpe-gn-st { transform-origin: 50% 50%; animation: fpe-gn-brilla 2.4s ease-in-out infinite; }
.fpe-gn-st2 { animation-delay: -.8s; } .fpe-gn-st3 { animation-delay: -1.6s; }
@keyframes fpe-gn-brilla { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

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

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

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

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

/* ---------- 1. il giro della morte ---------- */
.fpe-gn-is-giro .fpe-gn-giro { transform-origin: 50% 60%; animation: fpe-gn-giro 1.1s cubic-bezier( .5, 0, .3, 1 ); }
@keyframes fpe-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 ---------- */
.fpe-gn-is-super .fpe-gn-occhiali { opacity: 1; }
.fpe-gn-is-super .fpe-gn-natale, .fpe-gn-is-super .fpe-gn-strega, .fpe-gn-is-super .fpe-gn-notte { opacity: 0; }
.fpe-gn-is-super .fpe-gn-aura { opacity: 1; transform-origin: 50% 50%; animation: fpe-gn-aura-super 1.2s ease-in-out infinite; }
@keyframes fpe-gn-aura-super { 0%, 100% { transform: scale( 1.05 ); opacity: 1; } 50% { transform: scale( 1.2 ); opacity: .7; } }
.fpe-gn-is-super .fpe-gn-tutto { animation-duration: 2.3s; }

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

/* ---------- 5. miao: i cuori ---------- */
.fpe-gn-is-miao .fpe-gn-cuori { opacity: 1; }
.fpe-gn-is-miao .fpe-gn-cuori path { transform-origin: 50% 50%; animation: fpe-gn-cuore 1.6s ease-out both; }
.fpe-gn-c2 { animation-delay: .3s !important; }
@keyframes fpe-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 ---------- */
.fpe-gn-is-fusa .fpe-gn-giro { animation: fpe-gn-fusa .12s linear 14; }
@keyframes fpe-gn-fusa { 50% { transform: translateX( .6px ); } }
.fpe-gn-is-fusa .fpe-gn-occhi { animation: none; transform: scaleY( .08 ); }
.fpe-gn-is-fusa .fpe-gn-alone { opacity: 0; }
.fpe-gn-is-fusa .fpe-gn-cuori { opacity: 1; }

/* ---------- 7. il topolino, sulla luna ---------- */
.fpe-gn-is-topo .fpe-gn-topo { opacity: 1; animation: fpe-gn-topo 3.2s ease-in-out; }
@keyframes fpe-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 ); }
}
.fpe-gn-is-topo .fpe-gn-sguardo { animation: fpe-gn-segui 3.2s ease-in-out; }
@keyframes fpe-gn-segui { 0%, 100% { transform: translateX( 2px ); } 45% { transform: translate( -2px, 1px ); } }
.fpe-gn-is-topo .fpe-gn-giro { animation: fpe-gn-salto .6s 1.4s cubic-bezier( .3, 1.6, .5, 1 ); }

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

/* ---------- quando e' in volo: via da casa, cosi' il fumetto di FP Home Manager non resta solo ---------- */
#fp-cat-btn.fpe-gn-via { will-change: translate; }

/* ---------- la guida: la parte illuminata ---------- */
.fpe-gn-lit {
	outline: 3px solid #22d3ee;
	outline-offset: 6px;
	border-radius: 10px;
	box-shadow: 0 0 0 8px rgba( 34, 211, 238, .16 );
	transition: outline-color .3s, box-shadow .3s;
}

/* ---------- 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). */
#fpe-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;
}
#fpe-gn-fumetto.fpe-gn-su {
	opacity: 1;
	transform: scale( 1 );
	transition: opacity .2s ease-out, transform .55s cubic-bezier( .3, 1.7, .5, 1 );
}
#fpe-gn-fumetto.fpe-gn-att.fpe-gn-su { pointer-events: auto; }
.fpe-gn-corpo {
	position: relative;
	padding: 30px 34px 28px;
	animation: fpe-gn-fluttua 3.8s ease-in-out infinite;
}
@keyframes fpe-gn-fluttua {
	0%, 100% { transform: translateY( 0 ) rotate( -.3deg ); }
	50% { transform: translateY( -3px ) rotate( .3deg ); }
}
.fpe-gn-att .fpe-gn-corpo:hover { animation-play-state: paused; }
.fpe-gn-nube { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.fpe-gn-nube path { fill: #0b1430; stroke: #22d3ee; stroke-width: 2.5; stroke-linejoin: round; }
.fpe-gn-testo, .fpe-gn-azioni { position: relative; z-index: 1; }
.fpe-gn-testo { cursor: default; }
.fpe-gn-testo span { opacity: 0; }
.fpe-gn-testo span.fpe-gn-v { opacity: 1; }
.fpe-gn-goccia {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	background: #0b1430;
	border: 2px solid #22d3ee;
	opacity: 0;
	transform: scale( 0 );
}
.fpe-gn-su .fpe-gn-goccia { animation: fpe-gn-goccia .5s cubic-bezier( .3, 1.7, .5, 1 ) both, fpe-gn-goccia-su 2.6s ease-in-out .8s infinite; }
@keyframes fpe-gn-goccia { to { opacity: 1; transform: scale( 1 ); } }
@keyframes fpe-gn-goccia-su { 50% { transform: scale( 1.15 ); } }

/* i pulsanti arrivano DOPO il testo, uno alla volta */
.fpe-gn-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.fpe-gn-azioni > * {
	opacity: 0;
	transform: translateY( 10px ) scale( .9 );
	transition: opacity .3s, transform .4s cubic-bezier( .3, 1.6, .5, 1 );
}
.fpe-gn-fatto .fpe-gn-azioni > * { opacity: 1; transform: none; }
.fpe-gn-fatto .fpe-gn-azioni > :nth-child( 2 ) { transition-delay: .12s; }
.fpe-gn-fatto .fpe-gn-azioni > :nth-child( 3 ) { transition-delay: .24s; }
.fpe-gn-fatto .fpe-gn-azioni > :nth-child( 4 ) { transition-delay: .36s; }
.fpe-gn-azioni a, .fpe-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!» */
.fpe-gn-azioni .fpe-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 );
}
.fpe-gn-fatto .fpe-gn-azioni .fpe-gn-pri { animation: fpe-gn-batte 1.7s ease-in-out .6s infinite; }
@keyframes fpe-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 */
.fpe-gn-azioni .fpe-gn-sec {
	min-height: 44px;
	padding: 8px 18px;
	background: transparent;
	border: 2px solid #38bdf8;
	color: #bae6fd;
	font-size: 1rem;
	font-weight: 700;
}
.fpe-gn-azioni .fpe-gn-x {
	width: 44px;
	min-height: 44px;
	margin-left: auto;
	padding: 0;
	background: #1b2a5c;
	color: #dbeafe;
	font-size: 1.1rem;
	font-weight: 700;
}

/* ---------- su telefono: piu' grande ancora, e il gatto e' quasi il doppio ---------- */
@media ( max-width: 768px ) {
	#fpe-gn-fumetto { max-width: calc( 100vw - 28px ); font-size: 1.25rem; }
	.fpe-gn-corpo { padding: 28px 30px 26px; }
	#fp-cat-btn.fpe-gn-on { width: 120px !important; height: 120px !important; }
	#fp-cat-btn.fpe-gn-on svg { width: 100%; height: 100%; }
	/* la scritta fissa di FP Home Manager (bottom: 90px) finirebbe sopra al gatto grande, che in sede vaga fino a ~54 px piu' su */
	#fp-cat-hint { bottom: 220px !important; }
}

/* ---------- chi ha chiesto meno movimento: il gatto sta fermo ---------- */
@media ( prefers-reduced-motion: reduce ) {
	#fp-cat-btn.fpe-gn-on .fpe-gn *, #fp-cat-btn.fpe-gn-on .fpe-gn { animation: none !important; transition: none !important; }
	#fpe-gn-fumetto { transition: none; }
	.fpe-gn-corpo, .fpe-gn-goccia, .fpe-gn-azioni .fpe-gn-pri { animation: none !important; }
	.fpe-gn-goccia { opacity: 1; transform: none; }
	.fpe-gn-azioni > * { transition: none; opacity: 1; transform: none; }
	.fpe-gn-lit { transition: none; }
	.fpe-gn-scia { display: none; }
}

/* ---------- la domanda in cima al menu del gatto (di GPT 6) ---------- */
.fp-cat-menu .fpe-guida-invito {
	margin: 0 0 8px;
	padding: 14px;
	border: 1px solid rgba(125,211,252,.32);
	border-radius: 15px;
	background: linear-gradient( 135deg, rgba(56,189,248,.12), rgba(192,132,252,.08) );
}
.fp-cat-menu .fpe-guida-domanda-menu { margin: 0 0 8px; color: #fff; font-size: 1rem; font-weight: 850; }
.fp-cat-menu a.fpe-guida-menu-scelta {
	display: block;
	min-height: 46px;
	margin-top: 6px;
	padding: 11px 12px;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 10px;
	background: rgba(255,255,255,.055);
	color: #f8fafc;
	font-size: 1rem;
}
.fp-cat-menu a.fpe-guida-menu-scelta:hover { background: rgba(56,189,248,.16); color: #fff; }
/* la Galassia: stessa famiglia di Docente/Studente, con titolo e riga sotto */
.fp-cat-menu a.fpe-guida-menu-galassia { border-color: rgba(192,132,252,.45); background: linear-gradient( 135deg, rgba(56,189,248,.14), rgba(192,132,252,.16) ); }
.fp-cat-menu a.fpe-guida-menu-galassia strong { display: block; color: #fff; font-size: 1rem; font-weight: 850; letter-spacing: .04em; }
.fp-cat-menu a.fpe-guida-menu-galassia small { display: block; margin-top: 3px; color: #cbd5e1; font-size: .8rem; font-weight: 500; line-height: 1.35; }
.fp-cat-menu a.fpe-guida-menu-completa {
	display: inline-block;
	margin: 8px 0 0;
	padding: 4px 2px;
	color: #7dd3fc;
	font-size: .88rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fp-cat-hint.fpe-guida-hint-nascosto { display: none !important; }
.fp-cat-menu button.fpe-guida-menu-tour {
	display: block;
	margin: 6px 0 0;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: #7dd3fc;
	font: inherit;
	font-size: .88rem;
	text-align: left;
	cursor: pointer;
}


/* ---------- il menu del gatto non si taglia e si apre SOPRA il gatto (frap, 29 set) ----------
   Desktop: era piu' alto dello schermo e la parte in alto restava tagliata → ora scorre dentro di se'.
   Telefono: prima era un foglio che saliva dal basso e nascondeva il gatto; ora si apre sopra di lui. */
.fp-cat-menu { max-height: calc( 100vh - 206px ); max-height: calc( 100dvh - 206px ); overflow-y: auto; overscroll-behavior: contain; }
@media ( max-width: 768px ) {
	body #fp-cat-menu.fp-cat-menu {
		left: auto; right: 12px; bottom: 148px;
		width: min( 340px, calc( 100vw - 24px ) );
		max-height: calc( 100vh - 164px ); max-height: calc( 100dvh - 164px );
		padding: 14px 14px 16px;
		border: 1px solid var( --fp-accent, #22d3ee ) !important;
		border-radius: 20px;
		transform: translateY( 16px ) scale( .94 ); transform-origin: 88% 100%;
	}
	body #fp-cat-menu.fp-cat-menu.fp-open { transform: none; }
	body #fp-cat-menu .fp-sheet-handle { display: none; }
	body.fp-sheet-open #fp-cat-btn { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}

/* il gatto preso in mano: niente selezione, cursore che afferra */
#fp-cat-btn.fpe-gn-on { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#fp-cat-btn.fpe-gn-preso { cursor: grabbing; }

/* ---------- la parola del giorno sparisce quando parte la guida (frap, 29 set) ---------- */
body.fpe-gn-guida #fp-wotd { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .3s, visibility 0s .3s; }
body.fpe-gn-mega-aperto #fp-cat-btn { pointer-events: none; }

/* ---------- IL MEGA POPUP dei 10 secondi ---------- */
#fpe-gn-mega {
	position: fixed; inset: 0; z-index: 9996;
	display: flex; align-items: center; justify-content: center;
	padding: calc( var( --gn-gatto, 120px ) * .75 + 12px ) 14px 14px;
	background: rgba( 2, 6, 16, .78 );
	opacity: 0; transition: opacity .35s; overflow-y: auto;
}
#fpe-gn-mega.fpe-gn-mega-su { opacity: 1; }
.fpe-gn-mega-card {
	position: relative; overflow: hidden;
	width: min( 580px, 100% ); padding: 44px 20px 22px; text-align: center;
	border: 2px solid #22d3ee; border-radius: 30px; color: #f1f5f9;
	background: radial-gradient( 120% 90% at 20% 0, #16307a, #0a1026 62% );
	box-shadow: 0 26px 70px rgba( 0, 0, 0, .75 ), 0 0 34px rgba( 34, 211, 238, .3 );
	opacity: 0; transform: scale( .55 ) translateY( -20px ); transform-origin: 50% 0;
	transition: transform .6s cubic-bezier( .2, 1.35, .4, 1 ), opacity .3s;
}
#fpe-gn-mega.fpe-gn-mega-su .fpe-gn-mega-card { opacity: 1; transform: none; }
.fpe-gn-mega-vapore {
	position: absolute; left: -10%; right: -10%; bottom: -34px; height: 96px; pointer-events: none;
	background: radial-gradient( 46px 32px at 10% 60%, rgba( 56, 189, 248, .5 ), transparent ), radial-gradient( 60px 38px at 36% 70%, rgba( 29, 78, 216, .6 ), transparent ), radial-gradient( 66px 40px at 64% 66%, rgba( 56, 189, 248, .45 ), transparent ), radial-gradient( 50px 34px at 90% 62%, rgba( 99, 102, 241, .55 ), transparent );
	animation: fpe-gn-mega-respira 6s ease-in-out infinite;
}
@keyframes fpe-gn-mega-respira { 0%, 100% { transform: translateX( -6px ); opacity: .8; } 50% { transform: translateX( 6px ); opacity: 1; } }
.fpe-gn-mega-card > * { position: relative; }
.fpe-gn-mega-card > .fpe-gn-mega-vapore { position: absolute; }
.fpe-gn-mega-x {
	position: absolute !important; top: 8px; right: 10px; width: 34px; height: 34px;
	border: 0; border-radius: 50%; background: rgba( 255, 255, 255, .1 ); color: #cbd5e1;
	font-size: .85rem; line-height: 1; cursor: pointer; opacity: .8;
}
.fpe-gn-mega-chi { margin: 0; font-size: clamp( 1.7rem, 6vw, 2.2rem ); font-weight: 900; line-height: 1.1; color: #fff; }
.fpe-gn-mega-sotto { margin: 6px 0 16px; color: #bae6fd; font-size: 1rem; }
.fpe-gn-mega-ruoli { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.fpe-gn-mega-ruoli button {
	min-height: 92px; border: 0; border-radius: 22px; cursor: pointer;
	font: inherit; font-size: clamp( 1.1rem, 5vw, 1.55rem ); font-weight: 900; line-height: 1.1;
	text-transform: uppercase; letter-spacing: .02em; color: #06111f;
	transition: transform .15s;
}
.fpe-gn-mega-ruoli button:hover, .fpe-gn-mega-ruoli button:focus-visible { transform: translateY( -3px ) scale( 1.03 ); }
/* i colori del sito: azzurro (#22d3ee, #38bdf8), indaco (#6366f1) e viola (#c084fc), gli stessi del pulsante «Studenti delle Superiori» */
.fpe-gn-mega-doc { background: linear-gradient( 135deg, var( --fp-accent-2, #c084fc ), #818cf8 ); box-shadow: 0 0 22px rgba( 129, 140, 248, .5 ); }
.fpe-gn-mega-stu { background: linear-gradient( 135deg, #22d3ee, var( --fp-accent, #38bdf8 ) ); box-shadow: 0 0 22px rgba( 56, 189, 248, .5 ); }
.fpe-gn-mega-tour {
	display: block; width: 100%; min-height: clamp( 100px, 17vh, 140px ); padding: 14px 16px;
	border: 0; border-radius: 28px; cursor: pointer;
	font: inherit; font-size: clamp( 1.6rem, 7.4vw, 2.4rem ); font-weight: 900; line-height: 1.05;
	text-transform: uppercase; color: #06111f;
	background: linear-gradient( 100deg, var( --fp-accent, #38bdf8 ), var( --fp-accent-2, #c084fc ) );
	box-shadow: 0 0 0 4px rgba( 224, 242, 254, .35 ), 0 0 38px rgba( 129, 140, 248, .65 );
	animation: fpe-gn-mega-pulsa 1.8s ease-in-out infinite;
}
@keyframes fpe-gn-mega-pulsa { 0%, 100% { transform: scale( 1 ); } 50% { transform: scale( 1.035 ); } }
.fpe-gn-mega-corso {
	margin: 16px auto 0; padding: 8px 14px; border: 0; background: none; cursor: pointer;
	color: #93c5fd; font: inherit; font-size: .95rem; text-decoration: underline;
}
@media ( prefers-reduced-motion: reduce ) {
	#fpe-gn-mega, .fpe-gn-mega-card, .fpe-gn-mega-vapore, .fpe-gn-mega-tour { animation: none !important; transition: none !important; }
}
.fpe-gn-mega-card button:focus-visible { outline: 3px solid #e0f2fe; outline-offset: 3px; }

/* ---------- BOTTONI A VETRO E A BOLLA MAGICA (frap, 29 set) ----------
   Come le nuvolette del gatto: vetro scuro-azzurro traslucido (sfocatura FISSA dello
   sfondo, mai animata), bordo di luce, riflesso curvo in alto come una bolla, e un
   galleggiare lento (solo transform). Testo bianco: sul vetro scuro ha il contrasto giusto. */
.fpe-gn-mega-ruoli button, .fpe-gn-mega-tour, .fpe-gn-azioni .fpe-gn-pri, .fpe-gn-azioni .fpe-gn-sec {
	position: relative; overflow: hidden; isolation: isolate;
	color: #fff; text-shadow: 0 1px 3px rgba( 2, 8, 24, .55 );
	border: 1.5px solid rgba( 186, 230, 253, .55 );
	-webkit-backdrop-filter: blur( 10px ) saturate( 1.4 ); backdrop-filter: blur( 10px ) saturate( 1.4 );
	background: linear-gradient( 160deg, rgba( 125, 211, 252, .38 ), rgba( 56, 189, 248, .14 ) 45%, rgba( 129, 140, 248, .3 ) );
	box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -10px 22px rgba( 30, 58, 138, .35 ), 0 8px 26px rgba( 2, 8, 24, .5 ), 0 0 20px rgba( 56, 189, 248, .3 );
}
/* il riflesso della bolla: una mezzaluna chiara in alto e un puntino di luce */
.fpe-gn-mega-ruoli button::before, .fpe-gn-mega-tour::before, .fpe-gn-azioni .fpe-gn-pri::before, .fpe-gn-azioni .fpe-gn-sec::before {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	left: 6%; right: 6%; top: 3px; height: 46%;
	border-radius:50% 50% 50% 50% / 90% 90% 60% 60%;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, .5 ), rgba( 255, 255, 255, .04 ) );
}
.fpe-gn-mega-ruoli button::after, .fpe-gn-mega-tour::after, .fpe-gn-azioni .fpe-gn-pri::after {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	right: 11%; bottom: 16%; width: 9px; height: 9px; border-radius: 50%;
	background: rgba( 255, 255, 255, .7 ); box-shadow: -14px 6px 0 -2px rgba( 255, 255, 255, .35 );
}
/* tinte del sito: docente violetto, studente azzurro, il tour tutte e due */
.fpe-gn-mega-doc { background: linear-gradient( 160deg, rgba( 192, 132, 252, .5 ), rgba( 129, 140, 248, .18 ) 50%, rgba( 99, 102, 241, .38 ) ); box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -10px 22px rgba( 76, 29, 149, .4 ), 0 8px 26px rgba( 2, 8, 24, .5 ), 0 0 24px rgba( 192, 132, 252, .4 ); }
.fpe-gn-mega-stu { background: linear-gradient( 160deg, rgba( 34, 211, 238, .5 ), rgba( 56, 189, 248, .16 ) 50%, rgba( 59, 130, 246, .36 ) ); box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -10px 22px rgba( 8, 47, 73, .45 ), 0 8px 26px rgba( 2, 8, 24, .5 ), 0 0 24px rgba( 34, 211, 238, .4 ); }
.fpe-gn-mega-tour {
	background: linear-gradient( 160deg, rgba( 56, 189, 248, .6 ), rgba( 129, 140, 248, .22 ) 50%, rgba( 192, 132, 252, .55 ) );
	border-width: 2.5px; border-color: rgba( 224, 242, 254, .8 );
	text-shadow: 0 2px 6px rgba( 2, 8, 24, .65 );
	box-shadow: inset 0 3px 2px rgba( 255, 255, 255, .5 ), inset 0 -16px 30px rgba( 49, 46, 129, .45 ), 0 10px 34px rgba( 2, 8, 24, .55 ), 0 0 44px rgba( 129, 140, 248, .7 );
}
.fpe-gn-mega-tour::before { height: 42%; }
/* nelle nuvolette: CONTINUA e gli altri, stessa pelle */
.fpe-gn-azioni .fpe-gn-pri { color: #fff; }
.fpe-gn-azioni .fpe-gn-sec { border-color: rgba( 186, 230, 253, .4 ); }
/* galleggiano piano, uno sfasato dall'altro */
.fpe-gn-mega-su .fpe-gn-mega-doc { animation: fpe-gn-bolla 4.4s ease-in-out infinite; }
.fpe-gn-mega-su .fpe-gn-mega-stu { animation: fpe-gn-bolla 4.4s ease-in-out -2.2s infinite; }
@keyframes fpe-gn-bolla { 0%, 100% { transform: translateY( 0 ); } 50% { transform: translateY( -4px ); } }
.fpe-gn-mega-ruoli button:hover, .fpe-gn-mega-ruoli button:focus-visible { animation: none; }
@media ( prefers-reduced-motion: reduce ) { .fpe-gn-mega-doc, .fpe-gn-mega-stu { animation: none !important; } }

/* 4.51.3: i due bottoni «tour guidato» uno sopra l'altro sul telefono, testo su una riga */
@media ( max-width: 520px ) {
	.fpe-gn-mega-ruoli { grid-template-columns: 1fr; }
	.fpe-gn-mega-ruoli button { min-height: 84px; font-size: 1.25rem; }
}

/* 4.51.4: nelle sottopagine il tema dava al gatto uno sfondo, un bordo e un'ombra quadrati. Il gatto sta da solo, senza riquadro. */
body #fp-cat-btn.fpe-gn-on, body #fp-cat-btn.fpe-gn-on:hover, body #fp-cat-btn.fpe-gn-on:focus, body #fp-cat-btn.fpe-gn-on:active {
	background: none !important; background-color: transparent !important; background-image: none !important;
	border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
	outline: 0; -webkit-appearance: none; appearance: none;
}
#fp-cat-btn.fpe-gn-on:focus-visible { outline: 3px solid #e0f2fe; outline-offset: 4px; border-radius: 18px !important; }


/* 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.) */
.fpe-gn-vetro { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.fpe-gn-testo { text-shadow: 0 1px 3px rgba( 2, 8, 24, .75 ); }
.fpe-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 */
.fpe-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 );
}
.fpe-gn-nube { filter: drop-shadow( 0 0 10px rgba( 129, 170, 255, .35 ) ) drop-shadow( 0 12px 20px rgba( 2, 6, 23, .6 ) ); }
.fpe-gn-nube path { fill: rgba( 255, 255, 255, .02 ); stroke: rgba( 226, 236, 255, .8 ); stroke-width: 2; }
.fpe-gn-su .fpe-gn-nube { animation: fpe-gn-alone 4.6s ease-in-out infinite; }
@keyframes fpe-gn-alone { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.fpe-gn-brill { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.fpe-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: fpe-gn-brilla 3s ease-in-out infinite;
}
.fpe-gn-brill span.fpe-gn-brill-lil { background: #c4b5fd; }
@keyframes fpe-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 ) { .fpe-gn-brill { display: none; } .fpe-gn-su .fpe-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. */
.fpe-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 );
}
.fpe-gn-nube { filter: drop-shadow( 0 0 8px rgba( 37, 99, 235, .45 ) ) drop-shadow( 0 10px 18px rgba( 2, 6, 23, .45 ) ); }
.fpe-gn-nube path { fill: rgba( 255, 255, 255, .02 ); stroke: #1d4ed8; stroke-width: 2.6; }
.fpe-gn-goccia { background: rgba( 120, 160, 255, .2 ); border: 2px solid #1d4ed8; }
.fpe-gn-testo { text-shadow: 0 1px 2px rgba( 2, 8, 24, .95 ), 0 0 10px rgba( 2, 8, 24, .8 ); }

/* 4.79: la terza scelta del popup, «voglio solo dare un'occhiata!»: discreta ma chiara, sotto docente e studente */
.fpe-gn-mega-occhiata {
	display: block; width: 100%; min-height: 52px; margin: 0 0 4px; padding: 10px 18px;
	border: 2px solid #38bdf8; border-radius: 999px; background: rgba( 56, 189, 248, .08 );
	color: #e0f2fe; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer;
	transition: transform .15s, background .2s;
}
.fpe-gn-mega-occhiata:hover, .fpe-gn-mega-occhiata:focus-visible { background: rgba( 56, 189, 248, .22 ); transform: translateY( -2px ); }


/* ---------- «Gatto in silenzio» (frap, 6 ott) ---------- */
.fp-cat-hint.fpe-guida-hint-zitto { display: none !important; }
/* scuote la testa e si schiaccia come chi si tappa la bocca; poi, quando lo richiami, salta */
.fpe-gn-is-zitto svg { animation: fpe-gn-zitto 1.5s ease-in-out both; transform-origin: 50% 60%; }
@keyframes fpe-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; }
}
.fpe-gn-is-parla svg { animation: fpe-gn-parla 1.1s cubic-bezier( .3, 1.6, .5, 1 ) both; }
@keyframes fpe-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; } }
.fpe-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: fpe-gn-zip 2.2s ease-out both; }
@keyframes fpe-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 ) { .fpe-gn-is-zitto svg, .fpe-gn-is-parla svg, .fpe-gn-zip { animation: none; } .fpe-gn-zip { opacity: 1; } }


/* ---------- 4.88 · IL MENU: impostazioni in fondo ---------- */
.fp-cat-menu .fpe-guida-invito, .fp-cat-menu .fpe-guida-impo { box-sizing: border-box; flex: 0 0 auto; width: 100%; }
.fp-cat-menu .fpe-guida-impo {
	position: sticky; bottom: 0; z-index: 2;
	margin: 8px 0 0; padding: 10px 12px 12px;
	border: 1px solid rgba(125,211,252,.28); border-radius: 14px;
	background: rgba(8,12,34,.96);
}
.fp-cat-menu .fpe-guida-impo-btn {
	display: block; width: 100%; min-height: 40px; margin: 0 0 6px; padding: 8px 10px;
	border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
	background: rgba(255,255,255,.06); color: #e0f2fe; font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.fp-cat-menu .fpe-guida-impo-btn[aria-pressed="true"] { border-color: #22d3ee; background: rgba(34,211,238,.14); }
.fp-cat-menu .fpe-guida-costumi > span { display: block; margin: 4px 0 6px; color: #fdba74; font-size: .82rem; font-weight: 800; letter-spacing: .03em; }
.fp-cat-menu .fpe-guida-costumi-riga { display: flex; gap: 6px; }
.fp-cat-menu .fpe-guida-costume-btn {
	flex: 1 1 0; min-height: 40px; padding: 6px 2px; border: 1px solid rgba(251,146,60,.35); border-radius: 10px;
	background: rgba(251,146,60,.08); color: #ffedd5; font: inherit; font-size: .78rem; cursor: pointer;
}
.fp-cat-menu .fpe-guida-costume-btn[aria-pressed="true"] { border-color: #fb923c; background: rgba(251,146,60,.28); color: #fff; }

/* ---------- 4.88 · modalita' invisibile: quasi trasparente ma si tocca ancora ---------- */
#fp-cat-btn svg { transition: opacity .5s; }
#fp-cat-btn.fpe-gn-is-invisibile svg { opacity: .15; }

/* ---------- 4.88 · I COSTUMI DI HALLOWEEN (solo transform e opacity) ---------- */
.fpe-gn-is-zucca .fpe-gn-cs-zuc, .fpe-gn-is-fantasma .fpe-gn-cs-fan, .fpe-gn-is-pipistrello .fpe-gn-cs-pip { opacity: 1; }
.fpe-gn-is-super .fpe-gn-cs { opacity: 0; }
/* zucca: occhi caldi, bocca che palpita */
.fpe-gn-is-zucca .fpe-gn-sguardo path { fill: #fde047; }
.fpe-gn-is-zucca .fpe-gn-alone { fill: #f59e0b; }
.fpe-gn-is-zucca .fpe-gn-naso, .fpe-gn-is-zucca .fpe-gn-bafi { opacity: 0; }
.fpe-gn-zuc-luce { animation: fpe-gn-tremola 2.2s ease-in-out infinite; }
@keyframes fpe-gn-tremola { 0%, 100% { opacity: .55; } 40% { opacity: 1; } 55% { opacity: .75; } 70% { opacity: 1; } }
.fpe-gn-is-zucca .fpe-gn-cs-zuc { transform-origin: 50% 100%; animation: fpe-gn-zucca-dondola 4s ease-in-out infinite; }
@keyframes fpe-gn-zucca-dondola { 0%, 100% { transform: rotate( -1.2deg ); } 50% { transform: rotate( 1.2deg ); } }
/* fantasma: lenzuolo che ondeggia, occhi azzurri nei buchi */
.fpe-gn-lembo { transform-origin: 50% 100%; animation: fpe-gn-lembo 3.2s ease-in-out infinite; }
@keyframes fpe-gn-lembo { 0%, 100% { transform: translateX( -1.2px ) skewX( -1.5deg ); } 50% { transform: translateX( 1.2px ) skewX( 1.5deg ); } }
.fpe-gn-is-fantasma .fpe-gn-bafi { opacity: .25; }
.fpe-gn-is-fantasma .fpe-gn-testa .fpe-gn-natale { opacity: 0; }
.fpe-gn-is-fantasma .fpe-gn-tutto { opacity: .96; }
/* pipistrello: ali che sbattono, occhi arancio, zanne */
.fpe-gn-ala { animation: fpe-gn-ali .9s ease-in-out infinite alternate; }
.fpe-gn-ala { transform-box: fill-box; }
.fpe-gn-ala-s { transform-origin: 100% 25%; }
.fpe-gn-ala-d { transform-origin: 0% 25%; animation-name: fpe-gn-ali-d; }
@keyframes fpe-gn-ali { from { transform: rotate( 6deg ) scaleX( 1 ); } to { transform: rotate( -14deg ) scaleX( .86 ); } }
@keyframes fpe-gn-ali-d { from { transform: rotate( -6deg ) scaleX( 1 ); } to { transform: rotate( 14deg ) scaleX( .86 ); } }
.fpe-gn-is-pipistrello .fpe-gn-sguardo path { fill: #fb923c; }
.fpe-gn-is-pipistrello .fpe-gn-alone { fill: #f97316; }
@media (prefers-reduced-motion: reduce) {
	.fpe-gn-zuc-luce, .fpe-gn-lembo, .fpe-gn-ala, .fpe-gn-is-zucca .fpe-gn-cs-zuc { animation: none; }
}

/* 4.89 · rifiniture dei costumi */
.fpe-gn-is-fantasma .fpe-gn-giro { animation: fpe-gn-fluttua 3.6s ease-in-out infinite; }
@keyframes fpe-gn-fluttua { 50% { transform: translateY( -3px ); } }
.fpe-gn-is-fantasma.fpe-gn-is-giro .fpe-gn-giro, .fpe-gn-is-fantasma.fpe-gn-is-salto .fpe-gn-giro, .fpe-gn-is-fantasma.fpe-gn-is-fusa .fpe-gn-giro { animation-iteration-count: 1; }
.fpe-gn-is-zucca .fpe-gn-aura { fill: #f97316; }
@media (prefers-reduced-motion: reduce) { .fpe-gn-is-fantasma .fpe-gn-giro { animation: none; } }

/* =====================================================================
   4.101 (frap, 17 ott 2026) — GATTO DISCRETO SU TELEFONO
   ===================================================================== */

/* ---------- GUIDA DOCENTE / GUIDA STUDENTE in evidenza, in alto nel menu ---------- */
.fp-cat-menu .fpe-guida-duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 4px; }
.fp-cat-menu a.fpe-guida-grande {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	min-height: 78px; margin: 0; padding: 12px 8px; text-align: center; text-decoration: none;
	color: #f8fafc; border: 1.5px solid rgba(125,211,252,.7); border-radius: 16px;
	background: linear-gradient( 160deg, rgba(56,189,248,.34), rgba(192,132,252,.26) );
	box-shadow: 0 6px 18px -8px rgba(56,189,248,.8), inset 0 1px 0 rgba(255,255,255,.35);
}
.fp-cat-menu a.fpe-guida-grande i { font-style: normal; font-size: 1.7rem; line-height: 1; }
.fp-cat-menu a.fpe-guida-grande strong { font-size: .86rem; font-weight: 900; letter-spacing: .05em; line-height: 1.15; }
.fp-cat-menu a.fpe-guida-grande:hover, .fp-cat-menu a.fpe-guida-grande:focus-visible { background: linear-gradient( 160deg, rgba(56,189,248,.5), rgba(192,132,252,.4) ); color: #fff; }

/* il mini popup «COMINCIA DA QUI!»: compare solo alla prima apertura del menu */
.fp-cat-menu .fpe-guida-cda {
	position: absolute; left: 50%; top: -17px; z-index: 3; transform: translateX( -50% );
	display: none; white-space: nowrap; cursor: pointer;
	padding: 5px 12px; border-radius: 99px;
	font: 900 .72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .09em; color: #3b2300;
	background: linear-gradient( 180deg, #fde68a, #fbbf24 ); border: 1.5px solid #fff7d6;
	box-shadow: 0 4px 14px rgba(251,191,36,.55);
}
.fp-cat-menu .fpe-guida-cda::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate( 45deg ); background: #fbbf24; border-right: 1.5px solid #fff7d6; border-bottom: 1.5px solid #fff7d6; }
.fp-cat-menu .fpe-guida-invito.fpe-guida-cda-on .fpe-guida-cda { display: block; animation: fpe-gn-cda 1.6s ease-in-out infinite; }
.fp-cat-menu .fpe-guida-invito.fpe-guida-cda-on .fpe-guida-duo { margin-top: 18px; }
@keyframes fpe-gn-cda { 0%, 100% { transform: translateX( -50% ) translateY( 0 ); } 50% { transform: translateX( -50% ) translateY( -4px ); } }
@media ( prefers-reduced-motion: reduce ) { .fp-cat-menu .fpe-guida-invito.fpe-guida-cda-on .fpe-guida-cda { animation: none; } }

/* ---------- su telefono: fumetti piccoli, trasparenti (vetro, come la home), sopra il gatto ---------- */
@media ( max-width: 768px ) {
	#fpe-gn-fumetto { max-width: min( 175px, calc( 100vw - 120px ) ); font-size: .7rem; line-height: 1.28; font-weight: 650; }
	.fpe-gn-nube, .fpe-gn-vetro, .fpe-gn-brill, .fpe-gn-goccia { display: none !important; }
	.fpe-gn-corpo {
		padding: 6px 10px 7px; animation: none;
		border-radius: 12px 12px 3px 12px;
		background: rgba(15,23,42,.34);
		-webkit-backdrop-filter: blur( 12px ) saturate( 1.5 ); backdrop-filter: blur( 12px ) saturate( 1.5 );
		border: 1px solid rgba(255,255,255,.3);
		box-shadow: 0 6px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4);
	}
	.fpe-gn-testo { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
	.fpe-gn-azioni { gap: 6px; margin-top: 8px; }
	.fpe-gn-azioni > * { font-size: .72rem; }
	/* il gatto: meno ingombrante (era 120 px) */
	#fp-cat-btn.fpe-gn-on { width: 88px !important; height: 88px !important; }
	#fp-cat-hint { bottom: 170px !important; }
	/* la parola del giorno: piccola, in basso a sinistra (prima era una fascia a tutta larghezza) */
	#fp-wotd {
		left: 6px !important; bottom: 6px !important; right: auto !important; top: auto !important;
		width: auto !important; max-width: min( 200px, 54vw ) !important; height: auto !important; min-height: 0 !important; max-height: 54px !important;
		transform: none !important; margin: 0 !important; padding: 5px 10px !important; overflow: hidden !important;
		display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 2px 8px !important;
		border-radius: 10px !important; opacity: .95; font-size: 11px !important; line-height: 1.25 !important;
		-webkit-backdrop-filter: blur( 10px ); backdrop-filter: blur( 10px );
	}
	#fp-wotd * { font-size: inherit !important; line-height: 1.25 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; max-width: 100% !important; }
}