/* Connect 4 / Connect 5 — connections.games */
#connect-app{--red:#e63946;--red2:#b81d2a;--yel:#ffc93c;--yel2:#d99a00;--board:#2459d6;--board2:#1b45a8;--ink:#2e3440;--muted:#6b7280;
  max-width:640px;margin:0 auto;padding:12px 10px 6px;font-family:Outfit,system-ui,sans-serif;color:var(--ink);box-sizing:border-box;text-align:center}
#connect-app *{box-sizing:border-box}
.c4-controls{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;margin:2px 0 10px}
.c4-seg{display:inline-flex;background:#eef1f5;border-radius:999px;padding:3px}
.c4-seg[hidden]{display:none}
.c4-seg button{border:0;background:transparent;border-radius:999px;padding:7px 13px;font:600 14px Outfit,system-ui,sans-serif;color:var(--ink);cursor:pointer}
.c4-seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.c4-status{min-height:28px;margin:4px 0 10px;font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.c4-status::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;display:none}
.c4-status.r::before{display:block;background:var(--red)}
.c4-status.y::before{display:block;background:var(--yel)}
.c4-status.win{font-size:20px}
.c4-status.draw{color:var(--muted)}
.c4-board{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0;margin:0 auto;padding:6px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--board),var(--board2));box-shadow:0 10px 0 #163a8c,0 14px 26px rgba(20,40,100,.28);max-width:560px}
#connect-app[data-cols="9"] .c4-board{max-width:640px}
.c4-col{display:flex;flex-direction:column;border:0;background:transparent;padding:0;margin:0;cursor:pointer;border-radius:10px;font:inherit;color:inherit}
.c4-col:hover:not(:disabled),.c4-col:focus-visible{background:rgba(255,255,255,.1)}
.c4-col:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.c4-col:disabled{cursor:default}
.c4-cell{position:relative;display:block;aspect-ratio:1;padding:9%}
.c4-cell::before{content:"";position:absolute;inset:9%;border-radius:50%;background:#e9eef8;box-shadow:inset 0 3px 6px rgba(0,0,0,.28)}
.c4-disc{position:relative;display:block;width:100%;height:100%;border-radius:50%;z-index:1;
  animation:c4-drop calc(.14s + var(--fall) * .045s) cubic-bezier(.45,0,1,1)}
.c4-disc.p1{background:radial-gradient(circle at 35% 30%,#ff7b84,var(--red) 55%,var(--red2))}
.c4-disc.p2{background:radial-gradient(circle at 35% 30%,#ffe596,var(--yel) 55%,var(--yel2))}
.c4-disc::after{content:"";position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
@keyframes c4-drop{from{transform:translateY(calc(var(--fall) * -122%))}to{transform:translateY(0)}}
.c4-cell.ghost::after{content:"";position:absolute;inset:9%;border-radius:50%;background:var(--red);opacity:.4;z-index:1}
.c4-board.p2 .c4-cell.ghost::after{background:var(--yel)}
.c4-cell.win .c4-disc{box-shadow:0 0 0 3px #fff,0 0 16px 4px rgba(255,255,255,.85);animation:c4-pulse 1s ease-in-out infinite alternate}
@keyframes c4-pulse{from{transform:scale(.92)}to{transform:scale(1.04)}}
#connect-app.done .c4-cell:not(.win) .c4-disc{opacity:.75}
.c4-actions{display:flex;gap:10px;justify-content:center;margin:16px 0 8px}
.c4-actions button{border:1.5px solid #cfd6de;background:#fff;border-radius:999px;padding:10px 22px;font:600 15px Outfit,system-ui,sans-serif;color:var(--ink);cursor:pointer}
.c4-actions button.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.c4-actions button:disabled{opacity:.45;cursor:default}
.c4-score{display:flex;justify-content:center;gap:18px;font-size:15px;color:var(--muted);margin:4px 0 6px;flex-wrap:wrap}
.c4-score b{color:var(--ink);font-size:17px}
.c4-score .r b{color:var(--red2)}.c4-score .y b{color:#b07d00}
@media (prefers-reduced-motion:reduce){.c4-disc,.c4-cell.win .c4-disc{animation:none}}
@media (max-width:420px){.c4-seg button{padding:6px 10px;font-size:13px}.c4-board{padding:4px;border-radius:12px}.c4-status{font-size:16px}}