*{box-sizing:border-box}
body{font-family:Segoe UI,Arial;background:#f2efe8;margin:0;padding:20px;color:#222}
.board-wrap{max-width:1100px;margin:0 auto}
h1{text-align:center}
.game{display:flex;gap:20px;align-items:flex-start}
.board{width:700px;height:700px;background:#a87b4a;border:10px solid #6b4f34;box-shadow:0 10px 30px rgba(0,0,0,.25);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);}
.square{position:relative;overflow:hidden}
.square.light{background:linear-gradient(#f3e6cf,#e8d3b6)}
.square.dark{background:linear-gradient(#7a5130,#6b4f34)}
.piece{width:80%;height:80%;display:flex;align-items:center;justify-content:center;font-size:42px;cursor:grab;user-select:none;position:absolute;left:10%;top:10%}
.piece.dragging{cursor:grabbing;opacity:.9}
.panel{width:340px}
.status{margin-top:12px;font-weight:700}
.note{text-align:center;color:#555;margin-top:12px}