/* ハノイの塔 固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { min-height: 120px; }
.hanoi-box { background: var(--board); border: 2px solid var(--line); border-radius: var(--radius); padding: 4px 4px 0; }
svg.hanoi { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
svg.hanoi image { pointer-events: none; }

/* 棒ごとの列: 選んだ棒・置ける棒・ヒント */
svg.hanoi .col { fill: transparent; stroke: transparent; stroke-width: 6; transition: fill var(--dur), stroke var(--dur); }
svg.hanoi .col.sel { stroke: #2F5D8A; fill: rgba(47, 93, 138, .07); }
svg.hanoi .col.can { stroke: #2F5D8A; stroke-dasharray: 4 14; stroke-linecap: round; }
svg.hanoi .col.over { fill: rgba(47, 93, 138, .12); }
svg.hanoi .col.hint-to { stroke: #B7791F; stroke-dasharray: 18 12; }
svg.hanoi .col.hint-from { stroke: #B7791F; }
svg.hanoi .col.ng { fill: rgba(178, 58, 58, .12); stroke: #B23A3A; }

/* 円盤: 手で触る物なので薄い影を1段。持ち上げたら影を大きく */
svg.hanoi .disk { filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
svg.hanoi .disks.lift .disk { filter: none; } /* 棒から離れた円盤は奥・手前の2枚をまとめて1つの影にする */
svg.hanoi .disks.lift { filter: drop-shadow(0 14px 8px rgba(0,0,0,.22)); }
svg.hanoi .disk.win { animation: jump .5s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes jump { 0%, 100% { transform: none; } 40% { transform: translateY(-22px); } 70% { transform: translateY(4px); } }

/* 棒の番号と「スタート」「ゴール」 */
svg.hanoi .peglabel circle { fill: #FFFFFF; stroke: #5B616B; stroke-width: 3; }
svg.hanoi .peglabel text { fill: #1F2328; font: 700 32px system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; text-anchor: middle; dominant-baseline: central; }
svg.hanoi .tag rect { fill: #FFFFFF; stroke: #5B616B; stroke-width: 2.5; }
svg.hanoi .tag text { fill: #5B616B; font: 700 26px system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; text-anchor: middle; dominant-baseline: central; }
svg.hanoi .tag.goal rect { fill: #2E7D4F; stroke: #2E7D4F; }
svg.hanoi .tag.goal text { fill: #FFFFFF; }

/* ヒントの矢印 */
svg.hanoi .hint-arrow .halo { fill: none; stroke: #FBFAF6; stroke-width: 18; stroke-linecap: round; }
svg.hanoi .hint-arrow .line { fill: none; stroke: #B7791F; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 2 16; }
svg.hanoi .hint-arrow .head { fill: #B7791F; stroke: #FBFAF6; stroke-width: 4; stroke-linejoin: round; }

/* 手番のバー: 名前・手数・時計 */
.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-size: 14px; font-weight: 700; }
.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); }

/* ヒント・お手本 */
.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; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 8px 12px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.demo-bar .label { font-weight: 700; }
.choices.small .choice span { min-height: 40px; padding: 0 12px; }
.demo-bar .btn { margin-left: auto; }

.custom { border-left: 4px solid var(--line); padding-left: 12px; margin-bottom: 8px; }
#rule-hint { margin: -4px 0 8px; }

/* 結果は盤の下に出す（完成した塔を隠さない） */
.result-box { position: static; margin: 10px 0 0; padding: 16px 20px; }
.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 (max-width: 420px) {
  .stage { padding: 8px; }
  .hanoi-box { padding: 2px 0 0; }
  .controls .btn.icon { padding: 0 9px; }
  .result-box { padding: 12px; }
  .result-box h2 { font-size: 1.25rem; }
  .demo-bar .btn { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { svg.hanoi .disk.win { animation: none; } }
.howto img.narrow { max-width: 560px; }

/* 棒の番号のボタン（盤の下） */
.hanoi-box { position: relative; }
.pegrow { position: relative; height: 58px; }
.pegbtn {
  position: absolute; top: 2px; transform: translateX(-50%);
  appearance: none; font: inherit; display: flex; align-items: center; gap: 6px; min-height: var(--tap); min-width: var(--tap);
  padding: 0 6px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 999px;
}
.pegbtn .num {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid #5B616B; background: #FFFFFF; color: #1F2328; font-weight: 700; font-size: 18px;
}
.pegbtn .tag { font-size: 14px; font-weight: 700; color: #5B616B; border: 1.5px solid #5B616B; border-radius: 999px; padding: 0 8px; background: #FFFFFF; white-space: nowrap; }
.pegbtn .tag.goal { background: #2E7D4F; border-color: #2E7D4F; color: #FFFFFF; }
.pegbtn .tag { position: absolute; top: 50%; transform: translateY(-50%); }
.pegbtn:first-child .tag { left: calc(100% - 2px); }
.pegbtn:last-child .tag { right: calc(100% - 2px); }
.pegbtn.sel .num { background: #2F5D8A; border-color: #2F5D8A; color: #FFFFFF; }
.pegbtn.can .num { border-color: #2F5D8A; border-style: dashed; }
.pegbtn:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.pegbtn:disabled { cursor: default; }
@media (max-width: 420px) {
  .pegbtn .tag { font-size: 14px; padding: 0 6px; }
  .pegbtn { gap: 3px; }
}
/* 上のバーの高さを一定に（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: 2; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */