/* 軍人将棋固有の見た目（共通は ../common/base.css） */
#board { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.board-wrap { max-width: 560px; margin: 0 auto; }

/* 盤 */
.band { fill: #5E3F24; opacity: .92; }
.gate { fill: #D9B178; stroke: #6B4A2A; stroke-width: 2; }
.gate-label { font: 700 22px var(--font); fill: #3B2715; }
.band-label { font: 700 22px var(--font); fill: #F3E3C6; opacity: .9; }
.gate-front { fill: #8A5A2B; opacity: .08; pointer-events: none; }
.hq { fill: #B0301C; fill-opacity: .07; stroke: #7A2A1A; stroke-width: 3; stroke-dasharray: 10 6; pointer-events: none; }
.hq-label { font: 700 20px var(--font); fill: #6B2A1A; opacity: .75; pointer-events: none; }
.turn-frame { fill: none; stroke-width: 7; stroke: var(--accent); opacity: 0; pointer-events: none; transition: opacity var(--dur); }
.turn-frame.on { opacity: .85; }

/* 駒: 五角形に文字だけ。自分＝明るい木、相手＝少し赤みのある木 */
.koma { pointer-events: none; filter: var(--shadow-piece); transition: filter var(--dur); }
.koma-edge { fill: none; stroke: #4A3220; stroke-width: 2.5; stroke-linejoin: round; }
.koma-tint-0 { fill: #F2D08E; opacity: .38; mix-blend-mode: multiply; }
.koma-tint-1 { fill: #C77A4A; opacity: .5; mix-blend-mode: multiply; }
.koma-text { font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-weight: 700; fill: #22160C; }
.koma-1 .koma-text { fill: #3A1608; }
.memo-pill { fill: #FFFFFF; stroke: #2F5D8A; stroke-width: 2.5; opacity: .95; }
.memo-text { font: 700 21px var(--font); fill: #2F5D8A; }
.moved-dot { fill: #3A1608; opacity: .55; }
.koma.lifted { filter: var(--shadow-lift); }
.koma.fading { opacity: .35; }

/* 印 */
.mark { fill: none; pointer-events: none; }
.mark.movable { stroke: var(--accent); stroke-width: 3.5; }
.mark.picked { stroke: var(--accent); stroke-width: 6; fill: var(--accent); fill-opacity: .18; }
.mark.target { fill: var(--accent); stroke: #FFF8EA; stroke-width: 3; }
.mark.target.take { fill: none; stroke: var(--accent); stroke-width: 6; }
.mark.cursor { stroke: var(--warn); stroke-width: 4; stroke-dasharray: 8 6; }
.mark.last-to { fill: rgba(255, 233, 168, .6); }
.mark.last-from { stroke: rgba(40, 28, 16, .45); stroke-width: 2.5; stroke-dasharray: 5 6; }
.mark.cpu { stroke: #FFF8EA; stroke-width: 6; }
.mark.hint { stroke: var(--ok); stroke-width: 6; fill: var(--ok); fill-opacity: .16; }
.mark.swap-ng { stroke: var(--ng); stroke-width: 5; stroke-dasharray: 9 6; }
:root[data-theme="dark"] .mark.movable, :root[data-theme="dark"] .mark.picked, :root[data-theme="dark"] .mark.target.take { stroke: #2F5D8A; }
:root[data-theme="dark"] .mark.target, :root[data-theme="dark"] .mark.picked { fill: #2F5D8A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark.movable, :root:not([data-theme="light"]) .mark.picked, :root:not([data-theme="light"]) .mark.target.take { stroke: #2F5D8A; }
  :root:not([data-theme="light"]) .mark.target, :root:not([data-theme="light"]) .mark.picked { fill: #2F5D8A; }
}
.hit { fill: transparent; cursor: pointer; }
#fx, #over { pointer-events: none; }

/* 下がった駒の欄（盤の上＝相手、下＝あなた） */
.fallen { max-width: 560px; margin: 4px auto; min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--ink-sub); }
.fallen .who { font-weight: 700; color: var(--ink); margin-right: 2px; }
.fallen .chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px; }
.fallen .chip.unknown { color: var(--ink-sub); border-style: dashed; }

.board-wrap .callout { padding: 6px 18px; font-size: clamp(17px, 4vw, 24px); top: 50%; }
.stage { padding: 12px; }
@media (max-width: 560px) {
  .stage { margin-left: -8px; margin-right: -8px; padding: 6px; }
}

/* 審判の判定 */
.judge-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 10px 16px 12px; text-align: center; min-width: min(300px, 92%); pointer-events: none;
}
.judge-head { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-sub); letter-spacing: .1em; }
.judge-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.judge-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; }
.judge-side .who { font-size: 14px; color: var(--ink-sub); }
.judge-side .kind { font-size: 1.25rem; font-weight: 700; }
.judge-side .kind.unknown { color: var(--ink-sub); }
.judge-side.lose .kind { opacity: .45; text-decoration: line-through; text-decoration-thickness: 2px; }
.judge-vs { color: var(--ink-sub); font-weight: 700; }
.judge-result { margin: 8px 0 0; font-size: 1.15rem; font-weight: 700; min-height: 1.6em; }
.judge-result.win { color: var(--ok); } .judge-result.lose { color: var(--ng); } .judge-result.draw { color: var(--warn); }

/* メモ・強さの表・一時停止 */
.memo-box, .chart-box, .pause-box {
  position: absolute; z-index: 8; background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius); padding: 12px 14px;
}
.memo-box { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, 94%); }
.memo-head { margin: 0 0 8px; font-weight: 700; }
.memo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.memo-grid .btn { padding: 0 4px; font-size: 16px; min-width: 0; }
.memo-box .controls { margin: 0; justify-content: flex-end; }
.chart-box { inset: 4px; overflow: auto; padding: 10px 12px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: -10px; background: var(--surface); padding: 2px 0 6px; }
.chart-head p { margin: 0; font-weight: 700; font-size: 1.1rem; }
.chart-body table { font-size: 14px; margin: 0; }
.chart-body th, .chart-body td { padding: 5px 7px; vertical-align: top; }
.chart-body td:first-child { white-space: nowrap; font-weight: 700; }
.chart-body .rt { display: block; font-weight: 400; font-size: 12px; color: var(--ink-sub); }
.chart-body .w { color: var(--ok); font-weight: 700; } .chart-body .l { color: var(--ng); font-weight: 700; } .chart-body .d { color: var(--warn); font-weight: 700; }
.pause-box { left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; padding: 20px 28px; }
.pause-box .big { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; }
.pause-box .note { color: var(--ink-sub); font-size: 14px; }
.pause-box .controls { justify-content: center; }

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

.howto img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.howto figcaption { text-align: center; }
.article td ruby rt, .article th ruby rt { font-size: max(.5em, 10px); }
/* 上のバーの高さを一定に（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: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */