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

.board-wrap { min-height: 200px; }
.maze {
  --wall: #3A3530; --route: #2F6DB5; --hintc: #B7791F; --answer: #2E7D4F;
  display: block; width: min(100%, 580px); height: auto; margin: 0 auto; max-height: 80vh;
  background: var(--board); border-radius: var(--radius); user-select: none; -webkit-user-select: none;
}
.maze.live { touch-action: none; cursor: pointer; }
.maze .walls { fill: none; stroke: var(--wall); stroke-linecap: round; stroke-linejoin: round; }
.maze .route { fill: none; stroke: var(--route); stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.maze .hintline { fill: none; stroke: var(--hintc); stroke-linecap: round; stroke-linejoin: round; }
.maze .answer { fill: none; stroke: var(--answer); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; }
.maze .tile.start { fill: #DCEFE2; }
.maze .tile.goal { fill: #FBEFC9; }
.maze .chara { transition: transform .12s ease-out; }
.maze .chara-in { transition: transform .15s; }
.maze.won .chara-in { animation: hop .5s ease-out 2; }
.maze.appear .walls { animation: fade-in .35s ease-out; }
@keyframes hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -0.35px; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 道具（ヒント・もどる） ---------- */
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px auto 0; max-width: 580px; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 16px; flex: 1 1 0; justify-content: center; white-space: nowrap; }
.tool svg { width: 20px; height: 20px; flex: none; }
.after { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.status { justify-content: space-between; }
.st-text { min-width: 0; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; min-width: 56px; text-align: right; margin-left: auto; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.tag { 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); }
.tag.best { color: var(--ok); }

/* ---------- ヒント・記録 ---------- */
.think { margin: 10px auto 0; max-width: 640px; border: 2px solid var(--line); 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; }
.callout { z-index: 3; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .tools { gap: 6px; }
  .tool { padding: 0 6px; font-size: 15px; gap: 4px; min-width: 0; }
  .tools svg { display: none; }
  .controls .btn.icon { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .maze .chara, .maze .chara-in { transition: none; }
  .maze.won .chara-in, .maze.appear .walls { 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; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */