/* A drawn cat coin. All movement stays in the illustration's two-dimensional plane. */
.coin-interaction {
  --coin-ink: #112e55;
  --coin-gold: #ffdc35;
  --coin-size: clamp(210px, 20vw, 260px);
  position: relative;
  display: grid;
  justify-items: center;
  isolation: isolate;
  width: max-content;
  max-width: 100%;
  color: var(--coin-ink);
}
.coin-grab {
  position: relative;
  display: block;
  width: var(--coin-size);
  height: var(--coin-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.coin-grab:active, .coin-grab.is-dragging { cursor: grabbing; }
.coin-grab:focus-visible { outline: 3px dashed var(--coin-ink); outline-offset: 9px; }
.coin-object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate(var(--coin-x, 0px), var(--coin-y, 0px)) rotate(var(--coin-rock, -9deg)) scale(var(--coin-scale-x, 1), var(--coin-scale-y, 1));
  transform-origin: 50% 65%;
  pointer-events: none;
}
.coin-face { position: absolute; inset: 0; display: block; }
.coin-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
.coin-face-back { display: none; }
.coin-grab[data-coin-face='back'] .coin-face-back { display: block; }
.coin-grab[data-coin-face='back'] .coin-face-front { display: none; }
.coin-drawn-edge { fill: var(--coin-ink); }
.coin-drawn-face { fill: var(--coin-gold); stroke: var(--coin-ink); stroke-width: 6; }
.coin-drawn-ring { fill: none; stroke: #dbad19; stroke-width: 3; }
.coin-cat-solid { fill: var(--coin-ink); }
.coin-cat-cutout { fill: var(--coin-gold); }
.coin-whiskers { fill: none; stroke: var(--coin-ink); stroke-width: 5.5; stroke-linecap: round; }
.coin-glint {
  fill: none;
  stroke: #fff3a8;
  stroke-width: 8;
  stroke-linecap: round;
  transform: translateX(var(--coin-glint-x, 0px));
  opacity: .86;
}
.coin-glint-small { stroke-width: 5; }
.coin-shadow {
  position: absolute;
  z-index: -1;
  width: 64%;
  height: 7%;
  left: 18%;
  bottom: -8%;
  border-radius: 50%;
  background: #112e551c;
  transform: translateX(var(--coin-shadow-x, 0px)) scaleX(var(--coin-shadow-scale, 1));
  pointer-events: none;
}
.coin-interaction > #coin-instruction {
  margin: 25px 0 0;
  font: 500 11px/1.4 var(--ui, sans-serif);
  letter-spacing: .015em;
  text-align: center;
}
.coin-reaction {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.coin-grab.is-dragging .coin-glint { stroke: #fff9d2; }
@media (max-width: 600px) {
  .coin-interaction { --coin-size: clamp(135px, 43vw, 175px); }
  .coin-interaction > #coin-instruction { margin-top: 19px; font-size: 10px; }
}