/* 陣取りゲーム固有の見た目（共通は ../common/base.css） */
.board-wrap { max-width: 560px; }
#board { user-select: none; -webkit-user-select: none; touch-action: manipulation; }

/* マス */
.cell { cursor: default; }
.cell .fill { transition: fill var(--dur); }
.cell.e.can { cursor: pointer; }
.cell .mark { pointer-events: none; }
.cell.grow { transform-box: fill-box; transform-origin: center; animation: grow .22s ease-out; }
@keyframes grow { from { transform: scale(.35); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cell.grow { animation: none; } }

/* 塗れるマス: アクセント色の点線の枠＋小さな点 */
.can-ring { fill: none; stroke: #2F5D8A; stroke-width: 2.4; stroke-dasharray: 5 4; pointer-events: none; }
.can-dot { fill: #2F5D8A; opacity: .55; pointer-events: none; }
/* 最後に塗ったマス・CPU が選んだマス・キーボードの印 */
.last-ring { fill: none; stroke: #1F2328; stroke-width: 3; pointer-events: none; }
.pick-ring { fill: none; stroke: #FFF8EA; stroke-width: 5; pointer-events: none; }
.pick-ring2 { fill: none; stroke: #1F2328; stroke-width: 2; pointer-events: none; }
.cursor-ring { fill: none; stroke: #9A6415; stroke-width: 4; pointer-events: none; }
.flags { pointer-events: none; }

/* 点数のバー（盤のすぐ上） */
.scorebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 560px; margin: 0 auto 8px; font-size: 16px; }
.scorebar .sc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 2px solid var(--line); border-radius: var(--radius); min-height: 36px; background: var(--surface); }
.scorebar .sc b { font-size: 1.15rem; min-width: 1.6em; text-align: center; }
.scorebar .sc.on { border-color: var(--ink); }
.scorebar .sc-left { color: var(--ink-sub); border-style: dashed; }
.scorebar .sw { width: 18px; height: 18px; border-radius: 4px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.scorebar .sw0 { background: #2F6DB5; }
.scorebar .sw1 { background: #C8453B; }
.scorebar .sw0::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.scorebar .sw1::after { content: ""; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 8px solid #fff; }
.scorebar .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
.status .mk { display: inline-flex; width: 18px; height: 18px; border-radius: 4px; align-items: center; justify-content: center; flex: none; }
.status .mk0 { background: #2F6DB5; } .status .mk1 { background: #C8453B; }
.status .mk0::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.status .mk1::after { content: ""; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 8px solid #fff; }

.result-box { inset: 10% 8% auto; padding: 16px 20px; }
.result-box .score { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 6px; }
@media (max-width: 520px) {
  .stage { padding: 8px; }
  .result-box { inset: 4% 0 auto; }
  .result-box .controls .btn { padding: 0 12px; }
  .scorebar { font-size: 15px; }
  .scorebar .sc { padding: 2px 8px; }
  .scorebar .nm { max-width: 6.5em; }
}
.howto img[src*="paint"], .howto img[src*="enclose"], .howto img[src*="rules"] { max-width: 640px; }
/* 上のバーの高さを一定に（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: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */