#chessBoard .chess-piece.chess-svg-rendered {
  position: relative;
  display: grid;
  place-items: center;
  width: 88%;
  height: 88%;
  font-size: 0;
  line-height: 0;
  filter: none;
  pointer-events: none;
}

#chessBoard .chess-svg-piece-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .24));
}

#chessBoard .chess-svg-piece-image[data-whatdew-team="green"] {
  filter:
    drop-shadow(0 0 1.25px rgba(255, 244, 210, .95))
    drop-shadow(0 2px 1px rgba(0, 0, 0, .28));
}

#chessBoard .chess-piece.chess-svg-rendered[data-whatdew-team]::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 3%;
  width: 52%;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 241, 210, .78);
  pointer-events: none;
}

#chessBoard .chess-piece.chess-svg-rendered[data-whatdew-team="blue"]::after {
  background: #184f99;
}

#chessBoard .chess-piece.chess-svg-rendered[data-whatdew-team="green"]::after {
  background: #155e35;
}

/* Phase 3B visibility pass: Storybook pieces idle as readable characters,
   not synchronized tokens. The board's canonical square data supplies
   deterministic timing variation, while the Phase 3A FX mode gate stops
   motion for reduced-motion and hidden document states. Classic pieces never
   match these selectors. */
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square {
  --chess-idle-file-offset: 0s;
  --chess-idle-rank-offset: 0s;
  --chess-idle-duration-offset: 0s;
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="a"] { --chess-idle-file-offset: -.11s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="b"] { --chess-idle-file-offset: -.83s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="c"] { --chess-idle-file-offset: -1.47s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="d"] { --chess-idle-file-offset: -2.09s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="e"] { --chess-idle-file-offset: -.46s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="f"] { --chess-idle-file-offset: -1.72s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="g"] { --chess-idle-file-offset: -2.41s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square^="h"] { --chess-idle-file-offset: -1.16s; }

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="1"] { --chess-idle-rank-offset: -.14s; --chess-idle-duration-offset: .08s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="2"] { --chess-idle-rank-offset: -.61s; --chess-idle-duration-offset: -.12s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="3"] { --chess-idle-rank-offset: -1.03s; --chess-idle-duration-offset: .16s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="4"] { --chess-idle-rank-offset: -.28s; --chess-idle-duration-offset: -.06s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="5"] { --chess-idle-rank-offset: -1.37s; --chess-idle-duration-offset: .11s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="6"] { --chess-idle-rank-offset: -.72s; --chess-idle-duration-offset: -.15s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="7"] { --chess-idle-rank-offset: -1.89s; --chess-idle-duration-offset: .04s; }
#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square[data-square$="8"] { --chess-idle-rank-offset: -.45s; --chess-idle-duration-offset: -.09s; }

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece.chess-svg-rendered > .chess-svg-piece-image {
  animation-delay: calc(var(--chess-idle-file-offset, 0s) + var(--chess-idle-rank-offset, 0s));
  animation-duration: calc(var(--chess-idle-base-duration, 5.4s) + var(--chess-idle-duration-offset, 0s));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  transform-origin: 50% 88%;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece:is([data-chess-svg-glyph="♙"], [data-chess-svg-glyph="♟"]) > .chess-svg-piece-image {
  --chess-idle-base-duration: 4.2s;
  animation-name: chess-storybook-pawn-idle;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece:is([data-chess-svg-glyph="♘"], [data-chess-svg-glyph="♞"]) > .chess-svg-piece-image {
  --chess-idle-base-duration: 4.8s;
  animation-name: chess-storybook-knight-idle;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece:is([data-chess-svg-glyph="♗"], [data-chess-svg-glyph="♝"]) > .chess-svg-piece-image {
  --chess-idle-base-duration: 6.8s;
  animation-name: chess-storybook-monk-idle;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece:is([data-chess-svg-glyph="♖"], [data-chess-svg-glyph="♜"]) > .chess-svg-piece-image {
  --chess-idle-base-duration: 6.2s;
  animation-name: chess-storybook-rook-idle;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece:is([data-chess-svg-glyph="♕"], [data-chess-svg-glyph="♛"]) > .chess-svg-piece-image {
  --chess-idle-base-duration: 6.4s;
  animation-name: chess-storybook-queen-idle;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece:is([data-chess-svg-glyph="♔"], [data-chess-svg-glyph="♚"]) > .chess-svg-piece-image {
  --chess-idle-base-duration: 6.8s;
  animation-name: chess-storybook-king-idle;
}

@keyframes chess-storybook-pawn-idle {
  0%, 50%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  62% { transform: translate3d(0, -1.5%, 0) scale(1.008, .994); }
  72% { transform: translate3d(0, -4.5%, 0) scale(.994, 1.018); }
  82% { transform: translate3d(0, -1%, 0) scale(1.005, .997); }
}

@keyframes chess-storybook-knight-idle {
  0%, 44%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  56% { transform: translate3d(-1.2%, -1.4%, 0) rotate(-1.2deg); }
  68% { transform: translate3d(.8%, -5.5%, 0) rotate(2deg); }
  80% { transform: translate3d(-.4%, -1.4%, 0) rotate(-.7deg); }
  90% { transform: translate3d(.2%, -.4%, 0) rotate(.2deg); }
}

@keyframes chess-storybook-monk-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.3deg); }
  45% { transform: translate3d(0, -2.8%, 0) rotate(1.3deg); }
  70% { transform: translate3d(0, -1.4%, 0) rotate(.4deg); }
}

@keyframes chess-storybook-rook-idle {
  0%, 58%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  68% { transform: translate3d(0, -2%, 0) scale(1.006); }
  78% { transform: translate3d(0, .8%, 0) scale(1.012, .98); }
  88% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes chess-storybook-queen-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.6deg) scale(1); }
  45% { transform: translate3d(0, -3.8%, 0) rotate(.8deg) scale(1.01); }
  70% { transform: translate3d(0, -1.4%, 0) rotate(-.35deg) scale(1.005); }
}

@keyframes chess-storybook-king-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  46% { transform: translate3d(0, -2.8%, 0) rotate(0) scale(1.008); }
  62% { transform: translate3d(0, -2.2%, 0) rotate(.65deg) scale(1.008); }
  80% { transform: translate3d(0, -.6%, 0) rotate(-.45deg) scale(1.002); }
}

