/* チェス固有の見た目（共通は ../common/base.css） */
#board { user-select: none; -webkit-user-select: none; touch-action: none; display: block; width: 100%; height: auto; }
.board-wrap { max-width: 600px; margin: 0 auto; position: relative; }

/* 盤の上の帯: 2人の名札・取った駒・駒の点の差。手番の人を濃く */
/* 名札の地はダーク表示でも明るいまま（黒の駒の小さな絵が見えるように） */
.score-tag .tag-bg { fill: #F2EDE2; stroke: #D9D6CE; stroke-width: 2; }
.score-tag .tag-name { font: 700 20px var(--font); fill: #1F2328; }
.score-tag .tag-adv { font: 800 20px var(--font); fill: #1F2328; font-variant-numeric: tabular-nums; }
.score-tag.on .tag-bg { fill: #FFFFFF; stroke: #2F5D8A; stroke-width: 5; }

.coords text { font: 700 14px var(--font); fill: rgba(255, 244, 225, .9); }

/* 手番の人の色を盤のふちに（白＝白／黒＝墨色） */
.turn-frame { fill: none; stroke-width: 7; opacity: 0; pointer-events: none; transition: opacity var(--dur); }
.turn-frame.c0 { stroke: #FBF8F0; opacity: .95; }
.turn-frame.c1 { stroke: #1F2328; opacity: .9; }
.status .piece-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid var(--ink-sub); display: inline-block; vertical-align: -5px; margin-right: 6px; }
.status .piece-dot.c0 { background: #E8DCC2; }
.status .piece-dot.c1 { background: #2B2D33; }

/* 駒（共通の .piece は使わない。SVG の transform 属性で位置を持つため） */
.cp { pointer-events: none; filter: var(--shadow-piece); }
.cp.up { filter: var(--shadow-lift); }
.cp.drag { filter: var(--shadow-lift); opacity: .92; }

/* 印: 直前の手・チェック・ねらわれている駒・選んだ駒・行き先・ヒント・キーボードの枠・CPUの手 */
.mark { pointer-events: none; }
.mark.last { fill: rgba(255, 214, 74, .38); }
.mark.sel { fill: rgba(63, 134, 217, .45); }
.mark.danger { fill: none; stroke: #E0402F; stroke-width: 4; stroke-dasharray: 7 5; }
.mark.dest { fill: rgba(31, 35, 40, .5); stroke: rgba(255, 248, 234, .75); stroke-width: 2; }
.mark.dest.cap { fill: none; stroke: rgba(31, 35, 40, .55); stroke-width: 6; }
.mark.hint { fill: none; stroke: #3F86D9; stroke-width: 4; stroke-dasharray: 8 5; animation: hint 1.2s ease-in-out infinite; }
.mark.hintarrow { fill: none; stroke: #3F86D9; stroke-width: 9; stroke-linecap: round; opacity: .85; }
@keyframes hint { 50% { opacity: .45; } }
.mark.cursor { fill: none; stroke: #FFD24A; stroke-width: 4; stroke-dasharray: 7 5; }
.mark.cpu { fill: rgba(255, 248, 234, .35); stroke: #FFF8EA; stroke-width: 4; }
@media (prefers-reduced-motion: reduce) { .mark.hint { animation: none; } }

.board-wrap .callout { padding: 6px 18px; font-size: clamp(16px, 3.8vw, 22px); }
.stage { padding: 12px; }
@media (max-width: 560px) {
  .coords text { font-size: 18px; } /* 盤の座標（a〜h・1〜8）をスマホ幅でも12px以上に（D9） */
  .stage { margin-left: -8px; margin-right: -8px; } /* 盤だけ左右に広げる（ページの余白は共通の16px。D1） */
  .stage { padding: 6px; }
  .score-tag .tag-name { font-size: 23px; }
}

/* 成る駒を選ぶ窓（盤のまん中） */
.promo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; text-align: center; z-index: 5; width: min(92%, 360px); }
.promo-title { margin: 0 0 8px; font-weight: 700; }
.promo-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.promo-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 88px; border: 2px solid var(--line); border-radius: var(--radius); background: #F1E3C8; color: #1F2328; font: 600 14px var(--font); padding: 4px 2px; cursor: pointer; }
.promo-btn:hover, .promo-btn:focus-visible { border-color: var(--accent); outline: 3px solid var(--warn); outline-offset: 1px; }
.promo-btn img { width: 56px; height: 56px; }

/* 棋譜 */
.movelist { max-width: 600px; margin: 8px auto 0; max-height: 7.5em; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 8px; background: var(--bg); }
.movelist ol { margin: 0; padding-left: 2.6em; columns: 3 9em; column-gap: 16px; font-variant-numeric: tabular-nums; }
.movelist li { break-inside: avoid; }
.movelist li.empty { list-style: none; margin-left: -2.6em; color: var(--ink-sub); }
.movelist .mv { display: inline-block; min-width: 4.2em; }

.result-box .score { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.result-box { inset: 18% 8% auto; padding: 16px 20px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 6px; }
@media (max-width: 520px) { .result-box { inset: 12% 0 auto; } .result-box .controls .btn { padding: 0 12px; } }

.howto img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.howto figcaption { text-align: center; }
.article table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
.article th, .article td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --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: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */