/* =============================================================
   GAME: Five in a Row (Gomoku)
   ============================================================= */
.board-gomoku {
  --n: 15; --cell: min(calc((100vw - 76px) / 15), 38px);
  --gm-line: rgba(92, 52, 14, .78);
  width: calc(var(--cell) * var(--n) + 16px); height: calc(var(--cell) * var(--n) + 16px);
  padding: 8px; border-radius: 12px;
  /* kaya wood: soft light, fine grain, wider growth bands, warm base */
  background:
    radial-gradient(ellipse 70% 55% at 28% 18%, rgba(255, 246, 220, .38), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(120, 66, 18, .16), transparent 70%),
    repeating-linear-gradient(93deg, rgba(140, 84, 26, 0) 0 5px, rgba(140, 84, 26, .1) 5px 6px, rgba(140, 84, 26, 0) 6px 11px, rgba(110, 60, 15, .07) 11px 13px),
    repeating-linear-gradient(87deg, rgba(255, 236, 190, 0) 0 31px, rgba(255, 236, 190, .14) 31px 37px, rgba(255, 236, 190, 0) 37px 58px),
    repeating-linear-gradient(91deg, rgba(150, 90, 30, 0) 0 47px, rgba(150, 90, 30, .1) 47px 50px),
    linear-gradient(180deg, #efcf93 0%, #e2b673 55%, #d6a660 100%);
  box-shadow: 0 0 0 2px #ffb347, 0 0 26px rgba(255, 166, 43, .35),
    inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(90, 50, 10, .25), 0 10px 22px rgba(0, 0, 0, .4);
}
.gm-grid { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.gm-lines { position: absolute; inset: calc(var(--cell) / 2); pointer-events: none;
  background-image: linear-gradient(var(--gm-line) 1px, transparent 1px), linear-gradient(90deg, var(--gm-line) 1px, transparent 1px);
  background-size: calc(100% / 14 - .01px) calc(100% / 14 - .01px); border-right: 1px solid var(--gm-line); border-bottom: 1px solid var(--gm-line);
  box-shadow: 0 0 0 1px rgba(92, 52, 14, .35); }
.gm-star { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #5c340e; pointer-events: none; }
.gm-cell { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; z-index: 1; -webkit-tap-highlight-color: transparent; }
.gm-cell:focus-visible { outline: 2px solid #7a2cff; outline-offset: -2px; border-radius: 50%; }
/* hover: a ghost of the stone about to be played */
.gm-cell:hover:empty::after { content: ""; width: 80%; height: 80%; border-radius: 50%; opacity: .45; background: #1a1720; }
.board-gomoku[data-turn="2"] .gm-cell:hover:empty::after { background: #fffaf0; opacity: .6; }
.board-gomoku.gm-wait .gm-cell:hover:empty::after { display: none; }

/* glossy stones with a contact shadow on the wood */
.gm-stone { position: relative; width: 88%; height: 88%; border-radius: 50%; animation: gm-place .18s ease-out; }
.gm-stone.b {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 14%, transparent 30%),
    radial-gradient(circle at 42% 38%, #4d4857 0%, #24212b 45%, #09080c 85%);
  box-shadow: 1px 2px 2px rgba(40, 20, 0, .45), 0 0 1px rgba(0, 0, 0, .6);
}
.gm-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%, #fffdf8 0%, #efe9dd 50%, #c9c0ae 88%, #ada392 100%);
  box-shadow: 1px 2px 2px rgba(40, 20, 0, .4), inset 0 -1px 1px rgba(80, 60, 30, .25);
}
@keyframes gm-place { from { transform: scale(1.25); opacity: 0; } }
/* last move: a small red mark in the middle of the stone */
.gm-stone.last::after { content: ""; position: absolute; inset: 37%; border-radius: 50%; background: #ff3d4f; box-shadow: 0 0 4px rgba(255, 61, 79, .8); }
/* five in a row: glowing halo + a light beam through the stones */
.gm-stone.win { animation: gm-win .7s ease-in-out infinite alternate; box-shadow: 0 0 0 2px #ffb21f, 0 0 12px 3px rgba(255, 150, 20, .85); }
@keyframes gm-win { to { box-shadow: 0 0 0 2px #fff1c2, 0 0 18px 6px rgba(255, 150, 20, .9); } }
.gm-win { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; filter: drop-shadow(0 0 2px #fff3c9) drop-shadow(0 0 6px #ff8a1f); }
.gm-win line { stroke: #ff9d1f; stroke-width: .16; stroke-linecap: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: gm-beam .45s ease-out .1s forwards; }
@keyframes gm-beam { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .gm-win line { stroke-dashoffset: 0; } }