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

.board-wrap { min-height: 200px; }
/* 拡大: 盤の中をスクロール。上と左の数字は端に貼りつく */
.board-wrap.zoomed { overflow: auto; max-height: min(58vh, 640px); overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 4px; }
.board-wrap.zoomed .ng { margin: 0; }
.board-wrap.zoomed .cc { position: sticky; top: 0; z-index: 1; }
.board-wrap.zoomed .rc { position: sticky; left: 0; z-index: 1; }
.board-wrap.zoomed .corner { position: sticky; top: 0; left: 0; z-index: 2; }

/* 盤の地（紙）。ダークでは真っ白を少し落とす（まぶしくないように。数字と塗ったマスの色はそのまま。G6） */
:root { --ng-paper: #FFFFFF; --ng-band: #F2F0EA; --ng-corner: #F4F2EC; --ng-cur: #EEF3F9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ng-paper: #EFEDE7; --ng-band: #E2DFD6; --ng-corner: #E2DFD6; --ng-cur: #DCE5EF; } }
:root[data-theme="dark"] { --ng-paper: #EFEDE7; --ng-band: #E2DFD6; --ng-corner: #E2DFD6; --ng-cur: #DCE5EF; }
/* 始める前の「はじめる」の窓の幕をなくす（盤が灰色にくすまないように。G6）。窓は影で浮かせる */
.stage > .setup-modal { background: none; }

/* ---------- 盤: 左上の見本・上の数字（列）・左の数字（行）・マス ---------- */
.ng {
  --cs: 24px; --rcw: 60px; --cch: 60px; --w: 10; --h: 10; --fs: 14px;
  display: grid; grid-template-columns: var(--rcw) repeat(var(--w), var(--cs)); grid-template-rows: var(--cch) repeat(var(--h), var(--cs));
  width: max-content; margin: 0 auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: var(--ng-paper); color: #1F2328; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.ng .corner { display: flex; align-items: center; justify-content: center; border-right: 2px solid #1F2328; border-bottom: 2px solid #1F2328; background: var(--ng-corner); }
.ng .corner canvas { image-rendering: pixelated; border: 1px solid #D9D6CE; background: #FFFFFF; }
.ng .cc, .ng .rc { background: var(--ng-paper); display: flex; font-weight: 700; font-size: var(--fs); line-height: 1; color: #1F2328; transition: opacity .2s; }
.ng .cc { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 3px; gap: 1px; border-right: 1px solid #C9C5BB; border-bottom: 2px solid #1F2328; }
.ng .rc { flex-direction: row; justify-content: flex-end; align-items: center; padding-right: 4px; gap: .28em; border-bottom: 1px solid #C9C5BB; border-right: 2px solid #1F2328; }
.ng .cc span, .ng .rc span { display: block; min-width: .6em; text-align: center; }
.ng .rc span + span::before { content: ","; display: inline-block; width: .35em; margin-left: -.05em; color: #8A867D; font-weight: 400; } /* 要望No.46: 「1 1」が「11」に見えないよう、横に並ぶ数字はカンマで区切る */
.ng .rc span { display: inline-block; }
.ng .cc.band, .ng .rc.band { background: var(--ng-band); }
.ng .cc.t5, .ng .cell.t5r { border-right: 2px solid #1F2328; }
.ng .rc.t5, .ng .cell.t5b { border-bottom: 2px solid #1F2328; }
.ng .cc.last { border-right: 2px solid #1F2328; }
.ng .rc.last { border-bottom: 2px solid #1F2328; }
.ng .cc.done, .ng .rc.done { color: #B5B1A8; }
.ng .cc.cur, .ng .rc.cur { background: #DCE8F4; }
.ng .cc.hl, .ng .rc.hl { background: #FFE9B8; }

.cell {
  position: relative; background: var(--ng-paper); border-right: 1px solid #C9C5BB; border-bottom: 1px solid #C9C5BB;
  cursor: pointer; touch-action: none;
}
.cell.last-c { border-right: 2px solid #1F2328; }
.cell.last-r { border-bottom: 2px solid #1F2328; }
.cell.row-cur, .cell.col-cur { background: var(--ng-cur); }
.cell.f { background: #2B2F36; }
.cell.x::before, .cell.x::after {
  content: ''; position: absolute; left: 18%; right: 18%; top: 50%; height: max(1.5px, calc(var(--cs) * .1)); margin-top: max(-.75px, calc(var(--cs) * -.05));
  background: #8C8F96; border-radius: 1px; transform: rotate(45deg);
}
.cell.x::after { transform: rotate(-45deg); }
.cell.miss.f { background: #B23A3A; }
.cell.miss.x::before, .cell.miss.x::after, .cell.wrong.x::before, .cell.wrong.x::after { background: #B23A3A; }
.cell.wrong.f { background: #B23A3A; }
.cell.kc { box-shadow: inset 0 0 0 3px #B7791F; }
.cell.hintcell { box-shadow: inset 0 0 0 3px #B7791F; }
.cell.hintline:not(.f) { background: #FFF1CF; }
.cell.pop { animation: pop-in .18s ease-out; }
@keyframes pop-in { from { transform: scale(.7); } to { transform: none; } }

/* 完成: マスが絵の色に変わる（数字は消える） */
.ng.reveal .cell { border-color: transparent !important; transition: background-color .35s ease-out; transition-delay: calc(var(--d, 0) * 1ms); cursor: default; }
.ng.reveal .cell.x::before, .ng.reveal .cell.x::after { display: none; }
.ng.reveal .cc span, .ng.reveal .rc span { opacity: .25; }

/* ---------- 道具 ---------- */
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px auto 0; max-width: 560px; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 16px; justify-content: center; white-space: nowrap; }
.tool svg { width: 20px; height: 20px; flex: none; }
.seg { display: inline-flex; gap: 0; }
.seg .tool:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seg .tool:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -2px; }
.tool[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.after { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.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; }
.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; }
.lv.l5 { color: var(--ok); } .lv.l10 { color: var(--accent); } .lv.l15 { color: var(--warn); } .lv.l20 { color: var(--ng); }

/* ---------- ヒント・記録 ---------- */
.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; }
.think .pic { float: right; margin: 0 0 6px 12px; border: 1px solid var(--line); image-rendering: pixelated; }
.think::after { content: ''; display: block; clear: both; }
.callout { z-index: 3; top: 50%; }

/* ---------- 問題の一覧 ---------- */
.gallery { margin-top: 4px; }
.gal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gal-head h2 { margin: 0; font-size: 1.15rem; }
.gal-tabs { margin: 8px 0 4px; }
.gal-tabs button { min-height: var(--tap); padding: 0 14px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.gal-tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.gal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.gal-item { appearance: none; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius); padding: 6px 4px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 110px; }
.gal-item:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.gal-item.cur { border-color: var(--accent); }
.gal-item canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.gal-item .q { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--ink-sub); background: repeating-linear-gradient(45deg, var(--bg) 0 6px, var(--surface) 6px 12px); border: 1px solid var(--line); }
.gal-item small { font-size: 14px; line-height: 1.3; text-align: center; color: var(--ink-sub); }
.gal-item b { font-size: 14px; line-height: 1.3; text-align: center; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .tools { gap: 6px; }
  .tool { padding: 0 8px; font-size: 15px; gap: 4px; }
  .controls .btn.icon { padding: 0 9px; }
  .gal-list { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cell.pop { animation: none; }
  .ng.reveal .cell { transition: 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: 2; --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: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */