/* 荷物はこび 固有の見た目（共通は ../common/base.css）。盤の中の色は、ダーク表示でも明るい床の上で見やすい固定色 */
[hidden] { display: none !important; }

.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }
.soko-box { display: flex; justify-content: center; }
svg.soko {
  display: block; aspect-ratio: var(--ratio, 1); height: auto;
  width: min(100%, calc(var(--cols, 8) * 64px), calc(60vh * var(--cols, 8) / var(--rows, 8)));
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
/* 床・壁・置き場 */
.soko .tile { fill: #F1ECE2; stroke: #E2DACB; stroke-width: 1.5; }
.soko .brick { fill: #7A7067; }
.soko .brick-seam { fill: none; stroke: #675F57; stroke-width: 2.5; }
.soko .wall-lip { fill: #5C544C; }
.soko .goal { fill: none; stroke: #B7791F; stroke-width: 4; }
.soko .goal-in { fill: #E7C995; }
/* 荷物: 手で触る物なので薄い影を1段 */
.soko .crate { filter: drop-shadow(0 2px 1.5px rgba(40, 24, 10, .35)); }
.soko .crate-body { fill: #C9975A; stroke: #6B4523; stroke-width: 3; }
.soko .crate-rim { fill: none; stroke: #8A5E30; stroke-width: 2.5; }
.soko .crate-plank { stroke: #8A5E30; stroke-width: 2.5; }
.soko .crate-check { display: none; }
.soko .crate-check circle { fill: #2E7D4F; stroke: #FFFFFF; stroke-width: 2.5; }
.soko .crate-check path { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.soko .crate.on .crate-body { fill: #9DBB86; stroke: #3F6A38; }
.soko .crate.on .crate-rim, .soko .crate.on .crate-plank { stroke: #5E8A53; }
.soko .crate.on .crate-check { display: inline; }
/* 人 */
.soko .person { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .3)); }
.soko .person-body { fill: #2F6DB5; stroke: #1F3F66; stroke-width: 2.5; }
.soko .person-hand { fill: #E8C39E; stroke: #7A5A3E; stroke-width: 2; }
.soko .person-head { fill: #3A3530; stroke: #1F1B18; stroke-width: 2; }
.soko .person-brim { fill: #3A3530; stroke: #1F1B18; stroke-width: 2; stroke-linejoin: round; }
.soko .person-rot { transition: transform .12s; transform-box: view-box; }
/* 行き止まりの知らせ */
.soko .dead { fill: rgba(178, 58, 58, .12); stroke: #B23A3A; stroke-width: 4; stroke-dasharray: 10 7; }
.soko.solved .crate .crate-body { animation: glow .6s ease-out both; }
@keyframes glow { 0% { transform: none; } 40% { transform: translateY(-4px); } 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; }

/* 1手もどす・最初から（PCは横に並べる）。タッチの端末では間に矢印ボタン */
.padrow { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.pad { display: none; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px;
  grid-template-areas: ". up ." "left down right"; touch-action: none; user-select: none; -webkit-user-select: none; }
.padbtn { padding: 0; min-height: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.padbtn svg { width: 26px; height: 26px; fill: currentColor; }
.padbtn[data-dir="up"] { grid-area: up; } .padbtn[data-dir="left"] { grid-area: left; } .padbtn[data-dir="down"] { grid-area: down; } .padbtn[data-dir="right"] { grid-area: right; }
@media (hover: none) and (pointer: coarse) {
  .padrow { display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 8px; }
  .padrow #undo { justify-self: start; } .padrow #restart { justify-self: end; }
  .padrow .btn.icon { white-space: nowrap; padding: 0 10px; }
  .pad { display: grid; }
  #tools { margin-top: 8px; }
}
.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) {
  .padrow .lg { display: none; }
  .counter.sub { display: none; }
  .stage { padding: 8px; }
  .controls .btn.icon { padding: 0 9px; }
  .tier { grid-template-columns: 1fr; gap: 4px; }
  .tier-name { padding-top: 0; }
  svg.soko { width: min(100%, calc(var(--cols, 8) * 64px), calc(52vh * var(--cols, 8) / var(--rows, 8))); }
}
@media (prefers-reduced-motion: reduce) { .soko.solved .crate .crate-body { animation: none; } .soko .person-rot { transition: none; } }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; --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; } }
/* 上のバーの高さ ここまで */