/**
 * 棋盘样式。数值全部抄自设计稿 Board.dc.html，未重新设计。
 * 动画只用 transform / opacity，不触发布局。
 */

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 3.1%;
  border-radius: 12px;
  background: var(--board-grad);
  box-shadow: var(--board-inset), 0 10px 26px -14px rgba(15, 42, 63, .4);

  /* 移动端手势隔离。
     落子是双击确认，而浏览器原生的双击手势是「选中文本」——
     第二次点击会把整个棋盘容器选中，::selection 的蓝色铺满全盘，
     松手取消，看起来就是每次落子闪一下蓝光。
     touch-action 只防双击缩放，防不住选择，必须同时关掉选择与点按高亮。 */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;   /* 长按不弹「拷贝/查询」气泡 */
}

/* 子元素单独再声明一次：部分内核不从祖先继承这两个属性 */
.board *,
.board *::before,
.board *::after {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.board-grid { position: relative; width: 100%; height: 100%; cursor: pointer; }

.board-line { position: absolute; background: var(--board-line); }
.board-line--v { top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.board-line--h { left: 0; right: 0; height: 1px; margin-top: -.5px; }
.board-line--edge { background: var(--board-edge); }

.board-star {
  position: absolute;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--board-star);
}
.board-star--tengen { width: 6px; height: 6px; margin: -3px 0 0 -3px; }

/* 最后一手所在行列点亮 1.4 秒（设计稿 2c 的「加行列线」指示） */
.board-guides { position: absolute; inset: 0; pointer-events: none; }
.board-guide {
  position: absolute;
  background: color-mix(in srgb, var(--last-marker) 50%, transparent);
  z-index: 1;
  animation: omGuide 1.4s ease-out both;
}
.board-guide--v { top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.board-guide--h { left: 0; right: 0; height: 1px; margin-top: -.5px; }

.board-stones { position: absolute; inset: 0; pointer-events: none; }

.stone {
  position: absolute;
  width: calc(100% / 18 * .86);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  animation: stoneDrop 120ms ease-out both;
}
.stone--black {
  background: var(--stone-black);
  box-shadow: 0 2px 6px rgba(10, 25, 40, .45), inset 0 -1px 2px rgba(0, 0, 0, .35);
}
.stone--white {
  background: var(--stone-white);
  box-shadow: 0 2px 6px rgba(10, 25, 40, .26), inset 0 -1px 2px rgba(120, 140, 155, .35);
}

/* 落子预览：半透明 + 琥珀虚线圈 */
.stone--ghost { opacity: .55; z-index: 3; animation: none; }
.stone--ghost::after {
  content: '';
  position: absolute; inset: -30%;
  border-radius: 50%;
  border: 1.5px dashed var(--last-marker);
}

/* 最后一手：琥珀圈 + 一次波纹 */
.stone--last::before {
  content: '';
  position: absolute; inset: 22%;
  border-radius: 50%;
  border: 2.5px solid var(--last-marker);
  box-shadow: 0 0 0 1.5px rgba(255, 253, 248, .55);
}
.stone--last::after {
  content: '';
  position: absolute; inset: -55%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--last-marker) 80%, transparent);
  animation: omHalo 1.8s ease-out infinite;
}

/* 结算时连珠两端 */
.stone--win { box-shadow: 0 0 0 3px var(--accent), 0 2px 8px rgba(10, 25, 40, .4); }

/* 设置里的「对手落子指示」（设计稿 2c）：
   ring 只留琥珀圈，halo 额外加一圈波纹，lines 再把所在行列点亮 */
:root[data-last-move="ring"] .stone--last::after { display: none; }
:root:not([data-last-move="lines"]) .board-guide { display: none; }

@keyframes stoneDrop {
  from { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);  opacity: 1; }
}
@keyframes omHalo {
  0%        { transform: scale(.5);  opacity: .95; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}
@keyframes omGuide {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .stone { animation: none; }
  .stone--last::after { animation: none; opacity: 0; }
  .board-guide { animation: none; opacity: .5; }
}