.c4-wrap{display:flex;justify-content:center}.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--board-frame);padding:var(--space-2);border-radius:var(--radius-md);width:100%;max-width:clamp(300px,calc(100vh - 230px),480px);user-select:none;-webkit-user-select:none}.c4-col{display:grid;grid-template-rows:repeat(6,1fr);gap:4px;border:0;padding:0;background:transparent;border-radius:var(--radius-sm);touch-action:manipulation}.c4-col:hover .c4-cell{filter:brightness(1.14)}.c4-col.full,.c4--locked .c4-col{cursor:default}.c4-col.full .c4-cell,.c4--locked .c4-col .c4-cell{filter:none}.c4-col:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.c4-cell{aspect-ratio:1;border-radius:50%;background:var(--board-square-dark);position:relative;display:flex;align-items:center;justify-content:center;transition:filter .15s var(--ease)}.c4-cell.last:after,.c4-cell.win:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:3px solid var(--color-accent);pointer-events:none}.c4-cell.win:after{box-shadow:0 0 0 4px var(--color-accent-soft)}.c4-disc{width:84%;height:84%;border-radius:50%;box-sizing:border-box;position:relative;z-index:1}.c4-disc--light{background:var(--piece-light-fill);border:4px solid var(--piece-light-ring)}.c4-disc--dark{background:var(--piece-dark-fill);border:4px solid var(--piece-dark-ring)}.c4-disc.drop{animation:c4-drop .3s cubic-bezier(.3,0,.8,.4) both}@keyframes c4-drop{0%{transform:translateY(var(--drop, -300px))}to{transform:translateY(0)}}@media (max-width: 420px){.c4{gap:3px;padding:6px;border-radius:var(--radius-sm)}.c4-col{gap:3px}.c4-disc--light,.c4-disc--dark{border-width:3px}}