.shin-mode {
  overflow: hidden;
}

.shin-chicken-stage {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 184, 48, 0.34), transparent 42%),
    #9e2109;
  isolation: isolate;
}

.shin-chicken-piece {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 8px rgba(55, 10, 0, 0.34));
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--rotation)) scale(0.25);
  animation: shin-chicken-pop 520ms cubic-bezier(0.2, 0.9, 0.3, 1.25) var(--delay) forwards;
}

.shin-mode-hint {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10001;
  max-width: calc(100vw - 32px);
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff7df;
  background: rgba(65, 12, 0, 0.78);
  box-shadow: 0 8px 30px rgba(43, 7, 0, 0.3);
  font: 700 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transform: translate(-50%, 20px);
  opacity: 0;
  animation: shin-hint-in 280ms ease 620ms forwards;
}

@keyframes shin-chicken-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -115%) rotate(calc(var(--rotation) - 16deg)) scale(0.25);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(calc(var(--rotation) + 4deg)) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1);
  }
}

@keyframes shin-hint-in {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shin-chicken-piece,
  .shin-mode-hint {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}