body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#111;color:#eee}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#1b1b1b;position:sticky;top:0}
.title{font-weight:700}
.status{font-size:12px;color:#aaa;margin-top:2px}
.actions button{background:#2d6cdf;border:none;color:#fff;padding:10px 12px;border-radius:10px;font-weight:600}
.board-wrap{display:flex;justify-content:center;padding:14px}
.board{display:grid;grid-template-columns:repeat(8,40px);grid-template-rows:repeat(8,40px);gap:0;border:2px solid #444}
.cell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;user-select:none}
.light{background:#d7c1a0}
.dark{background:#6b4a2b}
.cell.sel{outline:3px solid #4af;outline-offset:-3px}
.cell.hi{box-shadow:inset 0 0 0 3px rgba(255,255,0,.8)}
.piece{width:28px;height:28px;border-radius:50%}
.w{background:#f2f2f2}
.b{background:#202020}
.king{border:3px solid #f5d000;box-sizing:border-box}
.panel{padding:12px 14px;background:#1b1b1b;border-top:1px solid #333}
.hint{margin-top:8px;color:#bbb;font-size:13px;white-space:pre-wrap}