/* The Gomoku board and stones, shared by games/gomoku.html and the profile preview.
   The look comes from CSS variables set by js/shared/gomoku-look.js:
   --board-bg, --line, --stone-black, --stone-white, and the class .s3d (3D stones). */
.board{--n:15;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);width:100%;max-width:620px;margin:0 auto;aspect-ratio:1;background:var(--board-bg,#dcb06b);border-radius:8px;padding:1.5%;box-shadow:0 4px 18px rgba(0,0,0,.4);touch-action:manipulation}
.board .grid{position:absolute;left:1.5%;top:1.5%;width:97%;height:97%;pointer-events:none}
.board .grid path{stroke:var(--line,#4a3214);stroke-width:1px;vector-effect:non-scaling-stroke;fill:none}
/* Coordinates (the game board): a wider margin at the left and bottom, --m, for the letters and numbers */
.board.labeled{--p:1.5%;--m:5.5%;padding:var(--p) var(--p) var(--m) var(--m);container-type:inline-size}
.board.labeled .grid{left:var(--m);top:var(--p);width:calc(100% - var(--m) - var(--p));height:calc(100% - var(--m) - var(--p))}
.lbls{position:absolute;inset:0;pointer-events:none}
.lbl{position:absolute;font-size:max(8px,2.1cqw);font-weight:700;line-height:1;color:var(--line,#4a3214);opacity:.85;transform:translate(-50%,-50%)}
.lbl.col{bottom:calc(var(--m) / 2);transform:translate(-50%,50%)}
.lbl.row{left:calc(var(--m) / 2)}
.pt{position:relative;z-index:1;border:0;background:none;padding:0;margin:0;cursor:pointer;aspect-ratio:1;min-width:0}
.pt .st{position:absolute;inset:7%;border-radius:50%;z-index:1;pointer-events:none}
.pt.star .st{inset:38%;background:var(--line,#4a3214)}

/* Flat stones (default) */
.pt.b .st,.pt.w .st{inset:7%}
.pt.b .st{background:var(--stone-black,#141414);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.pt.w .st{background:var(--stone-white,#f2f2f2);box-shadow:0 0 0 1px rgba(0,0,0,.35)}

/* 3D stones (reward for a win on Medium) */
.s3d .pt.b .st{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--stone-black,#141414),#fff 45%) 0,var(--stone-black,#141414) 55%,color-mix(in srgb,var(--stone-black,#141414),#000 45%) 100%);box-shadow:1px 3px 4px rgba(0,0,0,.5)}
.s3d .pt.w .st{background:radial-gradient(circle at 34% 30%,#fff 0,var(--stone-white,#f2f2f2) 45%,color-mix(in srgb,var(--stone-white,#f2f2f2),#000 30%) 100%);box-shadow:1px 3px 4px rgba(0,0,0,.5)}

.pt.pending .st{opacity:.6}
.pt.last .st::after{content:'';position:absolute;inset:38%;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #000}
.pt.win .st{box-shadow:0 0 0 3px var(--accent),0 0 10px var(--accent)}
.board.mine .pt:not(.b):not(.w):hover .st{inset:12%;background:var(--stone-black,#141414);opacity:.35}
.board.mine.white .pt:not(.b):not(.w):hover .st{background:var(--stone-white,#f2f2f2);opacity:.55}
.pt:focus-visible{outline:2px solid var(--blue);outline-offset:-1px;z-index:2;border-radius:4px}

/* Player colour dots next to the names (the dot's shape: css/games/board-game.css) */
.dot.black{background:var(--stone-black,#141414)}
.dot.white{background:var(--stone-white,#f2f2f2)}