/* ============ 13 路围棋 #/go ============ */
.go {
  --g-bg: #FBF6EF;
  --g-line: #6E4B2C;
  --g-black: #221A16;
  --g-white: #FFFDFB;
  --g-good: #4F9A5E;
  --g-bad: #D2604B;
  --g-board-size: min(72vh, 56vw, 620px);
  --g-cell: calc(var(--g-board-size) / 13);
  height: 100vh; height: 100dvh; background: var(--g-bg);
  overflow-y: auto; scrollbar-gutter: stable both-edges;
  display: flex; flex-direction: column; user-select: none; -webkit-user-select: none;
}
.go button { border: 0; background: none; padding: 0; font: inherit; color: inherit; }
.go .grow { flex: 1; }

/* ---------- 顶栏 ---------- */
.g-head { display: flex; align-items: center; gap: 16px; padding: 14px 24px 6px; }
.g-back { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 22px; }
.g-back:hover { border-color: var(--clay); }
.g-title { font-weight: 700; font-size: 22px; line-height: 1.05; }
.g-title small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: .08em; }
.g-sides { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--clay-deep); background: #F6E3DA; border-radius: 999px; padding: 7px 16px; white-space: nowrap; }

/* ---------- 棋盘 + 侧栏 ---------- */
.g-stage { flex: 1 0 auto; display: flex; align-items: flex-start; justify-content: center; gap: clamp(18px, 3vw, 40px); padding: 10px 24px 32px; min-height: 0; }
.g-boardwrap { position: relative; flex: none; }

.g-board {
  position: relative; width: var(--g-board-size); height: var(--g-board-size);
  background: radial-gradient(120% 120% at 28% 18%, #F1D8B4, #E0BA88 68%, #D2A672);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(80, 50, 30, .16), inset 0 0 0 1px rgba(120, 80, 40, .22);
  touch-action: manipulation;
}
/* 棋线画在交叉点上：线框正好落在 13 个点的中心 */
.g-lines {
  position: absolute; left: calc(var(--g-cell) / 2 - .5px); top: calc(var(--g-cell) / 2 - .5px);
  width: calc(var(--g-cell) * 12 + 1px); height: calc(var(--g-cell) * 12 + 1px);
  background-image:
    repeating-linear-gradient(to right, var(--g-line) 0 1px, transparent 1px var(--g-cell)),
    repeating-linear-gradient(to bottom, var(--g-line) 0 1px, transparent 1px var(--g-cell));
  opacity: .8;
}
.g-stars { position: absolute; inset: 0; }
.g-star { position: absolute; width: calc(var(--g-cell) * .26); height: calc(var(--g-cell) * .26); border-radius: 50%; background: var(--g-line); transform: translate(-50%, -50%); opacity: .85; }

.g-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(13, 1fr); }
.g-pt { position: relative; cursor: pointer; border-radius: 8px; }
.g-board.g-thinking .g-pt, .g-board.g-over .g-pt { cursor: default; }
.g-pt:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

