:root {
  /* fallback iniziale, aggiornato via JS per avere 100vh reali su mobile */
  --vh: 1vh;
  --piece-size: 100px;
  --piece-bottom-size: 200px;
}

@media (max-width: 1024px) {
  :root {
    /* stesse proporzioni di smartphone anche su tablet */
    --piece-size: clamp(70px, 12vw, 140px);
    --piece-bottom-size: clamp(120px, 28vw, 260px);
  }
}

html, body {
  background: #fff;
  margin: 0;
  height: 100%;
}

.generale{
  /*border: 2px solid red;*/
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: auto;
}

.container{
  width: 100%;
  min-height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
}

.p01, .p02, .p03, .p04{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /* ancora il centro */
}

.p01 img, .p02 img, .p03 img, .p04 img{
  width: var(--piece-size);
  height: auto;
}

.p04 img{
  width: var(--piece-bottom-size);
  height: auto;
}