body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; background: #f4f4f4; padding: 20px; }
#main-container { display: flex; gap: 20px; }
#myBoard { width: 400px; }
#sidebar { width: 300px; display: flex; flex-direction: column; gap: 10px; }

/* Move Buttons */
.move-btn {
    padding: 10px; text-align: left; background: white; border: 1px solid #ccc; cursor: pointer; border-radius: 4px; transition: 0.2s;
}
.move-btn:hover { background: #e0e0e0; border-color: #aaa; }
.move-btn strong { color: #333; font-size: 1.1em; }
.move-name { display: block; color: #666; font-size: 0.9em; margin-top: 2px; }

/* Notation & Comments */
#history { font-family: monospace; font-size: 1.1em; color: #333; padding: 10px; background: #fff; border: 1px solid #ccc; }
#comment-box { background: #e8f5e9; padding: 10px; border-left: 5px solid #4caf50; font-style: italic; min-height: 40px; }

/* Controls */
#controls { display: flex; gap: 5px; }
button { padding: 8px 12px; cursor: pointer; }