/* 詰碁の見た目（共通は ../common/base.css）。盤と石は games/igo と同じ素材 */
#board { user-select: none; -webkit-user-select: none; touch-action: manipulation; display: block; width: 100%; height: auto; border-radius: 6px; outline: 4px solid transparent; outline-offset: -4px; transition: outline-color var(--dur); }
#board.on { outline-color: var(--accent); }
.board-wrap { max-width: 600px; margin: 0 auto; }

/* 石・番号 */
.stone { pointer-events: none; }
.num { font: 800 26px var(--font); pointer-events: none; }
.num.on-black { fill: #F3F0E8; }
.num.on-white { fill: #1F2328; }

/* 問題の外の点（薄いベール） */
.veil { fill: var(--bg); fill-opacity: .62; pointer-events: none; }

/* 印: アタリ・ヒント・キーボードの枠・CPUが打つ所・返された手 */
.mark { fill: none; pointer-events: none; }
.mark.atari { stroke: #C8453B; stroke-width: 4; stroke-dasharray: 9 5; }
.mark.atari-lib { fill: rgba(255, 248, 234, .8); stroke: #C8453B; stroke-width: 4; }
.mark.hint { stroke: #2E7D4F; stroke-width: 7; fill: #2E7D4F; fill-opacity: .18; }
.mark.hint-area { stroke: #2E7D4F; stroke-width: 6; stroke-dasharray: 12 7; fill: #2E7D4F; fill-opacity: .1; }
.mark.cursor { stroke: var(--warn); stroke-width: 5; stroke-dasharray: 9 6; }
.mark.cpu { fill: rgba(255, 248, 234, .55); stroke: #2F5D8A; stroke-width: 5; }
.mark.refute { stroke: #B23A3A; stroke-width: 6; }
.hit { fill: transparent; cursor: pointer; }
#fx, #over, #veil { pointer-events: none; }

.board-wrap .callout { padding: 6px 18px; font-size: clamp(17px, 4vw, 24px); top: 44%; }
.stage { padding: 12px; }
@media (max-width: 560px) {
  .stage { margin-left: -8px; margin-right: -8px; padding: 6px; } /* 盤だけ左右に広げる（ページの余白は共通の16px） */
}

.result-box .score { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.result-box { inset: auto 6% 5%; padding: 16px 20px; } /* 盤の上の方を見せたまま、結果は下に出す */
.result-box h2 { font-size: 1.4rem; margin-bottom: 6px; }
.result-box.at-top { inset: 5% 6% auto; }
@media (max-width: 520px) { .result-box { inset: auto 0 3%; } .result-box.at-top { inset: 3% 0 auto; } .result-box .controls .btn { padding: 0 12px; } }

.howto img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.howto figcaption { text-align: center; }

/* まちがえた理由 */
.why { max-width: 600px; margin: 8px auto 0; border: 2px solid var(--ng); border-radius: var(--radius); background: var(--surface); padding: 10px 14px; }
.why-title { margin: 0 0 4px; font-weight: 800; color: var(--ng); font-size: 1.05rem; }
.why-text { margin: 0 0 8px; }
.why .controls { margin: 0; }

/* 状態のバー（問題・目的・あと何手） */
.status { flex-wrap: wrap; row-gap: 2px; }
.status .goal { margin-left: 10px; font-weight: 700; color: var(--accent); }
.status .left-moves { margin-left: auto; font-weight: 700; white-space: nowrap; }
.status .badge { display: inline-block; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; margin-left: 6px; }
.status .badge.solved { color: var(--ok); }

/* 問題の一覧 */
.list { max-width: 600px; margin: 12px auto 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.list-title { font-weight: 700; margin-right: auto; }
.list-tabs { display: inline-flex; gap: 6px; }
.list-tabs .btn { min-height: 44px; padding: 0 14px; }
.list-tabs .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.list-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.list-grid button { width: 100%; min-height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: 700 16px var(--font); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 2px; }
.list-grid button .mk { font-size: 14px; font-weight: 800; min-height: 1em; }
.list-grid button.clean .mk { color: var(--ok); }
.list-grid button.solved .mk { color: var(--warn); }
.list-grid button.seen .mk { color: var(--ng); }
.list-grid button.now { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.list-note { font-size: 14px; color: var(--ink-sub); margin: 8px 0 0; }

/* 盤の座標（設定でオン。英語圏の表記 A–T・1–19）。木のふちは焦げ茶、盤の外の帯は文字の色 */
.coords text { font: 700 22px var(--font); text-anchor: middle; pointer-events: none; }
.coords .on-wood { fill: rgba(40, 28, 16, .88); }
.coords .off-wood { fill: var(--ink-sub); }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */