.c4-vs { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.c4-vs .vs { color: var(--text-mute); font-weight: 800; }
.c4-p { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--line-soft); font-weight: 800; transition: border-color .2s, box-shadow .2s; }
.c4-p.is-turn { border-color: var(--primary); box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / .15); }
.c4-p svg { width: 16px; height: 16px; color: var(--text-mute); }
.c4-p .num { font-size: 1.1rem; color: var(--primary-ink); margin-inline-start: .2rem; }
.c4-p .disc { width: 22px; height: 22px; position: static; }
.c4-board { direction: ltr; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: clamp(4px, 1vw, 8px); padding: clamp(8px, 1.6vw, 14px); border-radius: 22px; background: linear-gradient(160deg, #1d4ed8, #1e3a8a); max-width: 560px; margin: 0 auto; box-shadow: var(--shadow); }
.c4-cell { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--bg); box-shadow: inset 0 3px 6px rgb(0 0 0 / .35); }
.c4-board.can .c4-cell { cursor: pointer; }
.c4-cell.hov { background: color-mix(in srgb, var(--bg) 82%, #fff); }
.disc { position: absolute; inset: 6%; border-radius: 50%; display: block; }
.disc.d1 { background: radial-gradient(circle at 35% 30%, #ff8a8a, #ef4444 55%, #b91c1c); }
.disc.d2 { background: radial-gradient(circle at 35% 30%, #fff1a6, #eab308 55%, #a16207); }
.disc.drop { animation: c4drop .45s cubic-bezier(.3, 1.4, .6, 1); }
.disc.win { box-shadow: 0 0 0 4px #fff, 0 0 18px 4px rgb(255 255 255 / .7); animation: c4win 1s ease-in-out infinite alternate; }
@keyframes c4drop { from { transform: translateY(calc(-120% * (var(--r) + 1))); } }
@keyframes c4win { to { transform: scale(.88); } }