.g-stone, .g-ghost { position: absolute; left: 50%; top: 50%; width: 92%; height: 92%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.g-stone { opacity: 0; transition: opacity .12s; }
.g-pt.g-filled .g-stone { opacity: 1; }
.g-pt.g-black .g-stone { background: radial-gradient(circle at 34% 28%, #574A3F, var(--g-black) 58%, #0E0B09); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.g-pt.g-white .g-stone { background: radial-gradient(circle at 34% 28%, #FFFFFF, #F3ECE3 60%, #D6CBBE); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(120, 100, 85, .3); }
/* 新落下的那一手才跑一次落子动画（只改这一个点，别的点不重画） */
.g-pt.g-last .g-stone { animation: gPop .18s ease; }
@keyframes gPop { from { transform: translate(-50%, -50%) scale(.45); opacity: .35; } }

/* 最后一手的标记：棋子正中的小圆点 */
.g-pt.g-last .g-stone::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; border-radius: 50%; transform: translate(-50%, -50%); }
.g-pt.g-last.g-black .g-stone::after { background: #F7F1E8; }
.g-pt.g-last.g-white .g-stone::after { background: var(--g-black); }

/* 悬停 / 光标处的半透明预览（触屏没有 hover，不会出现） */
.g-ghost { background: var(--g-black); opacity: 0; transition: opacity .16s; }
.go.g-as-white .g-ghost { background: var(--g-white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
.g-board:not(.g-thinking):not(.g-over) .g-pt.g-cursor:not(.g-filled) .g-ghost { opacity: .42; }
@media (hover: hover) {
  .g-board:not(.g-thinking):not(.g-over) .g-pt.g-ok:not(.g-filled):hover .g-ghost { opacity: .42; }
}

.g-pt.g-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 2px dashed var(--clay-deep); border-radius: 50%; opacity: .9; }

/* 终局：盖在棋盘上，不占版面高度 */
.g-end { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: rgba(34, 26, 22, .34); border-radius: 12px; animation: gFade .2s ease; }
.g-end-card { max-width: 100%; display: flex; flex-direction: column; gap: 5px; padding: 16px 20px; border-radius: 18px; background: var(--card); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); font-size: 15px; line-height: 1.55; color: var(--ink-2); text-align: center; }
.g-end-card b { font-size: 18px; color: var(--ink); }
.g-end-card .g-warn { color: var(--g-bad); font-weight: 600; }
@keyframes gFade { from { opacity: 0; } }

.g-toast {
  position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%);
  max-width: 92%; background: rgba(34, 26, 22, .92); color: #FFF7F0;
  font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center;
  padding: 9px 18px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
  animation: gToast .18s ease;
}
@keyframes gToast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- 侧栏 ---------- */
.g-panel { width: min(100%, 340px); display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 8px 24px rgba(80, 50, 30, .07); }
.g-turn { font-size: 20px; font-weight: 700; color: var(--ink); }
.g-caps { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 状态位：进度条 / 胜率估计 / 空着都是同一块高度，侧栏不会忽高忽低 */
.g-slot { height: 38px; display: flex; flex-direction: column; justify-content: center; gap: 6px; visibility: hidden; }
.g-slot.on { visibility: visible; }
.g-slot .g-bar { visibility: hidden; }
.g-slot.busy .g-bar { visibility: visible; }
.g-bar { height: 8px; border-radius: 999px; background: #EFE4DA; overflow: hidden; }
.g-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--clay); transition: width .12s linear; }
.g-slot span { font-size: 13px; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-opts { display: flex; align-items: center; gap: 8px; }
.g-levels { flex: 1; display: flex; gap: 6px; background: #F4EBE2; border-radius: 999px; padding: 4px; }
.g-levels button { flex: 1; padding: 8px 10px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.g-levels button.on { background: var(--clay); color: #fff; }
.g-opts .g-tog { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-3); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.g-opts .g-tog::before { content: "○ "; }
.g-opts .g-tog.on { background: #EAF3EC; border-color: #CFE3D4; color: var(--g-good); }
.g-opts .g-tog.on::before { content: "● "; }
.g-opts .g-tog:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.g-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-acts .g-btn:first-child { grid-column: 1 / -1; }

.go .g-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 12px 16px; border: 1px solid transparent; border-radius: 14px; background: var(--clay-deep); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 0 rgba(112, 57, 40, .18); transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.go .g-btn.ghost { background: #FFF9F2; color: var(--clay-deep); border-color: #D7B6A6; box-shadow: 0 3px 0 rgba(112, 57, 40, .07); }
.go .g-btn:active:not(:disabled) { background: #854635; box-shadow: 0 1px 0 rgba(112, 57, 40, .18); transform: translateY(2px); }
.go .g-btn.ghost:active:not(:disabled) { background: #EFDBCF; border-color: var(--clay-deep); box-shadow: 0 1px 0 rgba(112, 57, 40, .09); }
.go .g-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.go .g-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.g-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.g-note b { color: var(--ink-2); }

/* ---------- 竖屏 / 手机 ---------- */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .go { --g-board-size: min(94vw, 56vh); }
  .g-head { padding: 12px 16px 4px; gap: 10px; flex-wrap: wrap; }
  .g-title { font-size: 18px; }
  .g-sides { font-size: 13px; padding: 5px 12px; }
  .g-stage { flex-direction: column; align-items: center; gap: 14px; padding: 8px 16px 24px; }
  .g-boardwrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .g-panel { width: min(100%, 520px); padding: 12px; gap: 10px; border-radius: 18px; }
  .g-turn { font-size: 18px; }
  .g-end { padding: 10px; }
  .g-end-card { padding: 13px 16px; font-size: 14px; }
  .g-end-card b { font-size: 16px; }
  .g-acts { gap: 6px; }
  .go .g-btn { min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 15px; }
  .g-levels button { font-size: 14px; padding: 7px 8px; }
  .g-opts .g-tog { font-size: 13px; padding: 7px 10px; }
  .g-note { font-size: 12px; }
}