.machine-hint {
  position: absolute;
  left: 86%;
  top: 52%;
  z-index: 7;
  width: max-content;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  transform: translateX(-50%) rotate(-5deg);
  transition: opacity 180ms ease;
  pointer-events: none;
}

.machine-hint span { display: block; text-align: left; font-size: 18px; line-height: 1; }
.machine-button.is-sequencing .machine-hint,
.machine-button[data-stage="result"] .machine-hint { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .machine-button:not(.is-sequencing):not([data-stage="result"]):hover .handle-turn img { transform: rotate(-10deg); }
}

.machine-button:not(.is-sequencing):not([data-stage="result"]):focus-visible .handle-turn img { transform: rotate(-10deg); }

.overlay.is-inserting { pointer-events: none; }
.overlay.is-inserting .overlay-backdrop { opacity: 0; transition: opacity 400ms ease; }
.overlay.is-inserting .instruction-sheet {
  transform-origin: 50% 75%;
  animation: sheet-insert 400ms cubic-bezier(0.45, 0, 0.4, 1) both;
}

.spin-result .capsule-half {
  position: absolute;
  inset: 0;
  animation-duration: var(--result-intro-duration, 800ms);
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  animation-fill-mode: both;
}

.spin-result .capsule-half-top {
  z-index: 3;
  clip-path: url("#capsule-lid-clip");
  animation-name: capsule-unseal-top;
}

.spin-result .capsule-half-bottom {
  z-index: 1;
  clip-path: url("#capsule-bowl-clip");
  animation-name: capsule-unseal-bottom;
}

.capsule-mouth,
.capsule-lid-rim {
  position: absolute;
  left: 4%;
  top: 39%;
  width: 92%;
  height: 13%;
  border: 3px solid #36465f;
  border-radius: 50%;
  animation-duration: var(--result-intro-duration, 800ms);
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  animation-fill-mode: both;
}

.capsule-mouth {
  z-index: 2;
  background: linear-gradient(180deg, #36465f, rgba(var(--capsule-flash-rgb), 0.8));
  box-shadow: inset 0 -3px 0 rgba(var(--capsule-flash-rgb), 0.9);
  animation-name: capsule-unseal-bottom, capsule-rim-reveal;
}

.capsule-lid-rim {
  z-index: 4;
  background: linear-gradient(180deg, #b6d2df, #e2eff5);
  animation-name: capsule-unseal-top, capsule-rim-reveal;
}

.spin-result .result-actions,
.spin-result .chance-status {
  animation: result-controls-arrive var(--result-intro-duration, 800ms) ease both;
}

.spin-result .result-actions .primary-action {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 3px 0 rgba(132, 78, 44, 0.18);
}

.spin-result .result-actions .secondary-action {
  margin-top: 4px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}

.spin-result .result-actions button:hover,
.spin-result .result-actions button:focus-visible {
  border-color: var(--accent-strong);
  background: #fff2ce;
}

@keyframes sheet-insert {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  35% { opacity: 1; transform: translateY(-10px) scale(0.96, 0.92); }
  100% { opacity: 0; transform: translateY(80px) scale(0.25, 0.08); }
}

@keyframes capsule-unseal-top {
  0%, 12% { transform: translate(0, 0) rotate(0deg); }
  38% { transform: translate(-6px, -8px) rotate(-5deg); }
  100% { transform: translate(-18px, -26px) rotate(-14deg); }
}

@keyframes capsule-unseal-bottom {
  0%, 12% { transform: translate(0, 0) rotate(0deg); }
  38% { transform: translate(4px, 6px) rotate(4deg); }
  100% { transform: translate(18px, 16px) rotate(12deg); }
}

@keyframes capsule-rim-reveal {
  0%, 18% { opacity: 0; }
  40%, 100% { opacity: 1; }
}

@keyframes note-unfold {
  0%, 24% { opacity: 0; transform: translateY(-32px) scale(0.65, 0.08); }
  62% { opacity: 1; transform: translateY(3px) scale(1, 1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-controls-arrive {
  0%, 58% { opacity: 0; }
  100% { opacity: 1; }
}

.spin-result .result-actions button[hidden] { display: none; }

@media (max-width: 820px) {
  .machine-hint { top: 44%; font-size: 11px; padding: 6px 10px; }
}