.page{--c4-frame: #1E5BD6;--c4-edge: #16449F;--c4-well: #EDF2FA;--c4-red: #E1352A;--c4-red-edge: #B5281E;--c4-yellow: #F6C21A;--c4-yellow-edge: #C79A0F;--c4-win: #2EAD52;--piece-light-fill: var(--c4-red);--piece-light-ring: var(--c4-red-edge);--piece-dark-fill: var(--c4-yellow);--piece-dark-ring: var(--c4-yellow-edge)}.c4-wrap{display:flex;justify-content:center}.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--c4-frame);padding:var(--space-2);border-radius:var(--radius-md);box-shadow:inset 0 -4px 0 var(--c4-edge),var(--shadow-card);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{background:var(--color-surface)}.c4-col.full,.c4--locked .c4-col{cursor:default}.c4-col.full .c4-cell,.c4--locked .c4-col .c4-cell{background:var(--c4-well)}.c4-col:focus-visible{outline:3px solid var(--color-surface);outline-offset:2px}.c4-cell{aspect-ratio:1;border-radius:50%;background:var(--c4-well);box-shadow:inset 0 2px 3px #16449f59;position:relative;display:flex;align-items:center;justify-content:center;transition:background .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-surface);pointer-events:none}.c4-cell.win:after{border-color:var(--c4-win);box-shadow:0 0 0 3px #2ead5266}.c4-disc{width:84%;height:84%;border-radius:50%;box-sizing:border-box;position:relative;z-index:1}.c4-disc--light{background:var(--c4-red);border:4px solid var(--c4-red-edge)}.c4-disc--dark{background:var(--c4-yellow);border:4px solid var(--c4-yellow-edge)}.c4-disc.drop{animation:c4-drop .3s cubic-bezier(.3,0,.8,.4) both}.c4-cell.win .c4-disc{--color-accent: var(--c4-win);animation:rh-blink .5s var(--ease) calc(.3s + var(--i, 0) * .12s) 2}.c4-cell.win .c4-disc.drop{animation:c4-drop .3s cubic-bezier(.3,0,.8,.4) both,rh-blink .5s var(--ease) calc(.3s + var(--i, 0) * .12s) 2}@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}}