/* 圍棋頁（2026-10-05）：與 css/xiangqi.css、css/chess.css 同一個骨架；色調取榧木棋盤與榻榻米的暖色。 */
/* 字級倍率：這一頁沒有 css/themes.css，少了它 calc(… * var(--fs)) 全部失效（象棋頁踩過） */
:root { --fs: 1; }
body.go { background: #1c1610; }
#go-gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.go-loading { position: fixed; inset: 0; display: grid; place-content: center; gap: 14px; justify-items: center;
  background: #1c1610; color: #efe2c6; z-index: 30; transition: opacity .4s ease; }
.go-loading.done { opacity: 0; pointer-events: none; }

.go-top { position: fixed; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 14px; z-index: 5; pointer-events: none; }
.go-top > * { pointer-events: auto; }
.go-top > .btn { display: inline-flex; align-items: center; flex: 0 0 auto; width: auto; }
.go-title { white-space: nowrap; display: flex; align-items: baseline; gap: 12px; margin-right: auto; color: #f5ead2; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.go-title h1 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: calc(26px * var(--fs)); letter-spacing: .2em; }
.go-title p { margin: 0; font-size: calc(13px * var(--fs)); color: #dcc9a3; letter-spacing: .06em; }

.go-panel { position: fixed; top: 70px; right: 12px; width: min(220px, 34vw);
  padding: 14px 16px; border-radius: 14px; z-index: 4;
  background: rgba(30, 23, 15, .8); border: 1px solid rgba(232, 200, 150, .2); color: #f2e7d0; backdrop-filter: blur(4px); }
.go-turn { display: flex; align-items: center; gap: 10px; font-size: calc(16px * var(--fs)); letter-spacing: .08em; }
.go-dot { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #555, #0d0d0d); box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.go-turn.white .go-dot { background: radial-gradient(circle at 35% 35%, #fff, #d9d5ca); }
.go-status { min-height: 1.4em; margin: 8px 0 0; font-size: calc(14px * var(--fs)); color: #ffd28a; font-weight: 700; letter-spacing: .06em; }
.go-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0 0; }
.go-stats div { display: grid; gap: 2px; }
.go-stats dt { font-size: calc(12px * var(--fs)); color: #c9b48d; letter-spacing: .08em; }
.go-stats dd { margin: 0; font-size: calc(18px * var(--fs)); font-weight: 700; font-variant-numeric: tabular-nums; }

.go-actions { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; z-index: 5;
  padding: 8px; border-radius: 999px; background: rgba(30, 23, 15, .65); backdrop-filter: blur(4px); }
.go-actions .btn[disabled] { opacity: .45; pointer-events: none; }

.go-result { text-align: center; }
.go-result .big { font-family: var(--serif); font-size: calc(32px * var(--fs)); font-weight: 900; letter-spacing: .14em; margin: 6px 0 4px; }
.go-result .why { color: var(--muted); margin: 0 0 6px; }
.go-result table { margin: 10px auto 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.go-result th, .go-result td { padding: 4px 14px; text-align: right; }
.go-result th:first-child { text-align: left; font-weight: 500; color: var(--muted); }

@media (max-width: 720px) {
  .go-title p { display: none; }
  .go-title h1 { letter-spacing: .1em; }
  .go-panel { top: auto; bottom: 120px; right: 12px; left: 12px; width: auto; padding: 10px 12px; }
  .go-stats { grid-template-columns: repeat(4, 1fr); }
  .go-actions { left: 12px; right: 12px; transform: none; border-radius: 16px; }
  /* 四顆按鈕要擠在一列：基本的 .btn 有最小寬度，不改的話會一顆一列、蓋住上面的面板（實際看過） */
  .go-actions { flex-wrap: nowrap; gap: 6px; }
  .go-actions .btn { min-width: 0; flex: 1 1 0; padding: 8px 4px; white-space: nowrap; }
}

/* ---------- 圍棋教學頁（go-learn.html，2026-10-06）：與 css/xiangqi.css 的教學頁同一個樣子 ---------- */
/* 教學頁沿用網站淺色的閱讀版面（css/learn.css），body.go 的深底色在這裡蓋回去 */
body.go.learn-page { background: var(--site-bg-color, #f6f1e6); }
.go-board-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px;
  margin-top: 18px; padding: 16px; border-radius: 14px; background: #2a2016; border: 1px solid rgba(232, 200, 150, .2); }
.go-board-canvas { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #1c1610; }
.go-board-canvas canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.go-board-side { color: #f2e7d0; }
.go-board-title { margin: 0 0 6px; font: 900 calc(18px * var(--fs)) var(--site-display, "Noto Serif TC", serif); letter-spacing: .06em; }
.go-board-note { margin: 0 0 8px; color: #d4c09b; font-size: calc(14px * var(--fs)); line-height: 1.7; }
.go-board-count { margin: 0 0 10px; color: #ffd166; font-weight: 700; font-size: calc(14px * var(--fs)); }
.go-board-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.go-demo-list { display: grid; gap: 22px; margin-top: 20px; }
.go-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: center;
  padding: 14px; border-radius: 14px; background: var(--site-card, #fffaf0); border: 1px solid var(--site-line, rgba(60, 40, 20, .12)); }
.go-demo-board { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #1c1610; }
.go-demo-board canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.go-demo-text h3 { margin: 0 0 8px; font: 900 calc(17px * var(--fs)) var(--site-display, "Noto Serif TC", serif); color: var(--site-heading, #2a2622); }
.go-demo-text p { margin: 0 0 8px; line-height: 1.8; }
.go-demo-count { color: var(--site-accent, #8a5a2b); font-weight: 700; font-size: calc(13px * var(--fs)); }
@media (max-width: 720px) {
  .go-board-card, .go-demo { grid-template-columns: minmax(0, 1fr); }
}