/* VictorIA — Connect 4: classic blue board, red/yellow discs. */
:root {
  --bg:#0e1726; --panel:#16223a; --ink:#eaf1fb; --muted:#93a7c8;
  --board:#1d4ed8; --board-dk:#1e3a8a; --red:#ef4444; --yellow:#fbbf24; --line:#243857;
}
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(1000px 500px at 70% -10%,#1b2b4a 0%,var(--bg) 55%); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.6; }
.topbar { display:flex; justify-content:space-between; align-items:baseline; padding:16px clamp(18px,5vw,48px); border-bottom:1px solid var(--line); }
.brand { font-weight:800; font-size:24px; letter-spacing:-.5px; }
.brand::first-letter { color:var(--yellow); }
.sub { color:var(--muted); font-size:13px; }
main { max-width:760px; margin:0 auto; padding:24px clamp(18px,5vw,48px); }
.intro h1 { font-size:clamp(28px,5vw,42px); margin:0 0 10px; }
.intro p { color:var(--muted); }

.play { margin:26px 0; text-align:center; }
.status { font-weight:700; margin-bottom:12px; min-height:24px; }
.board { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; background:var(--board); border:6px solid var(--board-dk); border-radius:16px; padding:10px; max-width:460px; margin:0 auto; box-shadow:0 16px 40px rgba(29,78,216,.3); }
.cell { aspect-ratio:1; border-radius:50%; background:var(--bg); border:none; cursor:pointer; transition:transform .08s ease; }
.cell:hover { transform:scale(1.05); }
.cell.p1 { background:radial-gradient(circle at 35% 30%, #ff7a7a, var(--red)); }
.cell.p2 { background:radial-gradient(circle at 35% 30%, #fde08a, var(--yellow)); }

.controls { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:18px; }
.btn { border:1px solid var(--line); background:#1d2b46; color:var(--ink); border-radius:10px; padding:10px 16px; font-weight:600; cursor:pointer; }
.btn.primary { background:linear-gradient(135deg,var(--board),#3b82f6); border-color:transparent; }
.depth { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }

.how { margin:34px 0; border-top:1px solid var(--line); padding-top:24px; }
.how h2 { font-size:22px; }
.muted { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.c { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.c h3 { margin:0 0 6px; color:var(--yellow); font-size:16px; }
.c p { margin:0; color:var(--muted); font-size:14px; }
.pipeline { color:var(--muted); padding-left:20px; }
.pipeline li { margin:6px 0; }
.pipeline strong { color:var(--ink); }

.site-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; max-width:760px; margin:20px auto 0; padding:24px clamp(18px,5vw,48px); border-top:1px solid var(--line); color:var(--muted); font-size:13px; }