/* =============================================================
   GAME: Connect6 — 19×19 slate board
   ============================================================= */
.board-connect6 {
  --n: 19; --cell: min(calc((100vw - 64px) / 19), 30px);
  --c6-line: rgba(28, 46, 70, .72);
  width: calc(var(--cell) * var(--n) + 14px); height: calc(var(--cell) * var(--n) + 14px);
  padding: 7px; border-radius: 12px;
  /* cool slate with soft light and faint mineral streaks */
  background:
    radial-gradient(ellipse 70% 55% at 25% 15%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 95%, rgba(40, 70, 110, .2), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 40px, rgba(255, 255, 255, .08) 40px 46px, rgba(255, 255, 255, 0) 46px 90px),
    linear-gradient(160deg, #d3dde8 0%, #b9c8d8 55%, #a8b9cc 100%);
  box-shadow: 0 0 0 2px #7ab8ff, 0 0 26px rgba(122, 184, 255, .38),
    inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(30, 50, 80, .25), 0 10px 22px rgba(0, 0, 0, .4);
}
.c6-grid { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.c6-lines { position: absolute; inset: calc(var(--cell) / 2); pointer-events: none;
  background-image: linear-gradient(var(--c6-line) 1px, transparent 1px), linear-gradient(90deg, var(--c6-line) 1px, transparent 1px);
  background-size: calc(100% / 18 - .01px) calc(100% / 18 - .01px); border-right: 1px solid var(--c6-line); border-bottom: 1px solid var(--c6-line); }
.c6-star { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #1c2e46; pointer-events: none; }
.c6-cell { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; z-index: 1; -webkit-tap-highlight-color: transparent; }
.c6-cell:focus-visible { outline: 2px solid #ff3dcf; outline-offset: -1px; border-radius: 50%; }
.c6-cell:hover:empty::after { content: ""; width: 78%; height: 78%; border-radius: 50%; opacity: .42; background: #14121c; }
.board-connect6[data-turn="2"] .c6-cell:hover:empty::after { background: #fff; opacity: .6; }
.board-connect6.c6-wait .c6-cell { cursor: default; }
.board-connect6.c6-wait .c6-cell:hover:empty::after { display: none; }

/* glossy stones */
.c6-stone { position: relative; width: 90%; height: 90%; border-radius: 50%; animation: c6-place .18s ease-out; }
.c6-stone.b {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .12) 14%, transparent 30%),
    radial-gradient(circle at 42% 38%, #4a4f5e 0%, #20232e 45%, #07080c 85%);
  box-shadow: 1px 2px 2px rgba(10, 25, 45, .5), 0 0 1px rgba(0, 0, 0, .6);
}
.c6-stone.w {
  background:
    radial-gradient(circle at 34% 28%, #fff 0, rgba(255, 255, 255, .9) 12%, transparent 34%),
    radial-gradient(circle at 42% 38%, #ffffff 0%, #eef1f5 50%, #c3cad4 88%, #a5adb9 100%);
  box-shadow: 1px 2px 2px rgba(10, 25, 45, .45), inset 0 -1px 1px rgba(40, 60, 90, .25);
}
@keyframes c6-place { from { transform: scale(1.25); opacity: 0; } }
/* stones of the latest turn: a blue mark */
.c6-stone.last::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: #2f8cff; box-shadow: 0 0 4px rgba(47, 140, 255, .9); }
.c6-stone.win { animation: c6-win .7s ease-in-out infinite alternate; box-shadow: 0 0 0 2px #4fb0ff, 0 0 10px 3px rgba(60, 150, 255, .85); }
@keyframes c6-win { to { box-shadow: 0 0 0 2px #e4f3ff, 0 0 16px 6px rgba(60, 150, 255, .9); } }
.c6-win { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; filter: drop-shadow(0 0 2px #dff0ff) drop-shadow(0 0 6px #2f8cff); }
.c6-win line { stroke: #4fb0ff; stroke-width: .16; stroke-linecap: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: c6-beam .5s ease-out .1s forwards; }
@keyframes c6-beam { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .c6-win line { stroke-dashoffset: 0; } }

.c6-dot.p1 { background: #15121f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.c6-dot.p2 { background: #f4f2ff; }
.c6-left { color: #9fd0ff; padding: 2px 10px; border-radius: 999px; background: rgba(79, 176, 255, .14); }