:root{font-family:Inter,system-ui,-apple-system,sans-serif;background:#f4f4f1;color:#262626}
*{box-sizing:border-box}body{margin:0}main{max-width:1170px;margin:0 auto;padding:24px}
h1{font-size:2rem;margin:0;font-weight:800;letter-spacing:-.035em}small{font-size:.5em;font-weight:500;color:#6c6c6c}
header{margin-bottom:22px}header p{color:#666}.workspace{display:grid;grid-template-columns:minmax(320px,1fr) minmax(280px,340px);gap:26px;align-items:start}
.board-area{min-width:0}.board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;font-weight:700;color:#3d3d3d}
.board-toolbar button{font-size:.87rem;padding:7px 11px}
.board{width:min(100%,680px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border-radius:3px;overflow:hidden;box-shadow:0 8px 24px #14211524}
.square{border:0;border-radius:0;position:relative;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;min-width:0;touch-action:manipulation}
.light{background:#eeeed2}.dark{background:#769656}.square.last-move.light{background:#f4f08c}.square.last-move.dark{background:#baca44}
.square.selected{box-shadow:inset 0 0 0 5px #e8ba32;z-index:1}
.square.target:after{content:'';position:absolute;width:25%;height:25%;border-radius:50%;background:#203a244a;pointer-events:none}
.square.target:has(.piece):after{width:83%;height:83%;background:transparent;border:5px solid #203a245e}
.square:focus-visible{outline:3px solid #e9ba27;outline-offset:-3px;z-index:2}
.piece{position:relative;z-index:1;width:91%;height:91%;object-fit:contain;user-select:none;cursor:grab;filter:drop-shadow(0 1px 1px #0003)}
.piece:active{cursor:grabbing}.coord{position:absolute;font-size:clamp(9px,1.2vw,13px);font-weight:750;line-height:1;pointer-events:none}
.coord.rank{top:4px;left:4px}.coord.file{bottom:4px;right:4px}.light .coord{color:#769656}.dark .coord{color:#eeeed2}
aside{background:white;border-radius:10px;box-shadow:0 3px 15px #00000012;padding:18px}
h2{font-size:1.05rem;margin:18px 0 9px}h2:first-child{margin-top:0}
label{font-weight:650;display:block;margin:8px 0 5px}textarea{width:100%;font:inherit;resize:vertical;padding:10px;border:1px solid #c6c6c6;border-radius:6px}
button{font:inherit;padding:9px 12px;border-radius:6px;border:1px solid #d5d5d5;background:#f5f5f5;color:#292929;cursor:pointer}
button:hover{background:#e8e8e8}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0}.caption{font-size:.85rem;color:#666}
#message{min-height:1.3em;font-weight:600;color:#46732b}#moves{max-height:160px;overflow:auto;padding-left:25px}#moves li{margin-bottom:4px}
@media(max-width:780px){main{padding:12px}.workspace{grid-template-columns:1fr;gap:12px}.board{max-width:600px;margin:auto}.board-toolbar{max-width:600px;margin:auto auto 9px}aside{padding:14px}}