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

.board-wrap { position: relative; max-width: 680px; margin: 0 auto; }
svg.tangram { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; background: var(--board); border-radius: var(--radius); }
svg.tangram .tray { fill: rgba(120, 100, 70, .07); stroke: rgba(120, 100, 70, .18); stroke-width: .03; stroke-dasharray: .12 .1; }
/* お題のシルエット（すき間の線が出ないよう、同じ色で少し太らせる） */
svg.tangram .sil .shape { fill: #3C424B; stroke: #3C424B; stroke-width: .05; stroke-linejoin: round; }
svg.tangram .sil .guide { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .035; stroke-linejoin: round; }
/* 板: 手で触る物なので薄い影を1段。持ち上げると影を大きく。選んだ板は藍の縁 */
/* SVG の中では filter の長さも盤の単位（1＝小さい三角の辺）になる */
svg.tangram .tg { cursor: grab; filter: drop-shadow(0 .045px .03px rgba(40, 22, 8, .4)); outline: none; }
svg.tangram .tg .edge { fill: none; stroke: rgba(50, 30, 15, .55); stroke-width: .035; stroke-linejoin: round; vector-effect: none; }
svg.tangram .tg.lifted { filter: drop-shadow(0 .16px .12px rgba(40, 22, 8, .32)); cursor: grabbing; }
svg.tangram .tg.sel .edge { stroke: var(--accent); stroke-width: .075; }
svg.tangram .tg:focus-visible .edge { stroke: var(--warn); stroke-width: .09; }
/* ヒント: 正しい位置をうすく */
svg.tangram .ghost { opacity: .45; }
svg.tangram .ghost-line { fill: none; stroke: #B7791F; stroke-width: .07; stroke-dasharray: .18 .12; stroke-linejoin: round; animation: ghost 1.2s ease-in-out infinite alternate; }
@keyframes ghost { from { opacity: .55; } to { opacity: 1; } }
/* 完成: 外形の線が浮かび、板が少し持ち上がる */
svg.tangram .done-line line { stroke: var(--ok); stroke-width: .09; stroke-linecap: round; animation: doneLine .9s ease-out both; }
@keyframes doneLine { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .9; } }
svg.tangram.solved .tg { filter: drop-shadow(0 .1px .08px rgba(40, 22, 8, .32)); }
svg.tangram.solved .pieces { animation: lift .7s ease-out both; }
@keyframes lift { 0% { transform: translateY(0); } 45% { transform: translateY(-.18px); } 100% { transform: translateY(-.06px); } }

/* 手番のバー: お題・時計 */
.status { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.st-name { white-space: nowrap; }
.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.icon { display: inline-flex; align-items: center; gap: 4px; }
#tools .btn.icon svg { width: 18px; height: 18px; flex: none; }
.tools2 { margin-top: 8px; }

/* お題の一覧 */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.cat-tab { min-height: var(--tap); padding: 0 12px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 999px; font: inherit; font-size: 15px; cursor: pointer; }
.cat-tab[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.cat-tab:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.picker .choice span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 0; height: 100%; position: relative; font-size: 14px; text-align: center; line-height: 1.3; }
.picker .choice b { font-weight: 400; }
.picker .choice input:checked + span b { font-weight: 700; }
.picker svg .thumb-shape { fill: #3C424B; stroke: #3C424B; stroke-width: .05; }
.picker .done::after { content: "済"; } /* 設定の要約（文字から作る）に入らないよう、印は CSS で出す */
.picker .done { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--bg); background: var(--ok); border-radius: 999px; padding: 0 5px; line-height: 1.6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .picker svg .thumb-shape { fill: #CFD3DA; stroke: #CFD3DA; } }
:root[data-theme="dark"] .picker svg .thumb-shape { fill: #CFD3DA; stroke: #CFD3DA; }

/* 結果は盤の下に出す（完成した形を隠さない） */
.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; }
  .picker { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); max-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  svg.tangram .ghost-line, svg.tangram .done-line line, svg.tangram.solved .pieces { animation: none; }
}
.howto img.narrow { max-width: 560px; }
.callout.side { white-space: pre-line; word-break: keep-all; max-width: 34%; text-align: center; border-radius: 18px; font-size: clamp(17px, 2.6vw, 22px); line-height: 1.4; padding: 10px 16px; }
/* スマホ幅ではボタンを2段に収める（操作のしかた・ルールは盤のすぐ下と下の解説にある） */
@media (max-width: 480px) { #controls-btn, .tools2 a.btn { display: none !important; } }
:root:lang(en) .picker .done::after { content: "\2713"; } /* 英語のページの「済」の印 */
/* 上のバーの高さを一定に（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: 2; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */