/* Attrezzi che cadono */
:root {
  --fondo: #eef3ef;
  --cassetta: #f6f7f3;
  --inchiostro: #07201f;
  --tenue: #5b706d;
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--inchiostro);
  background: var(--fondo);
}
.pagina {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 28px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(18px, 4vw, 56px);
}
.testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}
.sopra {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 620;
  color: var(--tenue);
}
.titolo {
  margin: 0;
  font-size: clamp(34px, 6vw, 88px);
  font-weight: 760;
  font-stretch: 94%;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.scuoti {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--cassetta);
  font: 640 15px/1 'Mona Sans Variable', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.16s ease-out;
}
.scuoti:active {
  transform: scale(0.97);
}

/* la cassetta: la fisica lavora dentro questo riquadro */
.cassetta {
  position: relative;
  flex: 1;
  min-height: 420px;
  border-radius: 22px;
  background: var(--cassetta);
  box-shadow: inset 0 0 0 1px rgba(7, 32, 31, 0.1), inset 0 -30px 60px -40px rgba(7, 32, 31, 0.25);
  overflow: clip;
}
.attrezzi {
  margin: 0;
  padding: 0;
  list-style: none;
}
.attrezzo {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.5em 1.1em 0.55em;
  border-radius: 999px;
  font-size: clamp(16px, 1.9vw, 26px);
  font-weight: 720;
  font-stretch: 96%;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--inchiostro), 0 6px 0 -1px var(--inchiostro);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* solo le pillole fermano lo scorrimento col dito: fuori dalle pillole la pagina scorre */
  touch-action: none;
  visibility: hidden;
  will-change: transform;
}
.attrezzo:active {
  cursor: grabbing;
}
.t1 { background: #ff8a3d; }
.t2 { background: #86cfc4; }
.t3 { background: #ffd27a; }
.t4 { background: #07201f; color: #f6f7f3; box-shadow: 0 0 0 2px #07201f, 0 6px 0 -1px #3aa39b; }

/* senza fisica (movimento ridotto o niente Matter): una fila ordinata */
.ferma .attrezzi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px;
}
.ferma .attrezzo {
  position: static;
  visibility: visible;
  cursor: default;
}
.ferma .scuoti {
  display: none;
}