/* Cap or No Cap: loud yellow and heavy black type, like a tabloid front
   page. Two fat cards; the real one goes green, the cap gets struck out in
   red with the truth printed under it. */

:root { --yellow-hi: #f7df4b; --yellow-wash: #fffbe0; }
.cap { --game: var(--yellow-hi); gap: 16px; }

.dots { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 5px; }
.dots li { width: 26px; 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: 800 clamp(26px, 7.5vw, 34px)/1.1 var(--ui); letter-spacing: -0.02em; }

.pair { display: grid; gap: 12px; }
.fact {
  position: relative; width: 100%; min-height: 108px; padding: 18px 18px 16px; border-radius: 12px; cursor: pointer;
  border: 2.5px solid var(--ink); background: var(--paper); text-align: left;
  font: 700 clamp(19px, 5.4vw, 22px)/1.3 var(--ui); touch-action: manipulation;
  transition: background 0.12s, transform 0.12s var(--ease);
}
.fact:hover { background: var(--yellow-wash); }
.fact:active { transform: scale(0.99); }
.fact .tag { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.fact .truth { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; text-decoration: none; }
.fact.real { border-color: var(--green); background: #eef7ed; cursor: default; }
.fact.real .tag { color: #3d7a37; }
.fact.lie { border-color: var(--red); background: #fdf0ee; cursor: default; }
.fact.lie .tag { color: var(--red); }
.fact.lie .said { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--red); color: #8a8a8a; }
.fact.picked { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.fact.flash { animation: flash 0.35s var(--ease); }
@keyframes flash { from { transform: scale(0.97); } }

.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: 30px; height: 30px; background: var(--red); }
.res-squares i.ok { background: var(--green); }
.lies { margin: 6px 0 18px; border-top: 1px solid var(--rule); }
.lies p { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.lies s { color: var(--muted); text-decoration-color: var(--red); }
.lies a { color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .fact, .fact.flash { transition: none; animation: none; }
}