.c4-frame{border-radius:var(--r-xl);width:min(100%,116.667dvh - 163.333px,760px);position:relative}.c4-columns{z-index:5;grid-template-columns:repeat(7,1fr);display:grid;position:absolute;inset:0}.c4-column{cursor:pointer;background:0 0;border:0;border-radius:18px;transition:background .15s}.c4-column:hover:not(:disabled){background:#ffffff0d}.c4-column:disabled{cursor:default}.c4-board{grid-template-columns:repeat(var(--cols), 1fr);aspect-ratio:7/6;border-radius:var(--r-xl);box-shadow:inset 0 2px 0 #fff3, 0 0 0 1px var(--line-strong), var(--shadow-lg);background:linear-gradient(#3a2fd0,#2a1f9e);gap:2%;padding:3%;display:grid}.c4-cell{background:#0d0c18;border-radius:50%;position:relative;box-shadow:inset 0 4px 8px #0009}.c4-disc{border-radius:50%;position:absolute;inset:6%;box-shadow:inset 0 -5px #00000038,inset 0 3px #ffffff40}.c4-disc.is-p1{background:radial-gradient(circle at 40% 35%,#ff9d6e,#ff5a1f 60%)}.c4-disc.is-p2{background:radial-gradient(circle at 40% 35%,#ffe38a,#ffc43d 60%)}.c4-disc.is-ghost{opacity:.3}.c4-disc.is-drop{animation:c4-fall calc(.12s + var(--fall) * 50ms) cubic-bezier(.5, 0, .9, .6) both, c4-bounce .25s calc(.12s + var(--fall) * 50ms) ease-out}.c4-disc.is-win{animation:.8s ease-in-out infinite c4-win;box-shadow:0 0 0 3px #fff,0 0 20px #fff}@keyframes c4-fall{0%{transform:translateY(calc(var(--fall) * -112%))}to{transform:none}}@keyframes c4-bounce{40%{transform:translateY(-8%)}}@keyframes c4-win{50%{transform:scale(.88)}}