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

/* 台を広く使うため、広い画面ではゲームの画面だけ本文より広げる */
@media (min-width: 800px) {
  .stage.jig { width: min(1120px, calc(100vw - 48px)); margin-left: calc(50% - min(560px, 50vw - 24px)); }
}
.stage.jig .board-wrap { max-width: none; display: flex; justify-content: center; }
#table { display: block; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 4px; }

/* 手番のバー: ピース数・はめた数・時計 */
.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); }

/* 道具のボタン: 入っているときは色を付ける */
#tools { margin-top: 10px; }
#tools .btn.on { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }

/* 絵の選択肢 */
.choices.pics .choice span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; }
.choices.pics img { width: 64px; height: 48px; 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: 640px) {
  .choices.pics .choice span { padding: 3px 8px 3px 3px; font-size: 14px; gap: 6px; }
  .choices.pics img { width: 48px; height: 36px; }
}
@media (max-width: 420px) {
  .stage { padding: 8px; }
  #tools { gap: 6px; }
  .controls .btn.icon { padding: 0 9px; }
  .result-box { padding: 12px; }
  .result-box h2 { font-size: 1.2rem; }
}
.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: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --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: 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; } }
/* 上のバーの高さ ここまで */