/* 三目並べ固有の見た目（共通は ../common/base.css） */
#board { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.board-wrap { max-width: 520px; }

/* 紙の盤と「井」の字の線 */
.paper { fill: #FBFAF6; stroke: #D9D6CE; stroke-width: 2; }
.gridline { stroke: #3F3A34; stroke-linecap: round; }

/* 盤の上の帯: 2人の名札（印・名前・この対戦の勝ち数）。手番の人を濃く */
.score-tag .tag-bg { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.score-tag .tag-name { font: 700 23px var(--font); fill: var(--ink); }
.score-tag .tag-sub { font: 700 20px var(--font); fill: var(--ink-sub); }
.score-tag.on .tag-bg { fill: var(--surface); stroke: var(--accent); stroke-width: 5; }
.draw-tag .tag-sub { font: 700 18px var(--font); fill: var(--ink-sub); }
.draw-tag .tag-name { font: 700 24px var(--font); fill: var(--ink); }

/* 手番の人の色を盤のふちに（○＝朱／×＝藍） */
.turn-frame { fill: none; stroke-width: 6; opacity: 0; pointer-events: none; transition: opacity var(--dur); }
.turn-frame.c0 { stroke: #C8453B; opacity: .8; }
.turn-frame.c1 { stroke: #2F6DB5; opacity: .8; }
.status .mk { width: 24px; height: 24px; flex: none; }

/* 印 */
.mark-shape { pointer-events: none; }
.mark-shape.fading { opacity: .38; }
.mark-shape.ghost { opacity: .14; }

/* マスの印: キーボードの枠・ヒント・CPUが書く所・次に消える印 */
.cellmark { pointer-events: none; fill: none; }
.cellmark.cursor { stroke: var(--warn); stroke-width: 4; stroke-dasharray: 8 5; }
.cellmark.hint { stroke: #2F6DB5; stroke-width: 5; stroke-dasharray: 10 6; animation: hint 1.2s ease-in-out infinite; }
@keyframes hint { 50% { opacity: .45; } }
.cellmark.cpu { fill: #E3ECF5; stroke: #2F5D8A; stroke-width: 3; }
.cellmark.vanish { stroke: #8A8578; stroke-width: 3; stroke-dasharray: 3 7; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .cellmark.hint { animation: none; } }
.winline .wl-edge { stroke: #FBFAF6; stroke-width: 22; }
.winline .wl-core { stroke: #1F2328; stroke-width: 11; opacity: .85; }
.hit { fill: transparent; cursor: pointer; }
#fx, #over, #under { pointer-events: none; }

.board-wrap .callout { padding: 6px 18px; font-size: clamp(17px, 4vw, 22px); }
.stage { padding: 12px; }

/* 結果は盤の下に出す（並んだ印を隠さない） */
.result-box { position: static; margin: 12px auto 0; max-width: 520px; padding: 14px 16px; border-width: 2px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 4px; }
.result-box .score { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.result-box .note { margin-bottom: 4px; }
.result-box .controls { margin-top: 8px; }

@media (max-width: 560px) {
  .stage { margin-left: -8px; margin-right: -8px; padding: 8px; }
  .score-tag .tag-name { font-size: 26px; }
  .score-tag .tag-sub { font-size: 23px; }
}

.howto img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.howto figcaption { text-align: center; }
/* 上のバーの高さを一定に（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: 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: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */