.db-wrap{display:flex;justify-content:center}.db{--dot: 12px;display:grid;grid-template-columns:repeat(5,var(--dot) 1fr) var(--dot);grid-template-rows:repeat(5,var(--dot) 1fr) var(--dot);background:var(--board-square-light);padding:var(--space-3);border:6px solid var(--board-frame);border-radius:var(--radius-md);width:100%;max-width:clamp(300px,calc(100vh - 230px),480px);user-select:none;-webkit-user-select:none}.db--locked .db-edge{cursor:default}.db-dot{border-radius:50%;background:var(--board-frame)}.db-box{aspect-ratio:1;display:flex;align-items:center;justify-content:center}.db-disc{width:56%;height:56%;border-radius:50%;box-sizing:border-box}.db-disc--light{background:var(--piece-light-fill);border:3px solid var(--piece-light-ring)}.db-disc--dark{background:var(--piece-dark-fill);border:3px solid var(--piece-dark-ring)}.db-edge{border:0;padding:0;position:relative;background:var(--board-square-dark);opacity:.25;border-radius:var(--radius-sm);touch-action:manipulation;transition:opacity .15s var(--ease),background .15s var(--ease)}.db-edge:before{content:"";position:absolute}.db-edge--h:before{top:-16px;right:0;bottom:-16px;left:0}.db-edge--v:before{top:0;right:-16px;bottom:0;left:-16px}.db:not(.db--locked) .db-edge[aria-pressed=false]:hover{opacity:.6}.db-edge[aria-pressed=true]{opacity:1}.db-edge--light{background:var(--piece-light-ring)}.db-edge--dark{background:var(--piece-dark-fill)}.db-edge.last{background:var(--color-accent)}.db-edge:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;opacity:1;z-index:1}@media (max-width: 420px){.db{--dot: 10px;padding:var(--space-2);border-width:4px;border-radius:var(--radius-sm)}}