.c4-table{border-collapse:separate;border-spacing:6px;margin:2rem auto;background:#000000b3;padding:10px;border-radius:12px;box-shadow:0 4px 20px #00000040}.c4-cell{width:48px;height:48px;border-radius:50%;background:#c9f7a5;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;outline:none;border:none;box-shadow:inset 0 2px 4px #0000001a;transition:box-shadow .15s ease}@media(hover:none){.c4-cell:hover,.c4-cell:focus,.c4-cell:active{background:#c9f7a5!important}.c4-p1:hover,.c4-p1:focus,.c4-p1:active{background:#1a1a1a!important}.c4-p2:hover,.c4-p2:focus,.c4-p2:active{background:#fff!important}}.c4-cell:focus-visible{outline:3px solid #000;outline-offset:-3px;z-index:1}@media(hover:hover){.c4-active .c4-cell:not(.c4-p1):not(.c4-p2):hover{background:#a8e67a;box-shadow:inset 0 2px 4px #00000026,0 0 8px #0000001a}}.c4-active .c4-cell:not(.c4-p1):not(.c4-p2):focus-visible{background:#a8e67a;box-shadow:inset 0 2px 4px #00000026,0 0 8px #0000001a}.c4-waiting .c4-cell:not(.c4-p1):not(.c4-p2){cursor:not-allowed}.c4-p1{background:#1a1a1a!important;cursor:default;box-shadow:inset 0 -3px 6px #0006,0 2px 4px #0000004d}.c4-p2{background:#fff!important;cursor:default;box-shadow:inset 0 -3px 6px #0000001a,0 2px 4px #00000026}.c4-win{animation:winPulse .8s ease-in-out 3;box-shadow:0 0 0 3px #c9f7a5,0 0 16px #c9f7a5cc!important;z-index:1;position:relative}@keyframes winPulse{0%,to{box-shadow:0 0 0 3px #c9f7a5,0 0 16px #c9f7a5cc}50%{box-shadow:0 0 0 5px #c9f7a5,0 0 24px #c9f7a5}}.c4-drop{animation:dropPiece .4s cubic-bezier(.25,.1,.25,1.4) both;--cell-size: 54px}@keyframes dropPiece{0%{transform:translateY(calc(var(--drop-rows, 0) * var(--cell-size) * -1));opacity:.7}60%{opacity:1}80%{transform:translateY(4px)}to{transform:translateY(0);opacity:1}}@media(min-width:768px){.c4-cell{width:64px;height:64px}.c4-drop{--cell-size: 70px}.c4-table{border-spacing:7px;padding:12px}}@media(prefers-reduced-motion:reduce){.c4-drop{animation:none}}