/* パイプつなぎ 固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.pipe-box { aspect-ratio: 1 / 1; }
svg.pipes { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
svg.pipes text { pointer-events: none; }

/* 台: 落ち着いた石の色。端がつながるときは内側に点線 */
svg.pipes .tray { fill: #CFC8B8; }
svg.pipes .wrap-edge { fill: none; stroke: #7C7466; stroke-width: 4; stroke-dasharray: 14 10; }
/* タイル: 陶器のような生成り。手で触る物なので薄い影を1段 */
svg.pipes .tile { filter: drop-shadow(0 2px 1.5px rgba(60, 50, 30, .28)); }
svg.pipes .face { fill: #F7F4EC; stroke: #D8D0BF; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
svg.pipes .tile.locked .face { fill: #E6DFCF; stroke: #A99F8A; }
svg.pipes .clip { overflow: hidden; pointer-events: none; }
svg.pipes .spin { transition: transform .16s ease-out; }

/* 管: 乾いている間は灰色、水が届くと青（水源から近い順に --d だけ遅れて） */
svg.pipes .po { fill: #6A6F77; transition: fill .22s ease-out var(--d, 0ms); }
svg.pipes .pi { fill: #C3C7CC; transition: fill .22s ease-out var(--d, 0ms); }
svg.pipes .cap-o { fill: #6A6F77; transition: fill .22s ease-out var(--d, 0ms); }
svg.pipes .cap-i { fill: #E9EBEE; transition: fill .22s ease-out var(--d, 0ms); }
svg.pipes .tile.wet .po, svg.pipes .tile.wet .cap-o { fill: #1E5A8C; }
svg.pipes .tile.wet .pi { fill: #3E8FD0; }
svg.pipes .tile.wet .cap-i { fill: #A9D3F2; }
svg.pipes .src-ring { fill: #1E5A8C; }
svg.pipes .src-in { fill: #3E8FD0; }
svg.pipes .src-drop { fill: #FFFFFF; }

/* 鍵の印 */
svg.pipes .lock-bg { fill: #4A4F57; }
svg.pipes .lock-body { fill: #FFFFFF; }
svg.pipes .lock-shackle { fill: none; stroke: #FFFFFF; stroke-width: 3.5; stroke-linecap: round; }

/* 押したときの小さな沈み・回せないときの小さなゆれ */
svg.pipes .face.bump { animation: bump .18s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(.95); } 100% { transform: scale(1); } }
svg.pipes .tile.shake .face { animation: shake .28s ease-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
svg.pipes.solved .tile .face { animation: glow .9s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes glow { 0% { fill: #F7F4EC; } 40% { fill: #DCEBF7; } 100% { fill: #F7F4EC; } }

/* ヒント・キーボードのカーソル */
svg.pipes .hint-box { fill: none; stroke: #C98A24; stroke-width: 7; stroke-dasharray: 18 10; pointer-events: none; }
svg.pipes .cursor { fill: none; stroke: #2F5D8A; stroke-width: 6; pointer-events: none; }

/* 手番のバー: 大きさ・水の届いたマス・手数・時計 */
.status { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.st-name { white-space: nowrap; }
.counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter b { font-size: 1.15em; }
.counter small { color: var(--ink-sub); font-weight: 700; font-size: 14px; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; min-width: 56px; text-align: right; margin-left: auto; }
.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); }

/* 鍵をかけるモードのボタン（押している間は色を反転） */
#lock-mode[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }

.think { margin: 10px auto 0; border: 2px solid var(--line); border-left: 6px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.think h3 { margin: 0 0 4px; font-size: 16px; }
.think p { margin: 0 0 6px; }
.think p:last-child { margin-bottom: 0; }

/* 結果は盤の下に出す（つながった盤を隠さない） */
.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.4rem; font-weight: 700; margin-bottom: 8px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; }
.callout { z-index: 3; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) svg.pipes .tray { fill: #A9A293; }
}
:root[data-theme="dark"] svg.pipes .tray { fill: #A9A293; }

@media (max-width: 420px) {
  .stage { padding: 8px; }
  .controls .btn.icon { padding: 0 9px; }
  .result-box { padding: 12px; }
  .result-box h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  svg.pipes .spin, svg.pipes .po, svg.pipes .pi, svg.pipes .cap-o, svg.pipes .cap-i { transition: none; }
  svg.pipes .face.bump, svg.pipes .tile.shake .face, svg.pipes.solved .tile .face { animation: none; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 1; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.5; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.5; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */