.xq-area { max-width:560px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.mode-group, .actions { display:flex; gap:8px; }
.mode.active { border-color:var(--blue); color:var(--blue); background:var(--bluewash); }
.status { font-weight:700; margin-bottom:10px; }
.board { position:relative; width:100%; max-width:520px; aspect-ratio:9/10; margin:0 auto; border:1px solid var(--rule); background:var(--bluewash); }
.xline { position:absolute; background:var(--ink); opacity:.55; }
.xline.h { height:1px; }
.xline.v { width:1px; }
.cell-btn { position:absolute; width:11.1%; height:10%; transform:translate(-50%,-50%); border:none; background:transparent; cursor:pointer; z-index:2; }
.piece { width:78%; height:78%; border-radius:50%; background:var(--panel); border:2px solid var(--rule); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.piece.red { color:#d64545; border-color:#d64545; }
.piece.black { color:var(--ink); border-color:var(--ink); }
.piece.selected { box-shadow:0 0 0 3px var(--orange); }
.hint-dot { position:absolute; width:26%; height:26%; border-radius:50%; background:var(--cyan); opacity:.6; pointer-events:none; }
.cell-btn:hover .piece { border-color:var(--blue); }
@media (max-width:780px) { .piece { font-size:13px; } .controls { flex-direction:column; align-items:stretch; } .mode-group, .actions { justify-content:center; } }