/* 五子棋专属：木纹棋盘 + 黑白棋子。其余（弹窗/按钮/分段/面板）复用 style.css */
:root {
  --accent: #b8772e;
  --accent-2: #cf9445;
}

.brand { color: #8a5a1e; }
.back-btn, .sound-toggle, .status { color: #8a5a1e; }
.online-banner { color: #8a5a1e; }

.gboard-wrap { position: relative; }

.gboard {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #f3d9a4 0%, #e8c483 55%, #dcb46c 100%);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(140, 96, 38, 0.25);
  touch-action: manipulation;
  cursor: pointer;
}

.gboard .grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gboard .grid line { stroke: rgba(96, 64, 24, 0.7); stroke-width: 0.35; }
.gboard .grid .star { fill: rgba(96, 64, 24, 0.85); stroke: none; }

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

.stone {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.stone.black {
  background: radial-gradient(circle at 35% 30%, #6a6a6a, #1a1a1a 70%);
}
.stone.white {
  background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd2 75%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
/* 最后一手红点 */
.stone.last::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 26%; height: 26%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #e2483d;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
.stone.black.last::after { background: #ff6a5c; }