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

.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }
canvas.life { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; background: #FBFAF6; }
canvas.life.placing { cursor: copy; }
canvas.life:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* 手番のバー: 世代・生きているセル */
.status { flex-wrap: wrap; column-gap: 14px; row-gap: 0; }
.counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter b { font-size: 1.15em; display: inline-block; min-width: 2.2em; }
.lv { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; color: var(--accent); }
.run-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-sub); margin-right: 6px; vertical-align: 1px; }
.run-dot.on { background: var(--ok); }

/* ボタンの列 */
.tools { margin-top: 10px; }
.tools .btn.icon { padding: 0 12px; }
.btn .ico { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px; }
#play-btn { min-width: 128px; }
#speed-btn { min-width: 128px; }
.btn[aria-pressed="true"].sub { background: var(--accent-soft); }

/* 図鑑の形を置くときの帯 */
.placebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 12px; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--surface); }
.placebar .pb-name { font-weight: 700; flex: 1 1 160px; min-width: 0; }
.placebar .pb-note { color: var(--ink-sub); font-size: 14px; font-weight: 400; display: block; }

/* 図鑑 */
.lib { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.lib h3 { margin: 8px 0 4px; font-size: 1rem; }
.lib .cat-note { color: var(--ink-sub); font-size: 14px; margin: 0 0 8px; }
.lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pat { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; min-height: 64px; padding: 8px 10px;
  font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.pat:hover { border-color: var(--accent); }
.pat:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.pat:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }
.pat svg { flex: none; width: 52px; height: 52px; background: #FBFAF6; border: 1px solid var(--line); border-radius: 4px; }
.pat svg rect { fill: #24453A; }
.pat .pn { font-weight: 700; line-height: 1.4; display: block; }
.pat .pm { color: var(--ink-sub); font-size: 14px; line-height: 1.45; display: block; }
.pat-info { margin: 10px 0 0; padding: 10px 14px; border-left: 6px solid var(--accent); background: var(--surface); border: 2px solid var(--line); border-left-width: 6px; border-radius: var(--radius); }
.pat-info h3 { margin: 0 0 4px; font-size: 1rem; }
.pat-info p { margin: 0 0 4px; }
.pat-info p:last-child { margin: 0; }
.pat-info .src { color: var(--ink-sub); font-size: 14px; }

/* お題 */
.task { margin: 0 0 10px; padding: 10px 14px; border: 2px solid var(--line); border-left: 6px solid var(--warn); border-radius: var(--radius); background: var(--surface); }
.task h3 { margin: 0 0 2px; font-size: 1.05rem; }
.task p { margin: 0; }
.task .cnt { font-weight: 700; font-variant-numeric: tabular-nums; }
.task .cnt.ok { color: var(--ok); }
.task .cnt.ng { color: var(--ng); }
.think { margin: 10px 0 0; border: 2px solid var(--line); border-left: 6px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.think p { margin: 0 0 4px; }
.think p:last-child { margin: 0; }

/* 結果（お題）: 盤の下に出す */
.result-box { position: static; margin: 10px auto 0; padding: 16px 20px; max-width: 640px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 4px; }
.result-box .big { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.callout { z-index: 3; }

/* 設定: お題の選択肢 */
.choices.tasks .choice span { min-width: 0; }
.choice .done { color: var(--ok); font-weight: 700; margin-left: 4px; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .tools .btn.icon { padding: 0 9px; }
  #play-btn, #speed-btn { min-width: 0; }
  .lib-list { grid-template-columns: 1fr 1fr; }
  .pat { flex-direction: column; gap: 4px; }
  .pat svg { width: 44px; height: 44px; }
  .result-box { padding: 12px; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 3; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 3.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; } }
/* 上のバーの高さ ここまで */