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

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

/* 板: 手で触る物なので薄い影を1段。つかんだ板は影を大きく */
svg.fifteen .tile { filter: drop-shadow(0 3px 2px rgba(40, 22, 8, .38)); }
svg.fifteen .tile.lifted { filter: drop-shadow(0 7px 5px rgba(40, 22, 8, .32)); }
/* 数字: 焼きごてで入れたような焦げ茶。下に1px明るい線を入れて彫ったように見せる */
svg.fifteen .num, svg.fifteen .num-hi { font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
svg.fifteen .num { fill: #4A2C17; }
svg.fifteen .num-hi { fill: rgba(255, 246, 228, .75); }
/* 絵の板 */
svg.fifteen .picline { fill: none; stroke: rgba(74, 44, 23, .55); stroke-width: 2; }
svg.fifteen .numchip { fill: rgba(255, 252, 244, .92); stroke: #4A2C17; stroke-width: 2; }
svg.fifteen .numsmall { fill: #4A2C17; font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
svg.fifteen .tile.last { transition: opacity .5s; }

/* ヒント: 動かす板を注意色の枠で囲み、空きのほうへ三角 */
svg.fifteen .hint-box { fill: none; stroke: #B7791F; stroke-width: 9; stroke-dasharray: 26 14; }
svg.fifteen .hint-arrow .head { fill: #B7791F; stroke: #FBFAF6; stroke-width: 5; stroke-linejoin: round; }
svg.fifteen.solved .tile .face { animation: glow .6s ease-out both; }
@keyframes glow { 0% { transform: none; } 40% { transform: translateY(-6px); } 100% { transform: 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; }
.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; }
.peek { display: flex; gap: 12px; align-items: center; }
.peek img { width: 120px; height: 120px; border-radius: var(--radius); border: 2px solid var(--line); flex: none; }

.custom { border-left: 4px solid var(--line); padding-left: 12px; margin-bottom: 8px; }
.choices.pics .choice span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; }
.choices.pics img { width: 44px; height: 44px; border-radius: 4px; display: block; }

/* 結果は盤の下に出す（完成した並び・絵を隠さない） */
.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 (max-width: 420px) {
  .stage { padding: 8px; }
  .controls .btn.icon { padding: 0 9px; }
  .result-box { padding: 12px; }
  .result-box h2 { font-size: 1.25rem; }
  .peek img { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) { svg.fifteen.solved .tile .face { animation: none; } svg.fifteen .tile.last { transition: none; } }
.howto img.narrow { max-width: 560px; }
/* 上のバーの高さを一定に（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: 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; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */