.dots-cover { border-color: #2e3653; background: #2e3653; }
.dots-cover .dots-art { aspect-ratio: 560 / 488; }
.dots-cover figcaption { background: #282e47; border-color: #5b6483; color: #e8eefb; }
.dots-size-options { margin: 0 0 18px; padding: 0; border: 0; }
.dots-size-options legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.dots-size-options legend span { color: var(--muted); font-weight: 400; }
.dots-size-options > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dots-size-options label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); font-weight: 650; cursor: pointer; }
.dots-size-options label:has(input:checked) { border-color: #245d9a; background: #e9f0f9; }
.dots-size-options input { margin: 0; accent-color: #245d9a; }
.dots-panel { max-width: 600px; margin: 16px auto 0; }
.dots-panel[data-wide="true"] { max-width: 1020px; }
.dots-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.dots-score > div { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 38px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }
.dots-score strong { margin-left: auto; font: 750 20px/1 var(--mono); }
.dots-score [data-color="1"] { background: #245d9a; }
.dots-score [data-color="2"] { background: #a93d34; }
.dots-chip { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dots-board-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.dots-viewport { overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid #b6bfcc; border-radius: 5px; }
.dots-surface { position: relative; min-width: calc(24px * var(--dots-columns)); aspect-ratio: var(--dots-columns) / var(--dots-rows); background: #f5f7fb; }
#dots-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dots-board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--dots-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--dots-rows), minmax(0, 1fr)); }
.dots-point { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; border: 0; padding: 0; background: none; border-radius: 2px; color: var(--ink); }
.dots-point[aria-disabled="true"] { cursor: default; }
.dots-point:focus-visible { outline-offset: -2px; }
.dots-point::before { content: ""; width: 53%; aspect-ratio: 1; border: 2px solid transparent; border-radius: 50%; pointer-events: none; }
.dots-point[aria-disabled="false"]:hover::before { background: #586c8b66; }
.dots-point[data-piece="1"]::before { background: #245d9a; border-color: #143e6b; }
.dots-point[data-piece="2"]::before { background: #a93d34; border-color: #792921; box-shadow: inset 0 0 0 1px #eaa099; }
.dots-point[data-captured="true"]::before { background: #f5f7fb; }
.dots-point.recent::after { content: ""; position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid #303d55; border-radius: 50%; pointer-events: none; }
.dots-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; }
.dots-actions button:disabled { opacity: .55; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }