* { box-sizing: border-box; }

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, #fffaf0 0%, #fbf6ec 55%, #f3e9d8 100%);
}

.stage { width: min(94vmin, 760px); }
.stage svg { width: 100%; height: auto; display: block; }

/* zshot icon: scale/translate about its own centre */
#zicon {
  transform-box: fill-box;
  transform-origin: center;
}

/* hearts: hidden until the pop phase; pop scales about the heart centre */
.heart {
  fill: #ff3b6b;
  stroke: #c81d4f;
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* stars are positioned in root coordinates, so scale/rotate about their own
   geometry (which is centred on the origin) needs no transform-box. */
.star {
  fill: #ffb43f;
  stroke: #e68a00;
  stroke-width: 1;
  opacity: 0;
}