#grammarExercise .grammar-nav button:last-child {
  font-size: clamp(8px, 1.15vw, 18px);
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* Keep the cup clear of navigation while the cropped torso meets the stage bottom. */
#grammarExercise:has(.finish-stage) .grammar-nav {
  top: 2.1% !important;
  bottom: auto !important;
}

.cook-scene.finish-stage {
  inset: 0;
  display: block !important;
  overflow: hidden;
  text-align: center;
}

.finish-background, .finish-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.finish-background { object-fit: cover; }
.finish-wash { background: rgb(255 248 236 / 48%); }

.finish-heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 94%;
  margin: 0;
  padding: 0.15em 0.7em;
  border-radius: 12px;
  background: #fff4dce8;
  color: #56351d;
}

.finish-heading { top: 13%; font-size: clamp(13px, 2.5vw, 32px); }

.finish-bear {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 60%;
  max-width: 90%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.finish-bear:focus-visible { outline: 3px solid #92561f; outline-offset: -4px; }

.finish-art {
  position: relative;
  display: block;
  height: 100%;
  transform-origin: bottom center;
  animation: finish-breathe 3.2s ease-in-out infinite;
}

.finish-art img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.finish-sparkles { position: absolute; left: 75%; top: 56%; color: #a56000; pointer-events: none; }
.finish-sparkles i { position: absolute; font-size: clamp(14px, 2.4vw, 30px); font-style: normal; opacity: 0; }
.finish-sparkles i:nth-child(2) { left: 1em; top: -0.8em; animation-delay: 0.15s; }
.finish-sparkles i:nth-child(3) { left: 0.9em; top: 0.7em; animation-delay: 0.3s; }
.finish-sip-ring {
  position: absolute;
  left: 55%;
  top: 63%;
  width: 26%;
  aspect-ratio: 1;
  border: 2px solid #ffc34c;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.is-sipping .finish-sparkles i { animation-name: finish-twinkle; animation-duration: 0.85s; }
.is-sipping .finish-sip-ring { animation: finish-pulse 0.6s ease-out 2; }

/* Bottom-centred scaling keeps the entire horizontal cut edge on the baseline. */
@keyframes finish-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.008, 1.012); }
}
@keyframes finish-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.1); }
}
@keyframes finish-pulse {
  from { opacity: 0.8; transform: scale(0.65); }
  to { opacity: 0; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .finish-art, .is-sipping .finish-sparkles i, .is-sipping .finish-sip-ring { animation: none; }
  .is-sipping .finish-sparkles i { opacity: 1; }
}