/* =============================================================
   GAME: Renju — 15×15, forbidden points for Black
   ============================================================= */
.board-renju {
  --n: 15; --cell: min(calc((100vw - 76px) / 15), 38px);
  --rj-line: rgba(70, 36, 8, .8);
  width: calc(var(--cell) * var(--n) + 16px); height: calc(var(--cell) * var(--n) + 16px);
  padding: 8px; border-radius: 12px;
  /* deep honey kaya with fine straight grain */
  background:
    radial-gradient(ellipse 70% 55% at 30% 18%, rgba(255, 236, 196, .34), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 92%, rgba(90, 40, 8, .22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 62, 14, 0) 0 4px, rgba(120, 62, 14, .09) 4px 5px, rgba(120, 62, 14, 0) 5px 9px, rgba(96, 48, 10, .07) 9px 11px),
    repeating-linear-gradient(89deg, rgba(255, 220, 160, 0) 0 27px, rgba(255, 220, 160, .12) 27px 33px, rgba(255, 220, 160, 0) 33px 61px),
    linear-gradient(180deg, #e4b871 0%, #d39d52 55%, #c58c43 100%);
  box-shadow: 0 0 0 2px #e8c27a, 0 0 26px rgba(232, 194, 122, .38),
    inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -4px 0 rgba(80, 40, 6, .3), 0 10px 22px rgba(0, 0, 0, .45);
}
.rj-grid { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.rj-lines { position: absolute; inset: calc(var(--cell) / 2); pointer-events: none;
  background-image: linear-gradient(var(--rj-line) 1px, transparent 1px), linear-gradient(90deg, var(--rj-line) 1px, transparent 1px);
  background-size: calc(100% / 14 - .01px) calc(100% / 14 - .01px); border-right: 1px solid var(--rj-line); border-bottom: 1px solid var(--rj-line);
  box-shadow: 0 0 0 1px rgba(70, 36, 8, .4); }
.rj-star { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #4a2508; pointer-events: none; }
.rj-cell { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; z-index: 1; -webkit-tap-highlight-color: transparent; }
.rj-cell:focus-visible { outline: 2px solid #6b2cff; outline-offset: -2px; border-radius: 50%; }
.rj-cell:hover:empty::after { content: ""; width: 80%; height: 80%; border-radius: 50%; opacity: .45; background: #1a1720; }
.board-renju[data-turn="2"] .rj-cell:hover:empty::after { background: #fffaf0; opacity: .6; }
.board-renju.rj-wait .rj-cell { cursor: default; }
.board-renju.rj-wait .rj-cell:hover:empty::after { display: none; }
.rj-cell.forb { cursor: not-allowed; }

/* glossy stones */
.rj-stone { position: relative; width: 88%; height: 88%; border-radius: 50%; animation: rj-place .18s ease-out; }
.rj-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, .5), 0 0 1px rgba(0, 0, 0, .6);
}
.rj-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, .45), inset 0 -1px 1px rgba(80, 60, 30, .25);
}
@keyframes rj-place { from { transform: scale(1.25); opacity: 0; } }
.rj-stone.last::after { content: ""; position: absolute; inset: 37%; border-radius: 50%; background: #ff3d4f; box-shadow: 0 0 4px rgba(255, 61, 79, .8); }
.rj-stone.win { animation: rj-win .7s ease-in-out infinite alternate; box-shadow: 0 0 0 2px #ffd36b, 0 0 12px 3px rgba(255, 190, 60, .85); }
@keyframes rj-win { to { box-shadow: 0 0 0 2px #fff4cf, 0 0 18px 6px rgba(255, 190, 60, .9); } }

/* forbidden point for Black: a red cross on the intersection */
.rj-x { position: relative; width: 62%; height: 62%; pointer-events: none; }
.rj-x::before, .rj-x::after { content: ""; position: absolute; left: 50%; top: 0; width: 2.5px; height: 100%; margin-left: -1.25px; border-radius: 2px; background: #e0102e; box-shadow: 0 0 3px rgba(255, 40, 70, .7); }
.rj-x::before { transform: rotate(45deg); }
.rj-x::after { transform: rotate(-45deg); }
/* the first stone goes on the centre point */
.rj-hint { width: 60%; height: 60%; border-radius: 50%; border: 2px dashed rgba(30, 15, 0, .7); animation: rj-hint 1s ease-in-out infinite alternate; }
@keyframes rj-hint { to { transform: scale(1.18); } }

.rj-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 #ff9a1f); }
.rj-win line { stroke: #ffb02e; stroke-width: .16; stroke-linecap: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rj-beam .45s ease-out .1s forwards; }
@keyframes rj-beam { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rj-win line { stroke-dashoffset: 0; } .rj-hint { animation: none; } }

.rj-dot.p1 { background: #15121f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.rj-dot.p2 { background: #f4f2ff; }
.rj-note { color: var(--muted); font-weight: 600; font-size: .92em; }
.rj-note.warn { color: #ff8f8f; }