/* 箱入り娘 固有の見た目（共通は ../common/base.css）。盤の中の色は、ダーク表示でも同じ木の色（固定色） */
[hidden] { display: none !important; }

.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }
.hako-box { display: flex; justify-content: center; }
svg.hakoiri {
  display: block; height: auto; aspect-ratio: 460 / 594;
  width: min(100%, 400px, calc(62vh * 460 / 594));
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
svg.hakoiri text { pointer-events: none; }

/* 箱（枠）と床: 濃いめの木。床は少し沈んだ明るい板 */
.hakoiri .frame { fill: #8A5A33; stroke: #5A3719; stroke-width: 3; }
.hakoiri .frame-grain { fill: none; stroke: #6E4424; stroke-width: 2; opacity: .45; }
.hakoiri .floor-edge { fill: #5A3719; }
.hakoiri .floor { fill: #E9DCC4; }
.hakoiri .floor-grid { stroke: #D6C5A6; stroke-width: 2; }
.hakoiri .goal { fill: none; stroke: #B7791F; stroke-width: 4; stroke-dasharray: 14 10; }
.hakoiri .exit { fill: #E9DCC4; }
.hakoiri .exit-edge { stroke: #5A3719; stroke-width: 4; }
.hakoiri .exit-label { font-family: var(--font); font-size: 22px; font-weight: 700; fill: var(--ink-sub); text-anchor: middle; }

/* 駒: 明るい木（ほおの木・ひのき）。手で触る物なので薄い影を1段、つかんだ駒は影を大きく */
.hakoiri .piece { filter: drop-shadow(0 2.5px 1.5px rgba(50, 28, 10, .38)); }
.hakoiri .piece.lifted { filter: drop-shadow(0 8px 6px rgba(50, 28, 10, .32)); }
.hakoiri .wood { fill: #E8CFA0; stroke: #7A5130; stroke-width: 3; }
.hakoiri .grain { fill: none; stroke: #C9A36E; stroke-width: 2; opacity: .75; }
.hakoiri .bevel { fill: none; stroke: rgba(255, 249, 236, .6); stroke-width: 2; }
.hakoiri .kind-D .wood { fill: #F0D9AE; }
.hakoiri .kind-S .wood { fill: #DDBF8C; }
.hakoiri .kind-S .grain { stroke: #BE965F; }
/* 札の文字: 焼きごてで入れたような焦げ茶。娘だけ朱色 */
.hakoiri .kanji { font-family: var(--font); font-weight: 800; text-anchor: middle; dominant-baseline: central; fill: #3E2412; }
.hakoiri .kanji.musume { fill: #B4332A; }
.hakoiri .kana { font-family: var(--font); font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: #6A4A2E; }
/* 英語のページの駒の表示: 名前なし（娘だけ星の印） */
.hakoiri .star { fill: #B4332A; stroke: #7A1F18; stroke-width: 2; stroke-linejoin: round; }

/* 選んだ駒: アクセント色の枠と、動ける向きの三角 */
.hakoiri .piece.selected .wood { stroke: #2F5D8A; stroke-width: 7; }
.hakoiri .sel-arrow { fill: #2F5D8A; stroke: #FFFFFF; stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
/* ヒント: 動かす駒を注意色の点線、行き先に点線の影と道 */
.hakoiri .hint-box { fill: none; stroke: #B7791F; stroke-width: 7; stroke-dasharray: 18 10; pointer-events: none; }
.hakoiri .hint-ghost { fill: rgba(183, 121, 31, .16); stroke: #B7791F; stroke-width: 4; stroke-dasharray: 12 8; }
.hakoiri .hint-path { fill: none; stroke: #B7791F; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 12; pointer-events: none; }
.hakoiri .hint-dot { fill: #B7791F; pointer-events: none; }
.hakoiri .over { pointer-events: none; }
.hakoiri.solved .kind-D .body { animation: glow .7s ease-out both; }
@keyframes glow { 0% { transform: none; } 40% { transform: translateY(-5px); } 100% { transform: none; } }

/* 手番のバー: 面・手数・最短 */
.status { flex-wrap: wrap; column-gap: 14px; row-gap: 0; }
.st-name { white-space: nowrap; }
.counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter b { font-size: 1.12em; }
.counter.sub { font-weight: 400; color: var(--ink-sub); }
.lv { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; margin-left: 6px; vertical-align: middle; color: var(--accent); }

/* 面の選択 */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font-style: normal; }
.stages { display: block; }
.tier { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; align-items: start; margin-bottom: 8px; }
.tier-name { font-size: 15px; font-weight: 700; color: var(--ink-sub); padding-top: 9px; }
.tier-list { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-choice span { min-width: 48px; justify-content: center; padding: 0 6px; font-variant-numeric: tabular-nums; position: relative; }
.stage-choice .ck { width: 14px; height: 14px; margin-left: 2px; }
.stage-choice .ck path { fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ボタンの列 */
.btnrow { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* 結果は盤の下に出す（出ていく娘を隠さない） */
.result-box { position: static; margin: 10px auto 0; padding: 16px 20px; max-width: 560px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 4px; }
.result-box .big { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; }
.callout { z-index: 3; font-size: clamp(17px, 4vw, 22px); padding: 4px 18px; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .controls .btn.icon, .btnrow .btn { padding: 0 10px; }
  .tier { grid-template-columns: 1fr; gap: 4px; }
  .tier-name { padding-top: 0; }
  svg.hakoiri { width: min(100%, 400px, calc(56vh * 460 / 594)); }
  .btnrow { margin-top: 8px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .hakoiri.solved .kind-D .body { animation: none; } }
/* 上のバーの高さを一定に（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.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */