/* Conecta 4: las fichas van detrás de una rejilla azul con agujeros redondos */
.c4outer { max-width: 680px; }
.c4 { position: relative; width: 100%; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.c4stage { position: absolute; left: 0; right: 0; bottom: 0; }
.c4pieces, .c4grid { position: absolute; inset: 0; display: grid; }
.c4grid { pointer-events: none; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 44px rgba(0, 0, 0, .55), inset 0 0 0 3px #3b82f6; }
.c4cell { background: radial-gradient(circle at 50% 50%, transparent 0 39%, #1e3a8a 40% 43%, #2563eb 44%); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .06); }
.c4slot { display: flex; align-items: center; justify-content: center; }
.c4p { width: 84%; aspect-ratio: 1; border-radius: 50%; position: relative; box-shadow: 0 2px 5px rgba(0, 0, 0, .45); }
.c4p::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .3), inset 0 -2px 3px rgba(255, 255, 255, .25); }
.c4p.r, .ghost.r { background: radial-gradient(circle at 35% 30%, #fecaca, #ef4444 45%, #991b1b); }
.c4p.y, .ghost.y { background: radial-gradient(circle at 35% 30%, #fef9c3, #facc15 45%, #a16207); }
.c4p.last::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; background: rgba(255, 255, 255, .85); z-index: 1; }
.c4p.win { animation: c4win .9s ease-in-out infinite alternate; z-index: 2; box-shadow: 0 0 0 3px #fff, 0 0 18px 6px rgba(255, 255, 255, .8); }
.c4p.fall { animation: c4fall var(--dur, .5s) linear both; animation-delay: var(--delay, 0s); }
@keyframes c4fall {
  0% { transform: translateY(calc(var(--n) * -119%)); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  72% { transform: translateY(0); animation-timing-function: ease-out; }
  84% { transform: translateY(-9%); animation-timing-function: ease-in; }
  100% { transform: translateY(0); }
}
@keyframes c4win { from { filter: brightness(1); transform: scale(1); } to { filter: brightness(1.35); transform: scale(1.06); } }

.c4cols { position: absolute; inset: 0; display: grid; z-index: 3; }
.c4col { position: relative; border-radius: 12px; }
.c4col.on { cursor: pointer; }
.c4col.on:hover { background: rgba(255, 255, 255, .1); }
.c4col .ghost { display: none; position: absolute; left: 8%; right: 8%; top: 0; aspect-ratio: 1; border-radius: 50%; opacity: .75; transform: scale(.84); }
.c4col.on:hover .ghost { display: block; }
@media (hover: none) { .c4col.on:hover { background: none; } .c4col.on:hover .ghost { display: none; } }
@media (max-width: 900px) { .c4outer { max-width: none; } .bgame { padding-left: 6px; padding-right: 6px; } }