body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#Chessboard{width:100%;max-width:90vh}#Chessboard *{box-sizing:border-box}#Chessboard .chessboard{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);grid-gap:0;width:100%;height:100%}#Chessboard .square{width:100%;aspect-ratio:1/1;position:relative;display:flex;justify-content:flex-start;align-items:flex-end}#Chessboard .square.is-possible :after{content:"";position:absolute;width:20%;height:20%;top:40%;left:40%;background:rgba(231,128,150,.7);z-index:10;border-radius:50%}#Chessboard .square.hover-drop{border:4px solid #e78096}#Chessboard .square.possible-drop{border:4px solid #7cd06c}#Chessboard .square.white{background-color:#f0d9b5;color:#b58863}#Chessboard .square.black{background-color:#b58863;color:#f0d9b5}#Chessboard .square .field{padding:5px}#Chessboard .figure{width:100%;display:flex;justify-content:center;align-items:center;aspect-ratio:1/1;position:absolute;font-size:64px;z-index:20}#Chessboard .figure.white{color:#fff9ee}#Chessboard .figure.black{color:#4c2e16}#Chessboard .figure.is-dragged{z-index:999;color:#fff}#Chessboard .figure.is-dragged.black{color:#7c481d}#Chessboard .captured{width:100%;display:grid;grid-template-columns:repeat(16,1fr);justify-content:center;align-items:center;background:#ccc;height:50px}#Chessboard .captured .figure{position:initial;display:block;justify-content:center;align-items:center;aspect-ratio:auto;width:100%;font-size:40px;text-align:center}#Chessboard .promotion{top:0;width:100%;height:100vh;position:absolute;z-index:9999}#Chessboard .promotion:after{content:"";position:absolute;width:100%;height:100%;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);z-index:1}#Chessboard .promotion .content{width:450px;background-color:#fff;position:relative;z-index:5;padding:20px;margin:0 auto;margin-top:20vh;border-radius:20px;box-shadow:10px 10px 20px 5px #00000080}#Chessboard .promotion .figures{display:grid;grid-template-columns:repeat(4,1fr);justify-content:center;align-items:center}#Chessboard .promotion .figure{position:initial;display:block;justify-content:center;align-items:center;aspect-ratio:auto;width:100%;font-size:40px;text-align:center}#Chessboard .promotion .figure:hover{cursor:pointer;color:#e78096}