.chess-scene { position: absolute; top: 34px; right: -20px; width: 47%; height: 510px; --pointer-x: 0deg; --pointer-y: 0deg; }
.chess-stage { position: absolute; inset: 0 0 27px; perspective: 1100px; perspective-origin: 50% 45%; }
.chess-orbit { position: absolute; width: 72%; aspect-ratio: 1; left: 14%; top: 19%; transform-style: preserve-3d; transform: rotateX(var(--pointer-x)) rotateY(var(--pointer-y)); transition: transform .35s ease-out; }
.chess-plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(49deg) rotateZ(-23deg); animation: chess-board-drift 10s ease-in-out infinite; }
.chess-slab { position: absolute; inset: -13px; border: 1px solid #4b505a; border-radius: 18px; background: linear-gradient(130deg,#343841,#171a20); transform: translateZ(-5px); box-shadow: 0 9px 0 #191c22, 0 15px 0 #080a0e, 0 32px 36px #0009; }
.chess-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); grid-template-rows: repeat(8,minmax(0,1fr)); border: 1px solid #626976; border-radius: 7px; overflow: hidden; backface-visibility: hidden; }
.chess-square.light { background: #555d69; }
.chess-square.dark { background: #262c35; }
.chess-coordinates { position: absolute; inset: auto 0 -11px; display: grid; grid-template-columns: repeat(8,1fr); color: #b0b7c3; text-align: center; font: 7px ui-monospace,monospace; }
.chess-position { position: absolute; left: calc((var(--file) + .5) * 12.5%); top: calc((var(--rank) + .5) * 12.5%); transform-style: preserve-3d; }
.chess-piece-shadow { position: absolute; width: 29px; height: 20px; margin: -10px 0 0 -14px; border-radius: 50%; background: #03050888; filter: blur(4px); transform: translateZ(2px); }
.chess-billboard { display: block; position: absolute; left: 0; bottom: 0; width: 49px; height: 57px; transform-origin: 50% 100%; transform: translateX(-50%) rotateZ(23deg) rotateX(-49deg); transform-style: preserve-3d; }
.chess-piece-float { display: block; width: 100%; height: 100%; animation: chess-piece-breathe 6s ease-in-out infinite; animation-delay: var(--delay); }
.chess-piece { display: block; width: 100%; height: 100%; stroke: #f18b42; stroke-width: 1.8px; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(1px 2px 0 #6b351b) drop-shadow(0 7px 5px #0006); }
.chess-piece.dark { fill: #191d24; }
.chess-piece.light { fill: #d7d9de; }
.chess-motion-toggle { position: absolute; right: 21px; bottom: 12px; display: flex; align-items: center; gap: 11px; padding: 8px 11px; border: 1px solid #343943; border-radius: 8px; background: #15181de6; color: #b7bfcb; font-size: 9px; line-height: 1.5; }
.chess-motion-toggle:hover { color: white; border-color: #737c8c; }
.chess-motion-toggle>span { color: #f18b42; }
.motion-paused .chess-plane, .motion-paused .chess-piece-float { animation-play-state: paused; }
@keyframes chess-board-drift { 0%,100% { transform: translateY(0) rotateX(49deg) rotateZ(-23deg); } 50% { transform: translateY(-7px) rotateX(51deg) rotateZ(-21deg); } }
@keyframes chess-piece-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media(max-width:1100px) { .chess-scene { right: -20px; width: 42%; } .chess-billboard { width: 40px; height: 48px; } }
@media(max-width:780px) {
  .chess-scene { position: relative; top: auto; right: auto; width: min(100%,440px); height: 350px; margin: 22px auto 0; }
  .chess-orbit { top: 16%; }
  .chess-billboard { width: 39px; height: 47px; }
  .chess-motion-toggle { right: 10px; bottom: 0; }
}
@media(max-width:480px) { .chess-scene { height: 300px; } .chess-stage { perspective: 850px; } .chess-billboard { width: 32px; height: 39px; } .chess-orbit { width: 75%; left: 12.5%; top: 18%; } }
@media(max-width:350px) { .chess-scene { height: 270px; } .chess-billboard { width: 27px; height: 34px; } }
@media(prefers-reduced-motion:reduce) { .chess-orbit { transition: none; } .chess-scene:not(.motion-paused) .chess-plane, .chess-scene:not(.motion-paused) .chess-piece-float { animation-duration: 12s; } }