.chess-area { max-width:600px; margin:0 auto; }
.chess-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.mode-group, .chess-actions { display:flex; flex-wrap:wrap; gap:7px; }
.chess-status { min-height:30px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; margin-bottom:10px; }
.chess-board { display:grid; grid-template-columns:repeat(8,1fr); border:2px solid var(--ink); width:100%; max-width:540px; margin:0 auto; background:var(--panel); }
.square { aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; user-select:none; font-size:clamp(24px,5.5vw,46px); line-height:1; }
.square.light { background:#ece9e1; }
.square.dark { background:#b0a48d; }
.square.selected { box-shadow:inset 0 0 0 3px var(--blue); }
.square.lastmove { background:#f5e08a; }
.square.dark.lastmove { background:#cbbd72; }
.square.check { background:#e88b8b !important; }
.square.hint::after { content:""; position:absolute; width:26%; height:26%; border-radius:50%; background:rgba(23,92,211,.45); }
.square.capture::after { content:""; position:absolute; inset:8%; border:3px solid rgba(23,92,211,.6); border-radius:50%; }
.piece { text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000; }
.piece.white { color:#fff; }
.piece.black { color:#1f2937; }
.center { text-align:center; }
@media (max-width:560px) { .chess-toolbar { justify-content:center; } }