/* マンカラ固有の見た目（共通は ../common/base.css） */
.board-wrap { display: flex; flex-direction: column; }
#board { user-select: none; -webkit-user-select: none; }

/* 手番の列を囲む枠 */
.row-frame { fill: rgba(255, 248, 234, .0); stroke: #FFF8EA; stroke-width: 6; opacity: 0; transition: opacity var(--dur); pointer-events: none; }
.row-frame.on { opacity: .95; }

/* 選べる穴: アクセント色の輪 */
.pit-ring { fill: transparent; stroke: none; }
.pit-ring.can { stroke: var(--accent); stroke-width: 5; cursor: pointer; }
.pit-ring.pick { stroke: #FFF8EA; stroke-width: 7; }
.pit-ring.hit { stroke: var(--ng); stroke-width: 6; }
:root[data-theme="dark"] .pit-ring.can { stroke: #2F5D8A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pit-ring.can { stroke: #2F5D8A; } }
.hitarea { fill: transparent; cursor: pointer; }

/* 石の数の札 */
.count rect { fill: rgba(255, 248, 234, .92); stroke: rgba(40, 30, 20, .4); stroke-width: 1; }
.count text { font: 700 18px var(--font); fill: #1F2328; text-anchor: middle; }
.count.store rect { fill: #1F2328; stroke: #FFF8EA; stroke-width: 1.5; }
.count.store text { fill: #FFF8EA; }
.count.bump rect { fill: #FFE9A8; }
.count.store.bump rect { fill: #3D4A57; }

/* ストアの持ち主の札 */
.name-tag rect { fill: rgba(255, 248, 234, .95); stroke: rgba(40, 30, 20, .4); stroke-width: 1; }
.name-tag text { font: 700 15px var(--font); fill: #1F2328; text-anchor: middle; }
.name-tag.on rect { fill: #1F2328; stroke: #FFF8EA; stroke-width: 2; }
.name-tag.on text { fill: #FFF8EA; }

.stone { pointer-events: none; }

/* スマホ幅: 盤が小さくなるので、数字と札を大きめに */
@media (max-width: 560px) {
  .count { transform: scale(1.45); }
  .name-tag { transform: scale(1.35); }
  .stage { padding: 8px; }
}

/* 盤の下（2人で遊ぶときの上の人の番は盤の上）の、穴を選ぶボタン */
.pitbtns { position: relative; height: 52px; margin-top: 6px; }
.pitbtns.top { order: -1; margin: 0 0 6px; }
.pitbtns .btn { position: absolute; top: 0; transform: translateX(-50%); width: calc(12.55% - 4px); min-width: 40px; padding: 0; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 16px; }
.pitbtns .btn svg { width: 16px; height: 16px; flex: none; }
.pitbtns .btn:disabled { opacity: .3; }

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

.howto img[src*="capture"], .howto img[src*="extra"] { 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: 2; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */