/* Pause modal — quieter than result modal */
.modal--pause .modal__panel {
  width: min(100%, 300px);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-paper-dim);
  border-color: var(--color-ink-muted);
}

.modal--pause .modal__title {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

.modal--pause .btn-group {
  margin-top: var(--space-5);
}

/*
  Display ~160px from 512px source.
  Keep full opacity + no blur filters — softness was causing muddy pixels.
  Quiet tone comes from muted modal chrome, not from filtering the sprite.
*/
.pause-anim {
  position: relative;
  width: min(160px, 44vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--space-3);
  animation: pause-bob 2.8s var(--ease-snap) infinite;
}

.pause-anim__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  opacity: 0;
  /* Ping-pong: 1 → 2 → 3 → 2 → 1 */
  animation: pause-frame-1 3.6s steps(1, end) infinite;
}

.pause-anim__frame:nth-child(2) {
  animation-name: pause-frame-2;
}

.pause-anim__frame:nth-child(3) {
  animation-name: pause-frame-3;
}

/*
  Timeline (3.6s):
  0–20%  frame1 open smile
  20–40% frame2 happy closed
  40–60% frame3 rest closed
  60–80% frame2
  80–100% frame1
*/
@keyframes pause-frame-1 {
  0%,
  19% {
    opacity: 1;
  }
  20%,
  79% {
    opacity: 0;
  }
  80%,
  100% {
    opacity: 1;
  }
}

@keyframes pause-frame-2 {
  0%,
  19% {
    opacity: 0;
  }
  20%,
  39% {
    opacity: 1;
  }
  40%,
  59% {
    opacity: 0;
  }
  60%,
  79% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes pause-frame-3 {
  0%,
  39% {
    opacity: 0;
  }
  40%,
  59% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}

@keyframes pause-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.pause-hint {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  .pause-anim,
  .pause-anim__frame {
    animation: none;
  }

  .pause-anim__frame:first-child {
    opacity: 1;
  }
}