/* Game layout uses the shared stage tokens and replay control. */
[hidden] { display: none !important; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#app { display: grid; grid-template-rows: auto 1fr; }
.game-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); min-width: 0; }
.screen { width: 100%; }
.screen.active { flex: 0 1 auto; }
.game-content:has(#start-screen.active) #caption { display: none; }
.stage-actions a, .stage-actions button { padding: var(--s2) var(--s4); border-radius: var(--radius); min-height: 48px; color: var(--card); }
#parent-btn { font: inherit; padding: var(--s2) var(--s3); border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-soft); }
#parent-btn.holding { outline: 3px solid var(--accent); }
dialog { background: var(--card); }
dialog[open] { display: flex; flex-direction: column; gap: var(--s3); }
dialog h2, dialog p, dialog a, dialog button { margin: 0; }
dialog a, dialog button { padding: var(--s2) var(--s3); border-radius: var(--radius-sm); }
dialog button { color: var(--card); }
#parent-dialog label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); }
select { font: inherit; max-width: 100%; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
#parent-summary { line-height: 1.8; }
.choice.correct { border-color: var(--accent); outline: 3px solid var(--accent); }
.choice.hinted { border-color: var(--accent); }
.round-dots span { border-radius: var(--radius-sm); }
.round-dots span.done { background: var(--accent); }

.choices { gap: var(--s3); }
.tray { display: grid; grid-template-columns: repeat(3, clamp(32px, 8vmin, 64px)); grid-template-rows: repeat(2, clamp(32px, 8vmin, 64px)); gap: var(--s1); justify-content: center; align-content: center; }
.tray img { width: clamp(32px, 8vmin, 64px); height: clamp(32px, 8vmin, 64px); object-fit: contain; }
.tray.spread img:first-child { grid-column: 2; }
.tray.spread img:nth-child(2) { grid-column: 3; }
.tray img.counted { outline: 3px solid var(--accent); border-radius: var(--radius-sm); }
#add-btn { display: flex; flex-direction: column; align-items: center; gap: var(--s2); font: inherit; color: var(--ink); }
#add-btn img { width: clamp(78px, 20vmin, 140px); height: auto; }
#build-area { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3); }
#build-tray { border: 3px solid var(--line); border-radius: var(--radius); padding: var(--s2); background: var(--card); }
/* The collection tray appears only after the child adds an object. */
#build-tray:empty { display: none; }

/* ช่วงนับ: ของ N ชิ้นใหญ่พอให้นิ้วเด็กแตะทีละชิ้น · ชิ้นที่นับแล้วมีเลขกำกับมุมบน */
.count-tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3);
  max-width: min(92vw, 720px); padding: var(--s3); border: 3px solid var(--line); border-radius: var(--radius); background: var(--card); }
.count-item { position: relative; border: 3px solid transparent; background: none; border-radius: var(--radius-sm);
  padding: var(--s1); cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
.count-item img { width: clamp(64px, 18vmin, 124px); height: clamp(64px, 18vmin, 124px); object-fit: contain; }
.count-item:active { transform: scale(.94); }
.count-item.counted { border-color: #79c36a; background: #f1f8ec; animation: pop .4s ease; }
.count-item.counted::after { content: attr(data-n); position: absolute; top: calc(-1 * var(--s2)); right: calc(-1 * var(--s2));
  min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent); color: #fff; line-height: 1.6em;
  font-size: clamp(16px, 3.2vmin, 24px); font-weight: 600; text-align: center; }
.count-item[disabled] { cursor: default; }