/* ปุ่มเท่ากันเสมอ ภาพเล็ก 45% และภาพใหญ่ 81% จึงต่างกัน 1:1.8 ค่ะ */
#question { margin: 0; font-size: clamp(18px, 3.5vmin, 28px); }
.size-pair { flex-wrap: nowrap; gap: var(--s3); max-width: 680px; }
.size-pair .choice {
  display: grid;
  place-items: center;
  position: relative;
  width: clamp(140px, 36vmin, 300px);
  aspect-ratio: 1;
  padding: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.size-pair .choice img { width: 45%; height: 45%; object-fit: contain; transition: transform .4s ease; }
.size-pair .choice.is-large img { width: 81%; height: 81%; }
.size-pair.comparing .choice:first-child img { transform: translateX(5%); }
.size-pair.comparing .choice:last-child img { transform: translateX(-5%); }
.size-pair.helping .choice img { outline: 2px dashed var(--ink-soft); }
.size-pair.helping .choice::after { content: ''; position: absolute; bottom: 8%; left: 8%; right: 8%; border-bottom: 2px solid var(--line); }
#replay-btn { font: inherit; font-size: clamp(16px, 2.8vmin, 22px); min-height: 48px; padding: var(--s2) var(--s4); border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; }
button:focus-visible { outline: 3px solid var(--ok); outline-offset: 3px; }
#again-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .size-pair .choice, .size-pair .choice img { animation: none; transition: none; } }