.c4-status{font-size:1.25rem;font-weight:600}.c4-status[data-player=R]{color:#ef4444;text-shadow:0 0 10px #ef444466}.c4-status[data-player=Y]{color:#f5c542;text-shadow:0 0 10px #f5c54266}.c4-board{background:var(--accent-strong);border-radius:12px;grid-template-rows:repeat(6,64px);grid-template-columns:repeat(7,64px);gap:8px;width:fit-content;margin:0 auto;padding:12px;display:grid;box-shadow:inset 0 2px 6px #00000059}.c4-cell{cursor:pointer;touch-action:manipulation;background:0 0;border:0;justify-content:center;align-items:center;width:100%;height:100%;padding:6px;transition:transform .1s;display:flex}.c4-cell:focus-visible{outline:2px solid var(--text-main);outline-offset:-2px;border-radius:999px}.c4-cell:disabled{cursor:default}.c4-disc{background:var(--bg-color);border-radius:999px;width:100%;height:100%;transition:transform .12s;display:block;box-shadow:inset 0 3px 6px #0000008c}.c4-cell:hover:not(:disabled) .c4-disc{transform:scale(1.06)}.c4-cell:active:not(:disabled) .c4-disc{transform:scale(.94)}.c4-disc.red{background:radial-gradient(circle at 35% 30%,#ff6b6b,#dc2626 70%);box-shadow:inset 0 3px 6px #00000059,0 0 8px #ef444459}.c4-disc.yellow{background:radial-gradient(circle at 35% 30%,#ffe27a,#eab308 70%);box-shadow:inset 0 3px 6px #00000059,0 0 8px #f5c54259}.c4-disc.winning{animation:.9s ease-in-out infinite c4-pulse}@keyframes c4-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@media (width<=640px){.c4-status{font-size:1.1rem}.c4-board{grid-template-rows:repeat(6,42px);grid-template-columns:repeat(7,42px);gap:5px;padding:8px}.c4-cell{padding:4px}}