.cw-container{ max-width:100vw; margin:0 auto; padding:8px; box-sizing:border-box; }
.cw-topbar{ height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cw-board{ width:100%; max-width:100vmin; aspect-ratio:1/1; margin:0 auto; }
.cw-status{ min-height:24px; margin-top:8px; }
.cw-board .square-55d63{ position:relative; }
.cw-board .square-cw-selected{ box-shadow: inset 0 0 0 3px rgba(80,120,255,.9); }
.cw-board .square-cw-move::after{ content:''; position:absolute; left:50%; top:50%; width:18%; height:18%; transform:translate(-50%,-50%); border-radius:50%; background: var(--cw-green); }
.cw-board .square-cw-capture::after{ content:''; position:absolute; left:50%; top:50%; width:78%; height:78%; transform:translate(-50%,-50%); border-radius:50%; border:3px solid var(--cw-red); box-sizing:border-box; }
.cw-board .square-cw-lastmove{ position:relative; }
.cw-container.cw-lastmove-style-ring .cw-board .square-cw-lastmove::after{ content:''; position:absolute; inset:3px; border:3px solid var(--cw-lastmove-color, var(--cw-yellow)); border-radius:0; box-sizing:border-box; pointer-events:none; }

/* Reserve small symmetric gutter to avoid clipping on Android */
.cw-container{ padding-inline: var(--cw-board-gutter); }

/* Player header */
.cw-player{ display:flex; align-items:center; gap:8px; }
.cw-player .cw-avatar{ width:28px; height:28px; border-radius:999px; background: linear-gradient(135deg,#bbb,#eee); display:inline-block; }
.cw-player .cw-flag{ width:20px; height:14px; object-fit:cover; border-radius:2px; border:1px solid rgba(0,0,0,.2); vertical-align:middle; }
.cw-player .cw-nick{ font-weight:600; }

/* Captured bar */
.cw-captured{ display:inline-flex; align-items:center; gap:6px; min-height:24px; }
.cw-cap-item{ position:relative; display:inline-flex; align-items:center; }
.cw-cap-item img{ width:18px; height:18px; object-fit:contain; margin-right:2px; }
.cw-cap-item b{ font-size:12px; opacity:.9; }


/* Last-move highlight variants */
.cw-board .square-cw-lastmove{ position:relative; }
.cw-container.cw-lastmove-style-ring .cw-board .square-cw-lastmove::after{ content:''; position:absolute; inset:3px; border:3px solid var(--cw-lastmove-color, var(--cw-yellow)); border-radius:0; box-sizing:border-box; pointer-events:none; }
.cw-container.cw-lastmove-style-fill .cw-board .square-cw-lastmove{ background: var(--cw-lastmove-color, rgba(180,180,180,.4)); }
.cw-container.cw-lastmove-style-dot  .cw-board .square-cw-lastmove::after{ content:''; position:absolute; left:50%; top:50%; width:26%; height:26%; transform:translate(-50%,-50%); border-radius:50%; background: var(--cw-lastmove-color, var(--cw-yellow)); pointer-events:none; }
.cw-container.cw-lastmove-style-rounded .cw-board .square-cw-lastmove::after{ content:''; position:absolute; inset:3px; border:3px solid var(--cw-lastmove-color, var(--cw-yellow)); border-radius:8px; box-sizing:border-box; pointer-events:none; }