.board-container{display:flex;justify-content:center;align-items:center;padding:15px;background:linear-gradient(135deg,#1e1e1e,#3a3a3a);min-height:100vh}.board{display:grid;aspect-ratio:1 / 1;grid-template-columns:repeat(8,1fr);width:92vw;max-width:430px;border:5px solid #5e3b23;border-radius:12px;box-shadow:0 0 20px #0006}.square{width:100%;height:100%;position:relative}.white{background:#eed9b7}.black{background:#b58863}.piece{width:85%;height:85%;object-fit:contain;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.square:hover{outline:2px solid rgba(255,255,0,.7);outline-offset:-3px}.possible-move{position:relative}.possible-move:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:15px;background-color:#0000004d;border-radius:50%;z-index:1}.selected-square{box-shadow:inset 0 0 10px #007bffcc;border:3px solid rgba(0,123,255,.8);transition:all .2s ease-in-out}.last-stockfish-move{box-shadow:inset 0 0 10px #f00c;border:2px solid rgba(255,0,0,.8)}.moves-box{width:92vw;max-width:430px;height:23vw;max-height:107.5px;margin-top:20px;border:2px solid #5e3b23;border-radius:8px;background:#000;color:#fff;padding:10px;position:relative;overflow-y:auto;font-size:14px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}