/* Phase 3D: check, promotion, and game-over drama. These effects are
   presentation-only and are applied only after accepted Chess state renders. */
.chess-appearance-feedback {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  padding: .72rem .85rem;
}

.chess-appearance-feedback[aria-pressed="true"] {
  border-color: rgba(172, 221, 190, .52);
  box-shadow: inset 0 0 0 1px rgba(172, 221, 190, .14);
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] {
  position: relative;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square.chess-storybook-check-pulse {
  animation: chess-storybook-check-square .6s ease-out both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece.chess-storybook-check-react {
  z-index: 9;
  transform-origin: 50% 88%;
  animation: chess-storybook-check-king .6s cubic-bezier(.2,.72,.28,1) both;
}

@keyframes chess-storybook-check-square {
  0% { box-shadow: inset 0 0 0 0 rgba(137, 34, 34, 0); }
  28% { box-shadow: inset 0 0 0 5px rgba(153, 35, 35, .68), inset 0 0 22px rgba(255, 221, 150, .3); }
  62% { box-shadow: inset 0 0 0 3px rgba(137, 34, 34, .35), inset 0 0 12px rgba(255, 221, 150, .16); }
  100% { box-shadow: inset 0 0 0 2px rgba(137, 34, 34, .12); }
}

@keyframes chess-storybook-check-king {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  20% { transform: translate3d(-5.5%, -5%, 0) rotate(-3.2deg); }
  40% { transform: translate3d(5%, -2%, 0) rotate(2.6deg); }
  60% { transform: translate3d(-3%, -.6%, 0) rotate(-1.5deg); }
  80% { transform: translate3d(1.6%, 0, 0) rotate(.7deg); }
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-promotion-pawn,
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-promotion-halo {
  position: absolute;
  pointer-events: none;
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-promotion-pawn {
  z-index: 11;
  inset: 6%;
  display: grid;
  place-items: center;
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-promotion-pawn > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-promotion-halo {
  z-index: 8;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 238, 176, .86);
  box-shadow: 0 0 22px rgba(255, 232, 137, .62);
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece.chess-storybook-promoting > .chess-svg-piece-image {
  animation: chess-storybook-promotion-reveal .72s cubic-bezier(.18,.78,.28,1) both !important;
  transform-origin: 50% 88%;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-promotion-pawn {
  animation: chess-storybook-promotion-pawn .7s ease-out both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-promotion-halo {
  animation: chess-storybook-promotion-halo .72s ease-out both;
}

@keyframes chess-storybook-promotion-reveal {
  0%, 24% { opacity: 0; transform: translate3d(0, 13%, 0) scale(.68); }
  56% { opacity: 1; transform: translate3d(0, -10%, 0) scale(1.13); }
  78% { transform: translate3d(0, 2%, 0) scale(.98); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes chess-storybook-promotion-pawn {
  0%, 18% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  56% { opacity: .62; transform: translate3d(0, -22%, 0) scale(.84); }
  100% { opacity: 0; transform: translate3d(0, -40%, 0) scale(.56); }
}

@keyframes chess-storybook-promotion-halo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
  32% { opacity: 1; }
  70% { opacity: .58; transform: translate(-50%, -50%) scale(1.28); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.46); }
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"].chess-storybook-result-checkmate {
  animation: chess-storybook-checkmate-board .75s ease-out both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"].chess-storybook-result-decisive {
  animation: chess-storybook-decisive-board .62s ease-out both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"].chess-storybook-result-draw {
  animation: chess-storybook-draw-board .72s ease-out both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece.chess-storybook-winner-checkmate {
  z-index: 9;
  transform-origin: 50% 88%;
  animation: chess-storybook-winner-checkmate .72s cubic-bezier(.2,.82,.28,1) var(--chess-celebration-delay, 0ms) both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece.chess-storybook-winner-decisive {
  z-index: 9;
  transform-origin: 50% 88%;
  animation: chess-storybook-winner-decisive .58s ease-out var(--chess-celebration-delay, 0ms) both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece.chess-storybook-defeated-king {
  z-index: 9;
  transform-origin: 50% 88%;
  animation: chess-storybook-defeated-king .76s ease-out .1s both;
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-celebration-dew {
  position: absolute;
  z-index: 12;
  left: var(--chess-celebration-left);
  top: var(--chess-celebration-top);
  width: 8px;
  height: 10px;
  border-radius: 58% 42% 64% 36% / 68% 48% 52% 32%;
  background: rgba(187, 228, 241, .96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .62), 0 2px 6px rgba(23, 74, 94, .24);
  pointer-events: none;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-celebration-dew {
  animation: chess-storybook-celebration-dew 1.18s cubic-bezier(.18,.68,.28,1) var(--chess-celebration-delay, 0ms) both;
}

@keyframes chess-storybook-checkmate-board {
  0%, 100% { transform: translate3d(0, 0, 0); }
  16% { transform: translate3d(-2px, 0, 0); }
  32% { transform: translate3d(2px, 0, 0); }
  48% { transform: translate3d(-1.2px, 0, 0); }
  64% { transform: translate3d(.8px, 0, 0); }
}

@keyframes chess-storybook-decisive-board {
  0% { box-shadow: 0 0 0 0 rgba(255, 232, 159, 0); }
  45% { box-shadow: 0 0 0 4px rgba(255, 232, 159, .42), 0 0 18px rgba(255, 232, 159, .16); }
  100% { box-shadow: 0 0 0 0 rgba(255, 232, 159, 0); }
}

@keyframes chess-storybook-draw-board {
  0%, 100% { opacity: 1; }
  48% { opacity: .9; }
}

@keyframes chess-storybook-winner-checkmate {
  0% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  48% { transform: translate3d(0, -16%, 0) rotate(1.8deg) scale(1.06); }
  72% { transform: translate3d(0, 3%, 0) rotate(-.7deg) scale(.985); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes chess-storybook-winner-decisive {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  52% { transform: translate3d(0, -9%, 0) scale(1.03); }
}

@keyframes chess-storybook-defeated-king {
  0% { transform: translate3d(0, 0, 0) rotate(0); }
  44% { transform: translate3d(0, 5%, 0) rotate(-4.2deg) scale(.975); }
  100% { transform: translate3d(0, 2.5%, 0) rotate(-2.1deg) scale(.99); }
}

@keyframes chess-storybook-celebration-dew {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.58) rotate(0); }
  16% { opacity: 1; }
  68% { opacity: .94; }
  100% {
    opacity: 0;
    transform: translate3d(var(--chess-celebration-x), var(--chess-celebration-y), 0) scale(1.16) rotate(190deg);
  }
}

html[data-chess-fx-motion="reduced"] #chessBoard[data-chess-piece-set="whatdewStorybook"] :is(
  .chess-storybook-check-react,
  .chess-storybook-promoting,
  .chess-storybook-winner,
  .chess-storybook-defeated-king,
  .chess-fx-promotion-pawn,
  .chess-fx-promotion-halo,
  .chess-fx-celebration-dew
) {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #chessBoard[data-chess-piece-set="whatdewStorybook"] :is(
    .chess-storybook-check-react,
    .chess-storybook-promoting,
    .chess-storybook-winner,
    .chess-storybook-defeated-king,
    .chess-fx-promotion-pawn,
    .chess-fx-promotion-halo,
    .chess-fx-celebration-dew
  ) {
    animation: none !important;
  }
}