/* Hela Italia: un libro di fiabe visto con occhi minuscoli.
   Prefisso hmi-. Colori presi dal logo: verde bosco di notte, carta del libro, oro, rosa delle orecchie. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("../fonts/patrick-hand.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	--bosco: #14211a;
	--bosco-2: #1d2f24;
	--bosco-3: #2a4232;
	--muschio: #3f6b3a;
	--foglia: #8fbf5a;
	--carta: #f6ecd4;
	--carta-2: #ecdcb7;
	--carta-3: #dcc797;
	--inchiostro: #2e2418;
	--inchiostro-2: #5e4b35;
	--oro: #d4a845;
	--oro-chiaro: #f0d48a;
	--rosa: #e8a3a0;
	--ruggine: #9c3b2a;
	--lume: #ffcf70;
	--discord: #5865f2;
	--reddit: #ff4500;
	--titoli: "Fraunces", Georgia, "Times New Roman", serif;
	--testo: "Nunito", "Segoe UI", system-ui, sans-serif;
	--mano: "Patrick Hand", "Comic Sans MS", cursive;
	--larghezza: 1160px;
	--ombra: 0 18px 40px -18px rgba(10, 16, 10, .55);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--bosco);
	color: var(--inchiostro);
	font: 400 1.0625rem/1.65 var(--testo);
	overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--titoli); font-variation-settings: "SOFT" 100, "WONK" 1; line-height: 1.12; margin: 0 0 .5em; font-weight: 650; }
h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
p { margin: 0 0 1em; }

.hmi-salta { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--oro); color: var(--inchiostro); padding: .6em 1em; border-radius: 8px; font-weight: 700; }
.hmi-salta:focus { left: 8px; }
.hmi-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }

.hmi-mano { font-family: var(--mano); font-size: 1.35rem; color: var(--ruggine); margin: 0 0 .2em; line-height: 1.2; }
.hmi-mano--piccola { font-size: 1.15rem; }

/* ---------- Pulsanti ---------- */
.hmi-pulsanti { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0 1rem; }
.hmi-btn {
	display: inline-flex; align-items: center; gap: .6em;
	padding: .85em 1.35em; border-radius: 999px;
	font: 800 1.02rem/1 var(--testo); text-decoration: none; color: #fff;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .28), 0 10px 24px -8px rgba(0, 0, 0, .5);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hmi-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hmi-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.hmi-btn--discord { background: var(--discord); }
.hmi-btn--reddit { background: var(--reddit); }
.hmi-pulsanti--grande .hmi-btn { font-size: 1.15rem; padding: 1em 1.6em; }
.hmi-icona { flex: none; }

/* ---------- Testata ---------- */
.hmi-testa {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: min(100vh, 980px); min-height: min(100svh, 980px);
	display: grid; align-content: center;
	padding: 5.5rem 1rem 6rem; color: #fbf3df;
}
.hmi-testa__sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -3; }
.hmi-testa::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(ellipse at 75% 40%, rgba(20, 33, 26, 0) 0%, rgba(20, 33, 26, .35) 55%),
		linear-gradient(90deg, rgba(14, 22, 16, .92) 0%, rgba(14, 22, 16, .72) 42%, rgba(14, 22, 16, .15) 100%),
		linear-gradient(0deg, var(--bosco) 0%, rgba(20, 33, 26, 0) 28%);
}
.hmi-lucciole { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hmi-testa__dentro { width: 100%; max-width: var(--larghezza); margin: 0 auto; display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
.hmi-testa__logo { width: min(64vw, 300px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); animation: hmi-galleggia 7s ease-in-out infinite; }
@keyframes hmi-galleggia { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.hmi-occhiello { font: 800 .8rem/1 var(--testo); letter-spacing: .18em; text-transform: uppercase; color: var(--oro-chiaro); margin-bottom: 1rem; }
.hmi-testa h1 { font-size: clamp(3rem, 2rem + 6vw, 6rem); font-weight: 800; color: var(--oro-chiaro); text-shadow: 0 4px 24px rgba(0, 0, 0, .5); margin: 0; letter-spacing: -.01em; }
.hmi-sottotitolo { font: italic 500 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1.3 var(--titoli); color: #f3e6c4; margin: .2em 0 1.1em; }
.hmi-attacco { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); max-width: 34em; color: #f2ead6; }
.hmi-conto { display: inline-flex; align-items: center; gap: .8rem; margin: .4rem 0 1rem; padding: .55rem 1.1rem .55rem .6rem; border-radius: 16px; background: rgba(20, 33, 26, .62); border: 1px solid rgba(240, 212, 138, .35); backdrop-filter: blur(4px); }
.hmi-conto__numero { font: 800 2rem/1 var(--titoli); color: var(--bosco); background: var(--oro-chiaro); border-radius: 12px; padding: .3rem .6rem; min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; }
.hmi-conto__testo { font-weight: 700; line-height: 1.3; }
.hmi-conto__fine { display: block; font: 400 .95rem/1.3 var(--mano); color: var(--oro-chiaro); letter-spacing: .02em; }
.hmi-conto--uscito { padding-left: 1.1rem; }
.hmi-segnale { display: flex; align-items: center; gap: .6rem; font-size: .98rem; color: #e9e0c9; margin: 0; }
.hmi-segnale__lume { width: 12px; height: 12px; border-radius: 50%; background: var(--lume); box-shadow: 0 0 0 4px rgba(255, 207, 112, .2), 0 0 16px var(--lume); animation: hmi-lume 2.6s ease-in-out infinite; flex: none; }
@keyframes hmi-lume { 50% { opacity: .55; box-shadow: 0 0 0 7px rgba(255, 207, 112, .08), 0 0 8px var(--lume); } }
.hmi-scorri { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); margin: 0; font: 400 1.1rem var(--mano); color: var(--oro-chiaro); white-space: nowrap; }
.hmi-scorri::after { content: ""; display: block; width: 2px; height: 26px; margin: .4rem auto 0; background: linear-gradient(var(--oro-chiaro), transparent); animation: hmi-scendi 1.8s ease-in-out infinite; }
@keyframes hmi-scendi { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (min-width: 900px) {
	.hmi-testa { padding: 6rem 2rem 7rem; }
	.hmi-testa__dentro { grid-template-columns: 400px minmax(0, 1fr); }
	.hmi-testa__logo { width: 400px; }
}

/* ---------- Sezioni ---------- */
.hmi-sezione { position: relative; padding: clamp(4rem, 3rem + 5vw, 7.5rem) 1rem; }
.hmi-sezione > * { max-width: var(--larghezza); margin-left: auto; margin-right: auto; }
.hmi-titolo { text-align: center; max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.hmi-titolo > p:last-child { color: var(--inchiostro-2); font-size: 1.1rem; }
.hmi-titolo--chiaro h2 { color: var(--oro-chiaro); }
.hmi-titolo--chiaro .hmi-mano { color: var(--rosa); }
.hmi-titolo--chiaro > p:last-child { color: #e2d9c2; }

/* carta: pagine di libro con un po' di grana */
.hmi-carta, .hmi-libro, .hmi-froggy, .hmi-terra, .hmi-insieme {
	background-color: var(--carta);
	background-image:
		radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .55), transparent 55%),
		radial-gradient(ellipse at 100% 100%, rgba(185, 150, 90, .18), transparent 50%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Libro aperto ---------- */
.hmi-libro { background-color: var(--bosco-2); background-image: radial-gradient(ellipse at 50% 30%, var(--bosco-3), var(--bosco) 70%); }
.hmi-libro__aperto { display: grid; grid-template-columns: minmax(0, 1fr); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.hmi-libro__pagina {
	position: relative; padding: clamp(1.8rem, 1rem + 3vw, 3.4rem) clamp(1.3rem, .8rem + 2.5vw, 3rem) 3.2rem;
	background-color: var(--carta);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hmi-libro__pagina--sx { border-radius: 10px 10px 0 0; background-image: linear-gradient(0deg, rgba(120, 90, 50, .14), transparent 12%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hmi-libro__pagina--dx { border-radius: 0 0 10px 10px; }
.hmi-capitolo { font: italic 500 1rem var(--titoli); letter-spacing: .14em; text-transform: uppercase; color: var(--ruggine); margin-bottom: .6rem; }
.hmi-libro h2 { color: var(--inchiostro); }
.hmi-capolettera p:first-child::first-letter {
	float: left; font: 800 4.6rem/.82 var(--titoli); font-variation-settings: "SOFT" 100, "WONK" 1;
	color: var(--oro); padding: .1em .12em 0 0; margin-top: .04em;
	text-shadow: 2px 2px 0 var(--ruggine);
}
.hmi-numero-pagina { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font: italic 400 .95rem var(--titoli); color: var(--inchiostro-2); margin: 0; }
.hmi-ovale { margin: 0 auto 1.8rem; max-width: 380px; text-align: center; }
.hmi-ovale img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 40%; border-radius: 50% / 46%; border: 6px solid var(--carta); outline: 3px solid var(--oro); box-shadow: var(--ombra); }
.hmi-ovale figcaption { font: 400 1.2rem/1.25 var(--mano); color: var(--inchiostro-2); margin-top: .8rem; }
.hmi-schede { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--carta-3); }
.hmi-schede > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--carta-3); }
.hmi-schede dt { font: 700 .82rem/1.6 var(--testo); letter-spacing: .1em; text-transform: uppercase; color: var(--ruggine); }
.hmi-schede dd { margin: 0; font-weight: 700; }

@media (min-width: 900px) {
	.hmi-libro__aperto { grid-template-columns: 1fr 1fr; }
	.hmi-libro__pagina--sx { border-radius: 14px 0 0 14px; background-image: linear-gradient(270deg, rgba(110, 80, 40, .28), rgba(110, 80, 40, 0) 9%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); transform: perspective(1800px) rotateY(4deg); transform-origin: right center; }
	.hmi-libro__pagina--dx { border-radius: 0 14px 14px 0; background-image: linear-gradient(90deg, rgba(110, 80, 40, .28), rgba(110, 80, 40, 0) 9%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); transform: perspective(1800px) rotateY(-4deg); transform-origin: left center; }
}

/* ---------- Froggy ---------- */
.hmi-froggy { display: grid; gap: 2rem; }
.hmi-froggy__corpo { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); width: 100%; }
.hmi-palco { background: #fff8e6; border-radius: 22px; padding: .6rem; box-shadow: var(--ombra), inset 0 0 0 3px var(--carta-3); }
.hmi-palco__scena { display: block; width: 100%; border-radius: 16px; }
.hmi-palco__didascalia { font: 400 1.25rem/1.3 var(--mano); color: var(--inchiostro-2); text-align: center; margin: .6rem 0 .3rem; min-height: 1.3em; }
.hmi-palco__piu { font: 400 22px var(--mano); fill: var(--ruggine); opacity: 0; }

/* stati visibili per mossa */
.hmi-palco__liana, .hmi-palco__topo--plana, .hmi-palco__ombra, .hmi-palco__luce, .hmi-palco__fiore { opacity: 0; }
.hmi-palco__topo, .hmi-palco__liana, .hmi-palco__ombra, .hmi-palco__leva, .hmi-palco__cancello, .hmi-palco__bacca, .hmi-palco__fiore { transform-box: fill-box; }
.hmi-palco[data-mossa="dondolati"] .hmi-palco__topo--terra,
.hmi-palco[data-mossa="plana"] .hmi-palco__topo--terra { opacity: 0; }
.hmi-palco[data-mossa="dondolati"] .hmi-palco__liana { opacity: 1; transform-box: view-box; transform-origin: 300px 34px; animation: hmi-dondola 2.6s ease-in-out both; }
.hmi-palco[data-mossa="plana"] .hmi-palco__topo--plana { opacity: 1; animation: hmi-plana 2.6s ease-in-out both; }
.hmi-palco[data-mossa="salta"] .hmi-palco__topo--terra { animation: hmi-salta 1.5s cubic-bezier(.3, 0, .4, 1) both; }
.hmi-palco[data-mossa="raccogli"] .hmi-palco__topo--terra { animation: hmi-cammina-bacche 2.6s ease-in-out both; }
.hmi-palco[data-mossa="raccogli"] .hmi-palco__bacca { transform-origin: center; animation: hmi-bacca 2.6s ease-in-out both; }
.hmi-palco[data-mossa="raccogli"] .hmi-palco__piu { animation: hmi-piu 2.6s ease-out both; }
.hmi-palco[data-mossa="ombra"] .hmi-palco__ombra { animation: hmi-ombra 3.2s ease-in-out both; }
.hmi-palco[data-mossa="ombra"] .hmi-palco__leva { transform-origin: 50% 100%; animation: hmi-leva 3.2s ease-in-out both; }
.hmi-palco[data-mossa="ombra"] .hmi-palco__luce { animation: hmi-luce 3.2s ease-in-out both; }
.hmi-palco[data-mossa="ombra"] .hmi-palco__cancello { transform-origin: 0% 100%; animation: hmi-cancello 3.2s ease-in-out both; }
.hmi-palco[data-mossa="ombra"] .hmi-palco__fiore { transform-origin: 50% 100%; animation: hmi-fiore 3.2s ease-in-out both; }
.hmi-palco__ombra use { filter: saturate(0) brightness(1.4) drop-shadow(0 0 6px #8fd3ff); }

@keyframes hmi-salta { 0% { transform: translate(0, 0); } 15% { transform: translate(0, 6px) scale(1.04, .94); } 45% { transform: translate(60px, -110px) rotate(-8deg); } 75% { transform: translate(120px, 0); } 82% { transform: translate(120px, 4px) scale(1.05, .93); } 100% { transform: translate(0, 0); } }
@keyframes hmi-dondola { 0% { transform: rotate(-38deg); } 25% { transform: rotate(32deg); } 50% { transform: rotate(-26deg); } 75% { transform: rotate(18deg); } 100% { transform: rotate(0deg); } }
@keyframes hmi-plana { 0% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(10px, -8px) rotate(-4deg); } 50% { transform: translate(110px, 50px) rotate(6deg); } 70% { transform: translate(160px, 66px) rotate(-3deg); } 90%, 100% { transform: translate(200px, 82px) rotate(0); } }
@keyframes hmi-cammina-bacche { 0% { transform: translate(0, 0); } 40%, 60% { transform: translate(196px, 0); } 100% { transform: translate(0, 0); } }
@keyframes hmi-bacca { 0%, 45% { transform: scale(1); } 52%, 85% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes hmi-piu { 0%, 48% { opacity: 0; transform: translateY(0); } 58% { opacity: 1; } 90% { opacity: 1; transform: translateY(-30px); } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes hmi-ombra { 0% { opacity: 0; transform: translate(-90px, 0) scale(.6); } 15% { opacity: .6; transform: translate(-90px, 0) scale(1); } 40%, 80% { opacity: .6; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes hmi-leva { 0%, 38% { transform: rotate(0); } 46%, 82% { transform: rotate(-40deg); } 100% { transform: rotate(0); } }
@keyframes hmi-luce { 0%, 40% { opacity: 0; } 50%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hmi-cancello { 0%, 44% { transform: scaleX(1); } 56%, 84% { transform: scaleX(.15); } 100% { transform: scaleX(1); } }
@keyframes hmi-fiore { 0%, 50% { opacity: 0; transform: scale(0); } 62%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

.hmi-mosse { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
.hmi-mossa {
	width: 100%; text-align: left; cursor: pointer;
	display: grid; gap: .15rem; padding: .8rem 1rem .85rem 3.2rem; position: relative;
	background: #fffaf0; border: 2px solid var(--carta-3); border-radius: 16px;
	font: inherit; color: var(--inchiostro);
	transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.hmi-mossa::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; border-radius: 50%; background: var(--foglia); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .15); }
.hmi-mossa::after { content: ""; position: absolute; left: 1.2rem; top: 50%; width: .3rem; height: .3rem; margin-top: -.45rem; border-radius: 50%; background: #22301a; box-shadow: .6rem 0 0 #22301a; }
.hmi-mossa:hover { transform: translateY(-2px); border-color: var(--foglia); }
.hmi-mossa.is-attiva { background: #eef6e2; border-color: var(--muschio); }
.hmi-mossa__nome { font: 700 1.2rem/1.2 var(--titoli); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hmi-mossa__testo { font-size: .95rem; color: var(--inchiostro-2); line-height: 1.4; }

.hmi-polaroid { margin: 0; background: #fffdf6; padding: .7rem .7rem 3rem; box-shadow: var(--ombra); position: relative; max-width: 460px; justify-self: center; }
.hmi-polaroid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hmi-polaroid figcaption { position: absolute; left: .8rem; right: .8rem; bottom: .7rem; font: 400 1.2rem/1.2 var(--mano); color: var(--inchiostro-2); text-align: center; }
.hmi-polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; margin-left: -45px; background: rgba(232, 197, 71, .55); transform: rotate(-3deg); }
.hmi-polaroid--storta { transform: rotate(-2.5deg); }

@media (min-width: 900px) {
	.hmi-froggy { grid-template-columns: 1fr; }
	.hmi-froggy__corpo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
	.hmi-polaroid--storta { justify-self: end; margin-top: -1rem; margin-right: 6%; }
}

/* ---------- Calderone ---------- */
.hmi-laboratorio {
	color: #f1e8d2;
	background:
		radial-gradient(ellipse at 50% 55%, rgba(255, 157, 59, .22), transparent 45%),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 120px),
		linear-gradient(#24190f, #1a120b);
}
.hmi-lab { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hmi-mensola {
	list-style: none; margin: 0; padding: 1rem .8rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .6rem;
	background: linear-gradient(transparent calc(50% - 7px), #6b4b2e calc(50% - 7px), #5a3d24 50%, transparent 50%, transparent calc(100% - 7px), #6b4b2e calc(100% - 7px));
}
.hmi-vasetto { width: 100%; display: grid; justify-items: center; gap: .2rem; background: none; border: 0; padding: .3rem .2rem .9rem; color: #f1e8d2; font: 400 1.05rem/1.1 var(--mano); cursor: pointer; border-radius: 14px; transition: transform .2s ease; }
.hmi-vasetto svg { width: 54px; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.hmi-vasetto__dentro { fill: var(--colore); }
.hmi-vasetto:hover svg { transform: translateY(-4px) rotate(-4deg); }
.hmi-vasetto[aria-pressed="true"] svg { transform: translateY(-10px) rotate(6deg); filter: drop-shadow(0 0 12px var(--colore)) drop-shadow(0 6px 6px rgba(0, 0, 0, .4)); }
.hmi-vasetto[aria-pressed="true"] span { color: var(--oro-chiaro); text-decoration: underline wavy var(--colore); text-underline-offset: 4px; }

.hmi-calderone { text-align: center; }
.hmi-calderone__disegno { width: min(100%, 320px); overflow: visible; }
.hmi-calderone__pozione { fill: var(--pozione, #3f6b3a); transition: fill .8s ease; }
.hmi-calderone__bolle circle { fill: var(--pozione-chiara, #8fbf5a); transform-box: fill-box; transform-origin: center; animation: hmi-bolla 2.4s ease-in infinite; transition: fill .8s ease; }
.hmi-calderone__bolle circle:nth-child(2) { animation-delay: .6s; } .hmi-calderone__bolle circle:nth-child(3) { animation-delay: 1.2s; } .hmi-calderone__bolle circle:nth-child(4) { animation-delay: 1.7s; }
@keyframes hmi-bolla { 0% { transform: translateY(6px) scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-16px) scale(1.1); opacity: 0; } }
.hmi-calderone__vapore path { animation: hmi-vapore 4s ease-in-out infinite; opacity: .5; }
.hmi-calderone__vapore path:nth-child(2) { animation-delay: 1.3s; } .hmi-calderone__vapore path:nth-child(3) { animation-delay: 2.6s; }
@keyframes hmi-vapore { 0% { transform: translateY(10px); opacity: 0; } 40% { opacity: .55; } 100% { transform: translateY(-24px); opacity: 0; } }
.hmi-calderone__fuoco { transform-box: fill-box; transform-origin: 50% 100%; animation: hmi-fuoco .5s ease-in-out infinite alternate; }
@keyframes hmi-fuoco { to { transform: scaleY(.88) scaleX(1.04); } }
.hmi-calderone.is-mescola .hmi-calderone__disegno { animation: hmi-scuoti .9s ease-in-out; }
.hmi-calderone.is-mescola .hmi-calderone__vapore path { stroke: var(--pozione-chiara, #fff); opacity: .9; }
@keyframes hmi-scuoti { 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
.hmi-mescola { margin-top: .4rem; padding: .8em 1.8em; border-radius: 999px; border: 0; background: var(--oro); color: var(--inchiostro); font: 800 1.05rem var(--testo); cursor: pointer; box-shadow: 0 5px 0 #8d6a21; transition: transform .15s ease, opacity .2s ease; }
.hmi-mescola:hover:not(:disabled) { transform: translateY(-2px); }
.hmi-mescola:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #8d6a21; }
.hmi-mescola:disabled { opacity: .45; cursor: not-allowed; }
.hmi-lab__stato { font: 400 1.2rem/1.3 var(--mano); color: var(--oro-chiaro); margin: .8rem 0 0; min-height: 1.3em; }

.hmi-ricetta { position: relative; background: var(--carta); color: var(--inchiostro); border-radius: 6px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--ombra); transform: rotate(1.5deg); }
.hmi-ricetta::before { content: ""; position: absolute; inset: 8px; border: 2px dashed var(--carta-3); border-radius: 4px; pointer-events: none; }
.hmi-ricetta.is-nuova { animation: hmi-ricetta .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes hmi-ricetta { from { transform: rotate(-6deg) scale(.7); opacity: 0; } }
.hmi-ricetta__etichetta { font: 700 .8rem var(--testo); letter-spacing: .14em; text-transform: uppercase; color: var(--ruggine); margin: 0 0 .2rem; }
.hmi-ricetta__nome { font: 700 1.6rem/1.15 var(--titoli); font-variation-settings: "SOFT" 100, "WONK" 1; margin: 0 0 .6rem; }
.hmi-ricetta__testo { margin-bottom: 1rem; }
.hmi-ricetta__link { display: inline-block; font-weight: 800; color: var(--discord); }
.hmi-ricetta.is-vuota { transform: rotate(-1deg); opacity: .8; }
.hmi-ricetta.is-vuota .hmi-ricetta__etichetta, .hmi-ricetta.is-vuota .hmi-ricetta__link { visibility: hidden; }
.hmi-ricetta.is-vuota .hmi-ricetta__nome { color: var(--inchiostro-2); font-style: italic; }

.hmi-ricettario { margin-top: 3rem; }
.hmi-ricettario h3 { color: var(--oro-chiaro); text-align: center; }
.hmi-ricettario__conto { display: inline-block; font: 400 1.1rem var(--mano); color: var(--rosa); margin-left: .4rem; }
.hmi-ricettario__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.hmi-rimedio { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 .6rem; padding: .9rem 1rem; border-radius: 14px; background: rgba(246, 236, 212, .07); border: 1px solid rgba(240, 212, 138, .22); transition: background .4s ease; }
.hmi-rimedio__simbolo { grid-row: span 3; font-size: 1.6rem; line-height: 1.2; }
.hmi-rimedio__nome { font: 700 1.1rem/1.2 var(--titoli); color: var(--oro-chiaro); }
.hmi-rimedio__ricetta { font: 400 1rem var(--mano); color: var(--rosa); }
.hmi-rimedio__testo { font-size: .92rem; line-height: 1.45; color: #ddd3bc; margin-top: .25rem; }
.js .hmi-rimedio.is-nascosto .hmi-rimedio__testo, .js .hmi-rimedio.is-nascosto .hmi-rimedio__ricetta { display: none; }
.js .hmi-rimedio.is-nascosto .hmi-rimedio__simbolo { filter: grayscale(1) brightness(.6); }
.js .hmi-rimedio.is-nascosto .hmi-rimedio__nome { color: #a99c82; }
.js .hmi-rimedio.is-nascosto .hmi-rimedio__nome::after { content: "ancora da scoprire"; display: block; font: 400 1rem var(--mano); color: #8a7e67; }
.hmi-rimedio.is-appena { background: rgba(240, 212, 138, .18); }

@media (min-width: 900px) {
	.hmi-lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
	.hmi-mensola { grid-template-columns: repeat(2, minmax(0, 1fr)); background: linear-gradient(transparent calc(33.33% - 7px), #6b4b2e calc(33.33% - 7px), #5a3d24 33.33%, transparent 33.33%, transparent calc(66.66% - 7px), #6b4b2e calc(66.66% - 7px), #5a3d24 66.66%, transparent 66.66%, transparent calc(100% - 7px), #6b4b2e calc(100% - 7px)); }
}

/* ---------- Mappa ---------- */
.hmi-mappa { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
.hmi-mappa__carta {
	position: relative; border-radius: 10px; padding: 0;
	background: #efe0bc;
	box-shadow: var(--ombra), inset 0 0 0 10px rgba(255, 255, 255, .25), inset 0 0 60px rgba(140, 100, 50, .45);
}
.hmi-mappa__disegno { display: block; width: 100%; height: auto; }
.hmi-mappa__fumo { animation: hmi-fumo 3.5s ease-in-out infinite; }
@keyframes hmi-fumo { 50% { transform: translate(4px, -4px); opacity: .6; } }
.hmi-mappa__nebbia ellipse { animation: hmi-nebbia 12s ease-in-out infinite alternate; }
.hmi-mappa__nebbia ellipse:nth-child(2) { animation-duration: 15s; } .hmi-mappa__nebbia ellipse:nth-child(3) { animation-duration: 10s; }
@keyframes hmi-nebbia { to { transform: translateX(-30px); } }
.hmi-mappa__n { font: 700 18px var(--titoli); fill: #8a5a36; }
.hmi-segnaposti { position: absolute; inset: 0; }
.hmi-segnaposto {
	position: absolute; transform: translate(-50%, -50%);
	display: flex; align-items: center; gap: .35rem;
	padding: .25rem .6rem .25rem .25rem; border-radius: 999px;
	background: rgba(255, 250, 238, .92); border: 2px solid var(--inchiostro-2); color: var(--inchiostro);
	font: 700 .85rem/1 var(--testo); cursor: pointer; white-space: nowrap;
	box-shadow: 0 4px 10px rgba(60, 40, 20, .3);
	transition: transform .2s ease, background .2s ease;
}
.hmi-segnaposto__numero { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ruggine); color: #fff; font: 800 .85rem var(--testo); }
.hmi-segnaposto:hover { transform: translate(-50%, -50%) scale(1.06); }
.hmi-segnaposto[aria-selected="true"] { background: var(--oro-chiaro); border-color: var(--ruggine); }
.hmi-segnaposto[aria-selected="true"] .hmi-segnaposto__numero { animation: hmi-pulsa 1.8s ease-in-out infinite; }
@keyframes hmi-pulsa { 50% { box-shadow: 0 0 0 7px rgba(156, 59, 42, .25); } }
.hmi-segnaposto--nebbia .hmi-segnaposto__numero { background: #8b9690; }
@media (max-width: 699px) {
	.hmi-segnaposto { padding: .15rem; }
	.hmi-segnaposto__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.hmi-luogo { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); align-items: center; background: #fffaf0; border-radius: 16px; padding: 1rem; box-shadow: inset 0 0 0 2px var(--carta-3); }
.hmi-luogo + .hmi-luogo { margin-top: 1rem; }
.js .hmi-luogo + .hmi-luogo { margin-top: 0; }
.js .hmi-luogo[hidden] { display: none; }
.hmi-luogo__foto { margin: 0; }
.hmi-luogo__foto img { display: block; width: 100%; border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; }
.hmi-luogo__foto--nebbia { aspect-ratio: 16 / 9; border-radius: 10px; display: grid; place-items: center; background: radial-gradient(ellipse at 40% 50%, #fff, #c9d3cc 60%, #9fb0a6); }
.hmi-luogo__foto--nebbia span { font: 800 5rem var(--titoli); color: rgba(60, 80, 70, .35); }
.hmi-luogo h3 { margin-bottom: .4em; }
.hmi-luogo.is-nuovo { animation: hmi-compari .45s ease both; }
@keyframes hmi-compari { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 900px) {
	.hmi-mappa { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
	.hmi-luogo { grid-template-columns: 1fr; }
}

/* ---------- Insieme ---------- */
.hmi-modi { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.hmi-modo { background: #fffaf0; border-radius: 22px; padding: 1.2rem 1.4rem 1.4rem; box-shadow: inset 0 0 0 2px var(--carta-3), 0 10px 26px -18px rgba(60, 40, 20, .6); text-align: center; }
.hmi-modo svg { width: 100%; max-width: 240px; height: auto; margin-bottom: .4rem; }
.hmi-modo__ombra { opacity: .45; filter: saturate(0) brightness(1.3) drop-shadow(0 0 4px #8fd3ff); }
.hmi-modo p { margin: 0; color: var(--inchiostro-2); }
.hmi-insieme__sotto { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 3.5rem; align-items: center; }
.hmi-insieme .hmi-polaroid { transform: rotate(2deg); }
.hmi-piattaforme ul { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.hmi-piattaforme li { padding: .55rem 0 .55rem 2rem; border-bottom: 1px dashed var(--carta-3); position: relative; }
.hmi-piattaforme li::before { content: ""; position: absolute; left: .2rem; top: .95rem; width: 1rem; height: .8rem; background: var(--rosa); border-radius: 50% 50% 45% 45%; box-shadow: -4px -5px 0 -1px var(--rosa), 4px -5px 0 -1px var(--rosa); }
.hmi-cofanetto { background: var(--bosco-2); color: #efe6d0; border-radius: 16px; padding: 1.2rem 1.4rem; border: 2px solid var(--oro); box-shadow: inset 0 0 0 5px var(--bosco-2), inset 0 0 0 6px rgba(212, 168, 69, .5); }
.hmi-cofanetto .hmi-mano { color: var(--rosa); }
.hmi-cofanetto h4 { color: var(--oro-chiaro); font-size: 1.35rem; }
.hmi-cofanetto p:last-child { margin: 0; }
@media (min-width: 900px) { .hmi-insieme__sotto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Lettere ---------- */
.hmi-lettere { background: linear-gradient(rgba(20, 33, 26, .2), rgba(20, 33, 26, .2)), repeating-linear-gradient(0deg, #4a3220 0 46px, #422c1c 46px 48px); color: var(--inchiostro); }
.hmi-buste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); align-items: start; }
.hmi-busta { background: #f3e5c6; border-radius: 6px; box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6); }
.hmi-busta:nth-child(3n + 1) { transform: rotate(-1deg); } .hmi-busta:nth-child(3n + 2) { transform: rotate(.8deg); }
.hmi-busta summary {
	list-style: none; cursor: pointer; position: relative; display: grid; gap: .2rem;
	padding: 1.2rem 4.2rem 1.2rem 1.2rem; min-height: 6.5rem; border-radius: 6px;
	background:
		linear-gradient(155deg, transparent 49.5%, rgba(140, 100, 50, .25) 50%, transparent 51%) top left / 50% 60% no-repeat,
		linear-gradient(205deg, transparent 49.5%, rgba(140, 100, 50, .25) 50%, transparent 51%) top right / 50% 60% no-repeat,
		#f3e5c6;
}
.hmi-busta summary::-webkit-details-marker { display: none; }
.hmi-busta__saluto { font: 400 1.15rem var(--mano); color: var(--inchiostro-2); }
.hmi-busta__domanda { font: 700 1.15rem/1.25 var(--titoli); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hmi-busta__sigillo { position: absolute; right: 1rem; top: 50%; margin-top: -1.35rem; width: 2.7rem; height: 2.7rem; border-radius: 47% 53% 50% 48%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #c4553f, var(--ruggine) 60%, #6e2619); color: #f6d9b5; font: 800 1.15rem var(--titoli); box-shadow: 0 2px 0 #5b1f15, inset 0 0 0 3px rgba(255, 255, 255, .12); transition: transform .3s ease; }
.hmi-busta summary:hover .hmi-busta__sigillo { transform: rotate(-12deg) scale(1.06); }
.hmi-busta[open] .hmi-busta__sigillo { transform: scale(.7); opacity: .35; }
.hmi-busta__lettera { margin: 0 .6rem .6rem; padding: 1rem 1.1rem .8rem; background: #fffcf3; border-radius: 4px; background-image: repeating-linear-gradient(transparent 0 29px, rgba(110, 150, 190, .25) 29px 30px); line-height: 30px; }
.hmi-busta[open] .hmi-busta__lettera { animation: hmi-lettera .35s ease both; }
@keyframes hmi-lettera { from { opacity: 0; transform: translateY(-10px); } }
.hmi-busta__lettera p { margin: 0 0 .4rem; }
.hmi-busta__firma { font: 400 1.15rem var(--mano); color: var(--ruggine); text-align: right; }
.hmi-busta__firma::before { content: "con affetto, "; }

/* ---------- Porta ---------- */
.hmi-porta {
	color: #f3ead4; overflow: hidden; display: grid; gap: 2.5rem; justify-items: center; text-align: center;
	background: radial-gradient(ellipse at 50% 120%, var(--bosco-3), var(--bosco) 60%), var(--bosco);
	padding-bottom: 6rem;
}
.hmi-porta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 8%, #fff7 50%, transparent 51%), radial-gradient(2px 2px at 70% 15%, #fff9 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 30%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 55% 5%, #fff8 50%, transparent 51%); pointer-events: none; }
.hmi-porta__casa { position: relative; width: min(84vw, 360px); }
.hmi-porta__casa::before { content: ""; position: absolute; right: 22%; top: 8px; width: 30px; height: 62px; background: #7a6a58; box-shadow: inset 0 8px 0 #5e5042; z-index: -1; }
.hmi-porta__tetto::before { content: ""; }
.hmi-porta__casa > .hmi-porta__tetto { position: relative; }
.hmi-porta__fumo { position: absolute; right: calc(22% + 6px); top: -34px; width: 18px; height: 18px; border-radius: 50%; background: rgba(220, 214, 200, .5); box-shadow: 10px -18px 0 4px rgba(220, 214, 200, .35), 2px -40px 0 7px rgba(220, 214, 200, .22); animation: hmi-fumo-casa 4s ease-in-out infinite; }
@keyframes hmi-fumo-casa { 50% { transform: translate(6px, -8px); opacity: .7; } }
.hmi-porta__tetto { height: 90px; margin: 0 -24px; background: linear-gradient(#3f6b3a, #2f5229); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hmi-porta__muro { position: relative; height: 240px; background: #d9c9a4; background-image: radial-gradient(ellipse 30px 16px at 20% 30%, rgba(0, 0, 0, .08) 60%, transparent 62%), radial-gradient(ellipse 34px 18px at 78% 62%, rgba(0, 0, 0, .08) 60%, transparent 62%), radial-gradient(ellipse 26px 14px at 60% 20%, rgba(0, 0, 0, .07) 60%, transparent 62%); border-radius: 0 0 6px 6px; }
.hmi-porta__finestra { position: absolute; top: 46px; width: 54px; height: 50px; border-radius: 8px 8px 4px 4px; background: var(--lume); box-shadow: 0 0 30px rgba(255, 207, 112, .7), inset 0 0 0 4px #6b4b2e; }
.hmi-porta__finestra::after { content: ""; position: absolute; inset: 4px; background: linear-gradient(90deg, transparent 47%, #6b4b2e 47% 53%, transparent 53%), linear-gradient(transparent 47%, #6b4b2e 47% 53%, transparent 53%); }
.hmi-porta__finestra--sx { left: 26px; } .hmi-porta__finestra--dx { right: 26px; }
.hmi-porta__vano { position: absolute; left: 50%; bottom: 0; width: 118px; height: 170px; margin-left: -59px; border-radius: 59px 59px 0 0; background: #ffd98a; box-shadow: 0 0 0 7px #8a7a60; perspective: 600px; }
.hmi-porta__dentro { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: end center; padding-bottom: 6px; background: radial-gradient(ellipse at 50% 70%, #fff3c4, #ffcf70 60%, #e8a03f); overflow: hidden; }
.hmi-porta__dentro svg { width: 80px; height: auto; transform: scaleX(-1); }
.hmi-porta__anta {
	position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
	background: repeating-linear-gradient(90deg, #7a4f2c 0 27px, #6a4325 27px 29px);
	box-shadow: inset 0 0 0 4px #5a381e, inset 0 -30px 0 -26px #5a381e;
	transition: transform 1.1s cubic-bezier(.5, 0, .2, 1);
}
.hmi-porta__pomello { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 3px #8d6a21; }
.hmi-porta.is-aperta .hmi-porta__anta, .hmi-porta:focus-within .hmi-porta__anta { transform: rotateY(-78deg); }
.hmi-porta__casa::after { content: ""; position: absolute; left: 50%; bottom: -60px; width: 200px; height: 70px; margin-left: -100px; background: radial-gradient(ellipse at 50% 0, rgba(255, 207, 112, .55), transparent 70%); opacity: 0; transition: opacity 1.1s ease; }
.hmi-porta.is-aperta .hmi-porta__casa::after, .hmi-porta:focus-within .hmi-porta__casa::after { opacity: 1; }
.hmi-porta__testo { max-width: 40rem; }
.hmi-porta h2 { color: var(--oro-chiaro); }
.hmi-porta .hmi-pulsanti { justify-content: center; }
.hmi-ufficiali { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; font-size: .95rem; }
.hmi-ufficiali a { color: var(--oro-chiaro); text-underline-offset: 3px; }

/* ---------- Piede ---------- */
.hmi-piede { background: #0d1611; color: #b7ae99; text-align: center; font-size: .88rem; padding: 2rem 1rem 5.5rem; }
.hmi-piede p { max-width: 50rem; margin: 0 auto .6rem; }
.hmi-piede a { color: var(--oro-chiaro); }

/* ---------- Il topolino che ti accompagna ---------- */
.hmi-compagno { display: none; }
.js .hmi-compagno { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 52px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.js .hmi-compagno.is-visibile { opacity: 1; }
.hmi-compagno::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; background: repeating-linear-gradient(90deg, rgba(240, 212, 138, .55) 0 6px, transparent 6px 14px); }
.hmi-compagno__casetta { position: absolute; right: 10px; bottom: 6px; width: 46px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.hmi-compagno__topo { position: absolute; left: 0; bottom: 6px; width: 64px; height: auto; transform: translateX(var(--x, 12px)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); will-change: transform; }
.hmi-compagno.is-indietro .hmi-compagno__topo { transform: translateX(var(--x, 12px)) scaleX(-1); }
.hmi-compagno.is-cammina .hmi-topo__zampa--avanti { animation: hmi-passo .28s linear infinite alternate; }
.hmi-compagno.is-cammina .hmi-topo__zampa--dietro { animation: hmi-passo .28s linear infinite alternate-reverse; }
.hmi-compagno.is-cammina .hmi-compagno__topo { animation: hmi-saltella .28s ease-in-out infinite alternate; }
.hmi-topo__zampa { transform-box: fill-box; transform-origin: 50% 0; }
@keyframes hmi-passo { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes hmi-saltella { to { bottom: 9px; } }
.hmi-compagno.is-arrivato .hmi-compagno__casetta rect:nth-of-type(2) { fill: #fff3c4; }
@media (max-width: 699px) {
	.js .hmi-compagno { height: 40px; }
	.hmi-compagno__topo { width: 48px; }
	.hmi-compagno__casetta { width: 36px; }
}

/* ---------- Pagine di testo ---------- */
.hmi-pagina { min-height: 80vh; padding: 3rem 1rem 4rem; background: radial-gradient(ellipse at 50% 0, var(--bosco-3), var(--bosco) 70%); }
.hmi-pagina__logo { display: block; width: 120px; margin: 0 auto 1.6rem; }
.hmi-pagina__logo img { display: block; width: 100%; height: auto; }
.hmi-testo { max-width: 46rem; margin: 0 auto; padding: clamp(1.4rem, 1rem + 3vw, 3rem); border-radius: 12px; box-shadow: var(--ombra); overflow-wrap: anywhere; }
.hmi-testo h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.hmi-testo h2 { font-size: 1.5rem; margin-top: 1.6em; }
.hmi-testo a { color: var(--ruggine); }
.hmi-testo ul { padding-left: 1.2rem; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js .hmi-compagno { display: none; }
	.hmi-testa__logo { animation: none; }
}