html[data-chess-fx-motion="reduced"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-svg-piece-image {
  animation: none !important;
  transform: none !important;
}

/* Phase 3C: accepted moves animate after canonical render. The wrapper travels
   while the SVG image keeps its independent idle personality. */
html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-square.selected > .chess-piece {
  z-index: 5;
  transform: translate3d(0, -7%, 0) scale(1.03);
  transition: transform .12s ease-out;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-piece.chess-storybook-travel {
  z-index: 7;
  will-change: transform;
  transform-origin: 50% 88%;
  animation-fill-mode: both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-storybook-travel-pawn {
  animation: chess-storybook-move-pawn .28s cubic-bezier(.2,.82,.28,1) both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-storybook-travel-knight {
  animation: chess-storybook-move-knight .34s cubic-bezier(.2,.78,.24,1) both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-storybook-travel-monk {
  animation: chess-storybook-move-monk .32s cubic-bezier(.22,.74,.28,1) both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-storybook-travel-rook {
  animation: chess-storybook-move-rook .31s cubic-bezier(.16,.76,.24,1) both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-storybook-travel-queen {
  animation: chess-storybook-move-queen .33s cubic-bezier(.2,.78,.24,1) both;
}

html[data-chess-fx-motion="enabled"] #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-storybook-travel-king {
  animation: chess-storybook-move-king .34s cubic-bezier(.2,.76,.26,1) both;
}

@keyframes chess-storybook-move-pawn {
  0% { transform: translate3d(var(--chess-move-x), var(--chess-move-y), 0) scale(.96); }
  76% { transform: translate3d(0, -8%, 0) scale(1.04, .975); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes chess-storybook-move-knight {
  0% { transform: translate3d(var(--chess-move-x), var(--chess-move-y), 0) rotate(-3deg) scale(.96); }
  58% { transform: translate3d(0, -18%, 0) rotate(2.8deg) scale(1.035); }
  84% { transform: translate3d(0, -3%, 0) rotate(-1deg) scale(1.01); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes chess-storybook-move-monk {
  0% { transform: translate3d(var(--chess-move-x), var(--chess-move-y), 0) rotate(-1.8deg) scale(.98); }
  72% { transform: translate3d(0, -7%, 0) rotate(1.3deg) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes chess-storybook-move-rook {
  0% { transform: translate3d(var(--chess-move-x), var(--chess-move-y), 0) scale(.98); }
  76% { transform: translate3d(0, -4%, 0) scale(1.012); }
  89% { transform: translate3d(0, 3.2%, 0) scale(1.035, .94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes chess-storybook-move-queen {
  0% { transform: translate3d(var(--chess-move-x), var(--chess-move-y), 0) rotate(-1.2deg) scale(.98); }
  74% { transform: translate3d(0, -9%, 0) rotate(1.2deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes chess-storybook-move-king {
  0% { transform: translate3d(var(--chess-move-x), var(--chess-move-y), 0) scale(.985); }
  76% { transform: translate3d(0, -5%, 0) rotate(.8deg) scale(1.018); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-capture-ghost {
  position: absolute;
  z-index: 8;
  inset: 4.5%;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: chess-storybook-capture-ghost .3s ease-out both;
}

#chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-fx-capture-ghost-image {
  width: 100%;
  height: 100%;
}

@keyframes chess-storybook-capture-ghost {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  46% { opacity: .88; transform: translate3d(7%, -10%, 0) rotate(6deg) scale(.94); }
  100% { opacity: 0; transform: translate3d(16%, -20%, 0) rotate(12deg) scale(.62); }
}

#chessBoard[data-chess-effects="storybook"] .chess-fx-dewdrop {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 48%;
  width: 6px;
  height: 8px;
  margin: -4px 0 0 -3px;
  border-radius: 55% 45% 60% 40%;
  background: rgba(215, 241, 255, .94);
  box-shadow: 0 0 0 1px rgba(55, 128, 181, .3), 0 1px 5px rgba(21, 73, 113, .34);
  pointer-events: none;
  animation: chess-storybook-dew-burst .36s ease-out both;
}

@keyframes chess-storybook-dew-burst {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.42) rotate(20deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--chess-dew-x), var(--chess-dew-y), 0) scale(1.08) rotate(58deg); }
}

html[data-chess-fx-motion="reduced"] #chessBoard .chess-storybook-travel,
html[data-chess-fx-motion="reduced"] #chessBoard .chess-fx-capture-ghost,
html[data-chess-fx-motion="reduced"] #chessBoard .chess-fx-dewdrop {
  animation: none !important;
  transform: none !important;
}

html[data-chess-fx-motion="reduced"] #chessBoard .chess-fx-capture-ghost,
html[data-chess-fx-motion="reduced"] #chessBoard .chess-fx-dewdrop {
  display: none !important;
}

#chessPromotionChoices .chess-promotion-button.chess-svg-rendered {
  display: grid;
  place-items: center;
  min-height: 76px;
  font-size: 0;
}

#chessPromotionChoices .chess-svg-piece-image {
  display: block;
  width: min(60px, 80%);
  height: min(60px, 80%);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

#chessYouStrip[data-whatdew-team] .chess-player-id small,
#chessOpponentStrip[data-whatdew-team] .chess-player-id small {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
}

#chessYouStrip[data-whatdew-team] .chess-player-id small::before,
#chessOpponentStrip[data-whatdew-team] .chess-player-id small::before {
  content: "";
  width: .52rem;
  height: .52rem;
  flex: 0 0 .52rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .36);
}

#chessYouStrip[data-whatdew-team="blue"] .chess-player-id small::before,
#chessOpponentStrip[data-whatdew-team="blue"] .chess-player-id small::before {
  background: #2f78d8;
}

#chessYouStrip[data-whatdew-team="green"] .chess-player-id small::before,
#chessOpponentStrip[data-whatdew-team="green"] .chess-player-id small::before {
  background: #2a8b4d;
}

@media (max-width: 480px) {
  #chessBoard .chess-piece.chess-svg-rendered {
    width: 91%;
    height: 91%;
  }

  #chessBoard .chess-piece.chess-svg-rendered[data-whatdew-team]::after {
    height: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-svg-piece-image,
  #chessBoard[data-chess-piece-set="whatdewStorybook"] .chess-storybook-travel {
    animation: none !important;
    transform: none !important;
  }

  #chessBoard .chess-fx-capture-ghost,
  #chessBoard .chess-fx-dewdrop {
    display: none !important;
    animation: none !important;
  }
}