/* =========================================================
   我的工具 · 五子棋
   页面壳（页头、机器人、记分、难度、状态）沿用 tictactoe.css 的 .ttt-* 公共样式；
   本文件只放十五路棋盘、棋子、落点预览和悔棋按钮。
   ========================================================= */
.gmk-board-wrap{display:flex;justify-content:center;width:100%}
.gmk-board{
  position:relative;width:100%;max-width:460px;aspect-ratio:1/1;overflow:hidden;
  border-radius:18px;border:1px solid #e2d7c2;
  background:linear-gradient(160deg,#f9f4e8 0%,#f3ead8 55%,#efe5d0 100%);
  box-shadow:inset 0 1px 4px rgba(96,72,38,.07),0 2px 10px rgba(44,62,45,.05);
  touch-action:none;outline:none;user-select:none;-webkit-user-select:none;
}
.gmk-board:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gmk-grid{position:absolute;inset:0;width:100%;height:100%;display:block}
.gmk-grid line{stroke:#8b957f;stroke-width:1;shape-rendering:crispEdges}
.gmk-grid circle{fill:#6f7a65}

.gmk-win-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.gmk-win-svg line{
  stroke:rgba(90,122,92,.62);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:gmk-line-in .34s ease-out .06s forwards;
}
@keyframes gmk-line-in{to{stroke-dashoffset:0}}

.gmk-stone{
  position:absolute;width:5.6%;aspect-ratio:1/1;border-radius:50%;
  transform:translate(-50%,-50%);z-index:2;pointer-events:none;
}
.gmk-stone--me{
  background:radial-gradient(circle at 34% 28%,#789679 0%,#4f7351 46%,#334d36 100%);
  box-shadow:0 1px 2px rgba(39,58,41,.32);
}
.gmk-stone--bot{
  background:radial-gradient(circle at 34% 28%,#d0a474 0%,#a9743f 46%,#7b4e28 100%);
  box-shadow:0 1px 2px rgba(84,52,24,.32);
}
.gmk-stone.is-last:after{
  content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;
  border-radius:50%;background:#f6f3e9;opacity:.9;
}
.gmk-stone.is-new{animation:gmk-drop .18s cubic-bezier(.2,.8,.2,1)}
@keyframes gmk-drop{
  from{transform:translate(-50%,-50%) scale(.5);opacity:.35}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}
}

.gmk-ghost{
  position:absolute;width:5.6%;aspect-ratio:1/1;border-radius:50%;
  transform:translate(-50%,-50%);z-index:3;pointer-events:none;
  background:rgba(79,115,81,.3);border:1.5px solid rgba(79,115,81,.55);
}
.gmk-cursor{
  position:absolute;width:7.2%;aspect-ratio:1/1;border-radius:50%;
  transform:translate(-50%,-50%);z-index:4;pointer-events:none;
  border:1.5px dashed rgba(79,115,81,.85);
}

.gmk-foot{display:flex;align-items:center;justify-content:center;gap:14px;min-height:34px;flex-wrap:wrap}
.gmk-foot .ttt-status{margin:0}
.gmk-undo{
  display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;
  border-radius:999px;border:1px solid var(--line);background:var(--raise);
  font-size:11.5px;color:var(--ink-2);box-shadow:0 1px 4px rgba(44,62,45,.05);
  transition:transform .15s ease,opacity .15s ease;
}
.gmk-undo:active{transform:scale(.96)}
.gmk-undo:disabled{opacity:.4;box-shadow:none}
.gmk-undo svg{width:14px;height:14px}

@media (min-width:768px){
  .gmk-board{border-radius:20px}
}

@media (prefers-reduced-motion:reduce){
  .gmk-stone.is-new{animation:none}
  .gmk-win-svg line{animation:none;stroke-dashoffset:0}
}