/* The skipping stone button: a little ceramic dish of clear water over pale sand, seen from above at an angle. The
   water, the sand, the light and the stone are drawn by the script on two canvases (the colours of the water come
   from here); the dish, its rim and the words come from this file.
   For a lake of green water over dark gravel: --sand #8d8270, --water #8fc9a8, --glow #0d2a22, --ink #f4fbf7. */
:root {
  --page: #ffffff;          /* the page */
  --rim: #f8f6f1;           /* the glaze of the ceramic dish */
  --rim-shade: #e4dfd5;     /* the glaze where it turns away from the light */
  --wall: #f1eee8;          /* the inside wall of the dish */
  --sand: #ecdab6;          /* the sand on the bottom */
  --water: #8fd8df;         /* what the water lets through of the sand's colour: the bluer, the deeper it looks */
  --glow: #04202a;          /* the light the water gives back by itself, where the sand is in shadow */
  --sun: #fffaea;           /* the sunlight gathered on the sand */
  --sky: #eef8fa;           /* the sky the water reflects */
  --stone: #8a9396;         /* the flat stone */
  --ink: #06303a;           /* the words and the icon */
  --focus: #0b7d8a;         /* the ring of the keyboard focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Figtree Variable', 'Figtree', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 72px 16px;
}

.skip {
  display: grid;
  justify-items: center;
}

/* ---------------------------------------------------------------- the dish */
/* the rim of glazed ceramic; the near lip is a little thicker than the far one, as a dish seen from above at an
   angle. The water canvas sits inside it, the air canvas (the stone, the splashes) spills out round it */
.skip__dish {
  position: relative;
  display: block;
  width: min(320px, calc(100vw - 48px));
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff 0%, var(--rim) 42%, var(--rim-shade) 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1.5px 0 color-mix(in srgb, var(--rim-shade) 70%, #6b5a40),
    0 0 0 1px rgba(32, 52, 56, 0.07),
    0 1px 1px rgba(32, 52, 56, 0.07),
    0 10px 20px -10px rgba(12, 82, 94, 0.36),
    0 22px 34px -24px rgba(12, 82, 94, 0.32);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  /* a finger dragged across stirs the water; up and down it still scrolls the page */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.skip__dish:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1.5px 0 color-mix(in srgb, var(--rim-shade) 70%, #6b5a40),
    0 0 0 1px rgba(32, 52, 56, 0.08),
    0 1px 1px rgba(32, 52, 56, 0.08),
    0 6px 12px -8px rgba(12, 82, 94, 0.4),
    0 14px 24px -20px rgba(12, 82, 94, 0.3);
}

.skip__dish:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

html[data-using='pointer'] .skip__dish:focus-visible {
  outline: none;
}

/* the water: inside the rim, 3 pixels from the far edge and the ends, 5 from the near lip */
.skip__water {
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 8px);
  border-radius: 26px;
  box-shadow: 0 0 0 0.5px rgba(70, 60, 40, 0.16);
  pointer-events: none;
}

/* the stone and the splashes fly over the rim and the page too: the canvas is larger than the dish */
.skip__air {
  position: absolute;
  left: -56px;
  top: -30px;
  width: calc(100% + 68px);
  height: calc(100% + 42px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the words */
.skip__label {
  position: absolute;
  inset: 0 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.skip__words {
  font-size: 17px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* the skip icon, and the tick that takes its place once the stone has sunk */
.skip__icons {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  flex: none;
}

.skip__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.skip__tri {
  fill: currentColor;
  stroke-width: 1.2;
}

.skip__icon--done {
  opacity: 0;
}

@media (max-width: 380px) {
  .skip__words {
    font-size: 16px;
  }

  /* la tela dell'aria sporge 56 px a sinistra del piatto (il sasso arriva da lì): sullo schermo stretto il piatto si
     stringe quanto basta perché il sasso parta dentro lo schermo */
  .skip__dish {
    width: min(320px, calc(100vw - 104px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip__dish,
  .skip__dish:active {
    transform: none;
  }

  .skip__dish:active {
    filter: brightness(0.97);
  }
}