html, body {
  margin: 0; height: 100%; overflow: hidden; background: #111;
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body { position: fixed; inset: 0; height: 100dvh; }
@media (hover: hover) { body { cursor: none; } }

.item { position: absolute; pointer-events: none; transform: translate(-50%, -50%); }
/* No rotation: a tilted square looks like a diamond, which would teach the wrong word */
.shape { animation: pop 2.6s ease-out forwards; transform: scale(0); }
.glyph {
  display: grid; place-items: center; line-height: 1;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  font-weight: 900;
}
@keyframes pop {
  0%   { transform: scale(0); opacity: 1; }
  20%  { transform: scale(1.15); opacity: 1; }
  30%  { transform: scale(1); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: scale(0.95); opacity: 0; }
}
/* The name stays upright under the item so it's easy to read */
.label {
  position: absolute; left: 50%; top: 100%; margin-top: 12px;
  color: #fff; font: 800 clamp(28px, 6vmin, 64px) -apple-system, system-ui, sans-serif;
  white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  animation: name 2.6s ease-out forwards; transform: translateX(-50%) scale(0);
}
@keyframes name {
  0%   { transform: translateX(-50%) scale(0); opacity: 1; }
  20%  { transform: translateX(-50%) scale(1.1); opacity: 1; }
  30%  { transform: translateX(-50%) scale(1); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 0; }
}

#hint {
  position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom));
  text-align: center; color: #777; font: 600 20px -apple-system, system-ui, sans-serif; pointer-events: none;
}
/* Hold-to-exit: a quick baby tap does nothing, a grown-up holds for 1.5s */
#home {
  position: fixed; z-index: 10;
  top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left));
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; opacity: 0.35;
  background: conic-gradient(#fff calc(var(--p, 0) * 1turn), #333 0);
}
#home span { width: 44px; height: 44px; border-radius: 50%; background: #111; display: grid; place-items: center; }
#home.holding { opacity: 1; }