/* A lawn seen from above: mown stripes by day, the same grass at night. One ball, and whoever keeps fetching it. */
:root {
  --field: #1c5536;
  --deep: #123c26;
  --print: rgb(0 0 0 / 0.24);
}
@media (prefers-color-scheme: dark) {
  :root {
    --field: #0b1d14;
    --deep: #050e09;
    --print: rgb(246 239 220 / 0.13);
  }
}
.stay {
  display: flex;
  align-items: baseline;
  padding-bottom: 0.14em;
  font-size: clamp(7rem, 40vw, 25rem);
  line-height: 0.85;
}
/* The full stop. It leaves its sentence when thrown and is brought back to it (site.js). */
.ball {
  --z: 0;
  position: relative;
  z-index: 2;
  width: 0.18em;
  height: 0.18em;
  margin-left: 0.03em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: inherit;
  box-shadow: 0 calc(0.03em + var(--z) * 0.5px) calc(0.04em + var(--z) * 0.4px) rgb(0 0 0 / 0.4);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ball::after {
  content: "";
  position: absolute;
  inset: -0.75rem;
  border-radius: 50%;
}
.ball svg {
  display: block;
}
.ball circle {
  fill: var(--ball);
}
.ball path {
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.line {
  max-width: 24ch;
  min-height: 3em;
  margin-top: 1rem;
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  line-height: 1.3;
  text-wrap: balance;
}
.hint {
  margin-top: 0.75rem;
  opacity: 0;
}
.js .hint {
  opacity: 1;
}
.played .hint {
  visibility: hidden;
}
@keyframes drop {
  0% {
    transform: translateY(-130vh);
    animation-timing-function: ease-in;
  }
  50%,
  78%,
  100% {
    transform: none;
    animation-timing-function: ease-out;
  }
  64% {
    transform: translateY(-170%);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(-45%);
    animation-timing-function: ease-in;
  }
}
@media (prefers-reduced-motion: no-preference) {
  h1 {
    animation: rise 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .ball svg {
    animation: drop 1.3s 0.9s both;
  }
  .line {
    animation: rise 1.4s 0.5s both;
  }
  .js .hint {
    animation: show 1s 2.8s both;
  }
}