/* Human or AI: a reading room. Passages are set like a page from a book
   (a text serif, generous leading) on paper-white cards; once you pick, the
   person's card names its author and book, and the other says plainly that an
   AI wrote it. */

:root { --slate: #c9d3dc; --slate-ink: #4f6272; --book: 'Newsreader', Georgia, serif; }
.human { --game: var(--slate); gap: 16px; }

.dots { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 5px; }
.dots li { width: 34px; height: 8px; border-radius: 4px; background: var(--rule); }
.dots li.now { background: var(--ink); }
.dots li.ok { background: var(--green); }
.dots li.no { background: var(--red); }

.ask { text-align: center; }
.round { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.ask h2 { margin: 2px 0 0; font: 700 clamp(24px, 6.6vw, 30px)/1.15 var(--slab); }

.pair { display: grid; gap: 12px; }
.page {
  width: 100%; padding: 16px 18px 16px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--rule); background: #fcfcfa; touch-action: manipulation;
  transition: border-color 0.12s, background 0.12s;
}
.page:hover { border-color: var(--slate-ink); }
.page .label { display: block; margin-bottom: 8px; font: 700 12.5px var(--ui); color: var(--slate-ink); }
.page .words { display: block; font: 400 18px/1.55 var(--book); color: var(--ink); white-space: pre-line; }
.page.poem .words { font-style: italic; }
.page .credit { display: block; margin-top: 10px; font: 600 14px var(--ui); }
.page.person { border-color: var(--green); background: #eef7ed; cursor: default; }
.page.person .label { color: #3d7a37; }
.page.bot { border-color: var(--rule); background: var(--wash); cursor: default; }
.page.bot .words { color: #6b6b6b; }
.page.picked { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }

.verdict { min-height: 24px; margin: 0; text-align: center; font-size: 17px; font-weight: 800; }
.verdict.good { color: #3d7a37; }
.verdict.bad { color: var(--red); }
.next { width: 100%; }

/* results */
.res-squares { display: flex; justify-content: center; gap: 5px; margin: 4px 0 8px; }
.res-squares i { width: 34px; height: 34px; background: var(--red); }
.res-squares i.ok { background: var(--green); }
.reads { margin: 6px 0 18px; border-top: 1px solid var(--rule); }
.reads p { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.reads a { color: var(--muted); font-size: 13px; }