/* La griglia liquida */
:root {
  --fondo: #0b3b39;
  --linea: rgba(238, 243, 239, 0.2);
  --pastiglia: rgba(238, 243, 239, 0.1);
  --testo: #eef3ef;
  /* le misure della griglia: le cambia lo script, in vw e in percentuali */
  --c1: 40vw;
  --r1: 55%;
  --c2: 35%;
  --r2: 22%;
  --r3: 30%;
  --c3: 60%;
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--testo);
  overflow: hidden;
}
.palco {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding: 18px;
  /* il dito può muovere la griglia senza far scorrere la pagina */
  touch-action: none;
}

.griglia {
  display: grid;
  grid-template-columns: var(--c1) 1fr;
  gap: 6px;
  height: 100%;
  transform-origin: 50% 50%;
}
.colonna,
.sotto,
.mezzo {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.colonna--sx { grid-template-rows: var(--r1) 1fr; }
.sotto { grid-template-columns: var(--c2) 1fr; }
.colonna--dx { grid-template-rows: var(--r2) 1fr var(--r3); }
.mezzo { grid-template-columns: var(--c3) 1fr; }
/* raggi diversi di proposito: un angolo stretto, uno largo, un lato a pillola */
.cella {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--linea);
  border-radius: 14px;
}
.c-a { border-radius: 14px 14px 14px 60px; }
.c-b { border-radius: 10px; }
.c-c { border-radius: 999px 999px 14px 14px; }
.c-d { border-radius: 14px 999px 999px 14px; }
.c-e { border-radius: 14px; }
.c-f { border-radius: 999px; }
.c-g { border-radius: 60px 14px 14px 14px; }

.lato {
  position: absolute;
  top: 50%;
  margin: 0;
  font-size: 11px;
  font-weight: 640;
  font-stretch: 120%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  translate: 0 -50%;
  opacity: 0.8;
}
.lato--sx { left: 30px; }
.lato--dx { right: 30px; }

/* il marchio a pastiglie, al centro */
.marchio {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 6px;
  margin: 0;
  translate: -50% -50%;
  font-weight: 400;
  pointer-events: none;
}
.pastiglia {
  display: grid;
  place-items: center;
  height: clamp(52px, 7.4vw, 110px);
  padding: 0 0.42em;
  overflow: clip;
  background: var(--pastiglia);
  font-size: clamp(30px, 4.6vw, 70px);
  line-height: 1;
  white-space: nowrap;
}
.pastiglia--quadra {
  border-radius: 6px;
  font-weight: 760;
  font-stretch: 75%;
  letter-spacing: -0.01em;
}
.pastiglia--tonda {
  border-radius: 999px;
  font-weight: 300;
  font-stretch: 125%;
}
.suggerimento {
  position: absolute;
  left: 50%;
  bottom: 30px;
  margin: 0;
  font-size: 13px;
  font-weight: 560;
  translate: -50% 0;
  opacity: 0.7;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .lato {
    display: none;
  }
  .marchio {
    flex-direction: column;
    align-items: center;
  }
  .suggerimento {
    white-space: normal;
    text-align: center;
    width: 80%;
  }
}